Currently, in the User Report view of Google Analytics, I get timestamps on each event, but it is only down to the minute, not the second. I can't find a setting in GA that changes that column.
My goal is to pass this timestamp through GTM, perhaps as "tag label", so that I can see it in GA.
How do I create a timestamp variable in GTM?
Create a custom javascript variable (i.e. a variable that contains a function, not a "javascript" variable that just reads a global variable), and give it a name, e.g. "timestamp".
Custom javascript variables are anonymous functions with a return value.
The current way to get a timestamp is Date.now(). This might not be supported by older browser (especially IE 8 and lower), so you might use new Date().getTime(); as an alternative.
The variable body would be as simple as:
function() {
return Date.now();
}
and you would use that in a tag by surrounding the variable name with double curly parenthesis, e.g. {{timestamp}}. Date.now() returns milliseconds ( elapsed since 1 January 1970 00:00:00 UTC), so you might want to divide by thousand.
Alternatively you could create a datetime variable that includes seconds and even milliseconds. I think this was originally by Simo Ahava:
function() {
// Get local time as ISO string with offset at the end
var now = new Date();
var tzo = -now.getTimezoneOffset();
var dif = tzo >= 0 ? '+' : '-';
var pad = function(num) {
var norm = Math.abs(Math.floor(num));
return (norm < 10 ? '0' : '') + norm;
};
return now.getFullYear()
+ '-' + pad(now.getMonth()+1)
+ '-' + pad(now.getDate())
+ 'T' + pad(now.getHours())
+ ':' + pad(now.getMinutes())
+ ':' + pad(now.getSeconds())
+ '.' + pad(now.getMilliseconds())
+ dif + pad(tzo / 60)
+ ':' + pad(tzo % 60);
}
which returns a formatted string like 2016-08-02T09:22:44.496+02:00.
The second it's not accesible via Google Analytics. The closest way to do this is via Google Big Query,but this last is only available for premium members.
Maybe you can add the timeStamp as CustomDimentions
function getdateGA(){
return Date();
}
ga('send', 'event', 'category', 'action', {
'dimention1': getdateGA()
});
The date format is not the best one, try to find the best for you modifing the getdateGA function
More resources about the date in
How to format a JavaScript date
Currently i am working on an app that uses sqlite. I have a scenario in which there are graphs according to days of week. User can check graphs of any day. There may be data available for that day or not.
Issue is for the first time every thing goes well. But then if user taps again on the day which actually have data available, app stop working, or i can say it stuck. it didn't crash or any exception.
private async void getGraphData(int p)
{
var checkCount = p;
Color currentAccentColorHex = (Color)Application.Current.Resources["PhoneAccentColor"];
BabySleepChart.Foreground = new SolidColorBrush(ConvertStringToColor(currentAccentColorHex.ToString()));
Conn = new SQLiteAsyncConnection(DB_NAME);
ObservableCollection<Graph> BabydailySleep = new ObservableCollection<Graph>();
var sundayData = await Conn.QueryAsync<BabySleep>("SELECT * FROM BabySleep WHERE today = ?", Convert.ToDateTime(DateTime.Now.AddDays(-p).Date.ToString("d")));
var count = sundayData.Any() ? sundayData.Count : 0;
if (count == 0)
{
MessageBox.Show("No date for " + DateTime.Now.AddDays(-p).ToString("dddddd"), "Data Not Found", MessageBoxButton.OK);
}
else
{
}
}
In else i display graphs. I am using amcharts. (The control doesn't go after the query for 2nd time.)
Please help . How can i solve this issue.
Regards.
I am working on a website offering a personal list of peaks for mountain lovers.
I am stuck on the function (pathRequest) of a Google map polyline since ages.
I cannot understand as this code is a copy from a lot of sources and a shame Firefox debug is not acting well with the Google map... getting things worst.
Here's the page :
http://www.mes-sommets.fr/ajouter-un-sommet/
To test, you need to enter "adresse départ" (start)and"adresse arrivée" (end) + "manuel"mode in option"itinéraire"`.
Bug is showing when clicking on "adresse arrivée" in autocomplete.
For the two options :
- automatique (google map direction service) -- OK
- manuel (polyline) -- KO
Then I am calling the same functions :
- distance calculation getDistance(path)
- elevation calculation plotElevation(results, status)
Mode automatique (google map direction service) :
var path = result.routes[0].overview_path;
getDistance(path);
Mode manuel (polyline) :
var polyline_path = polyline.getPath();
getDistance(polyline_path);
Function getDistance :
function getDistance(path) {
var m = google.maps.geometry.spherical.computeLength(path);
var km = m / 1000;
document.getElementById("ninja_forms_field_34").value = km.toFixed(2) + " km";
var pathRequest = {
'path': path,
'samples': 256 }
elevator.getElevationAlongPath(pathRequest, plotElevation);
};
Function plotElevation :
function plotElevation(results, status) { if (status ==
google.maps.ElevationStatus.OK) {
var deniv_positif = 0;
var deniv_negatif = 0;
var elev = results[0].elevation;
for (var i = 0; i < results.length; i++) {
if ( (results[i].elevation - elev) > 0 ) {
deniv_positif = deniv_positif + (results[i].elevation - elev);
}
else {
deniv_negatif = deniv_negatif + (results[i].elevation - elev);
}
elev = results[i].elevation;
}
document.getElementById("ninja_forms_field_31").value = "+" + deniv_positif.toFixed(0) + " / " + deniv_negatif.toFixed(0) + " m" ;
} }
Any advice would be great, if I did not put enough code, please tell me. Hope it is OK.
Best regards,
Benjamin
The only thing I can see is this.
The DirectionsRoute overview_path is "an array of LatLngs"
The ElevationService getElevationAlongPath function expects the PathElevationRequest to have an Array for its path.
All good so far...
However, the Polyline getPath function returns an MVCArray, not just an Array.
Usually they seem pretty interchangeable to me, but this might be one place where they're not.
You could try calling the getArray function on the MVCArray to convert it into an Array and see if that makes any difference.
var polyline_path = polyline.getPath();
getDistance(polyline_path.getArray());
I'm trying to implement this solution to "grey out" past events in Fullcalendar, but I'm not having any luck. I'm not too well versed in Javascript, though, so I assume I'm making some dumb mistakes.
I've been putting the suggested code into fullcalendar.js, inside the call for daySegHTML(segs) around line 4587.
I added the first two lines at the end of the function's initial var list (Why not, I figured)—so something like this:
...
var leftCol;
var rightCol;
var left;
var right;
var skinCss;
var hoy = new Date;// get today's date
hoy = parseInt((hoy.getTime()) / 1000); //get today date in unix
var html = '';
...
Then, just below, I added the other two lines inside the loop:
for (i=0; i<segCnt; i++) {
seg = segs[i];
event = seg.event;
classes = ['fc-event', 'fc-event-skin', 'fc-event-hori'];
if (isEventDraggable(event)) {
classes.push('fc-event-draggable');
}
unixevent = parseInt((event.end.getTime()) / 1000); //event date in Unix
if (unixevent < hoy) {classes.push('fc-past');} //add class if event is old
if (rtl) {
if (seg.isStart) {
classes.push('fc-corner-right');
}
...
Running this code results in a rendered calendar with no events displayed and an error message: Uncaught TypeError: Cannot call method 'getTime' of null
The "null" being referred to is, apparently, event.end.getTime(). But I'm not sure I understand what exactly is going wrong, or how things are being executed. As written, it seems like it should work. At this point in the code, from what I can tell, event.end contains a valid IETF timecode, but for some reason it's "not there" when I try to run it through getTime()?
This isn't a mission-critical tweak for me, but would still be nice—and I'd like to understand what's going on and what I'm doing wrong, as well! Any help greatly appreciated!
If you are using FullCalendar2 with Google Calendar, you will need to use the version of the code below. This uses Moment.js to do some conversions, but since FC2 requires it, you'll be using it already.
eventRender: function(event, element, view) {
var ntoday = new Date().getTime();
var eventEnd = moment( event.end ).valueOf();
var eventStart = moment( event.start ).valueOf();
if (!event.end){
if (eventStart < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
} else {
if (eventEnd < ntoday){
element.addClass("past-event");
element.children().addClass("past-event");
}
}
}
As per FullCalendar v1.6.4
Style past events in css:
.fc-past{background-color:red;}
Style future events in css:
.fc-future{background-color:red;}
There's no need to fiddle with fullcalendar.js. Just add a callback, like:
eventRender: function(calev, elt, view) {
if (calev.end.getTime() < sometime())
elt.addClass("greyclass");
},
you just have to define the correct CSS for .greyclass.
Every event has an ID associated with it. It is a good idea to maintain your own meta information on all events based on their ids. If you are getting the events popupated from a backend database, add a field to your table. What has worked best for me is to rely on callbacks only to get the event ids and then set/reset attributes fetched from my own data store. Just to give you some perspective, I am pasting below a section of my code snippet. The key is to target the EventDAO class for all your needs.
public class EventDAO
{
//change the connection string as per your database connection.
//private static string connectionString = "Data Source=ASHIT\\SQLEXPRESS;Initial Catalog=amit;Integrated Security=True";
//this method retrieves all events within range start-end
public static List<CalendarEvent> getEvents(DateTime start, DateTime end, long nParlorID)
{
List<CalendarEvent> events = new List<CalendarEvent>();
// your data access class instance
clsAppointments objAppts = new clsAppointments();
DataTable dt = objAppts.SelectAll( start, end);
for(int i=0; i<dt.Rows.Count; ++i)
{
CalendarEvent cevent = new CalendarEvent();
cevent.id = (int)Convert.ToInt64(dt.Rows[i]["ID"]);
.....
Int32 apptDuration = objAppts.GetDuration(); // minutes
string staffName = objAppts.GetStaffName();
string eventDesc = objAppts.GetServiceName();
cevent.title = eventDesc + ":" + staffName;
cevent.description = "Staff name: " + staffName + ", Description: " + eventDesc;
cevent.start = (DateTime)dt.Rows[i]["AppointmentDate"];
cevent.end = (DateTime) cevent.start.AddMinutes(apptDuration);
// set appropriate classNames based on whatever parameters you have.
if (cevent.start < DateTime.Now)
{
cevent.className = "pastEventsClass";
}
.....
events.Add(cevent);
}
}
}
The high level steps are as follows:
Add a property to your cevent class. Call it className or anything else you desire.
Fill it out in EventDAO class while getting all events. Use database or any other local store you maintain to get the meta information.
In your jsonresponse.ashx, retrieve the className and add it to the event returned.
Example snippet from jsonresponse.ashx:
return "{" +
"id: '" + cevent.id + "'," +
"title: '" + HttpContext.Current.Server.HtmlEncode(cevent.title) + "'," +
"start: " + ConvertToTimestamp(cevent.start).ToString() + "," +
"end: " + ConvertToTimestamp(cevent.end).ToString() + "," +
"allDay:" + allDay + "," +
"className: '" + cevent.className + "'," +
"description: '" +
HttpContext.Current.Server.HtmlEncode(cevent.description) + "'" + "},";
Adapted from #MaxD The below code is what i used for colouring past events grey.
JS for fullcalendar pulling in Json
events: '/json-feed.php',
eventRender: function(event,element,view) {
if (event.end < new Date().getTime())
element.addClass("past-event");
},
other options ....
'event.end' in my Json is a full date time '2017-10-10 10:00:00'
CSS
.past-event.fc-event, .past-event .fc-event-dot {
background: #a7a7a7;
border-color: #848484
}
eventDataTransform = (eventData) => {
let newDate = new Date();
if(new Date(newDate.setHours(0, 0, 0, 0)).getTime() > eventData.start.getTime()){
eventData.color = "grey";
}else{
eventData.color = "blue";
}
return eventData;
}
//color will change background color of event
//textColor to change the text color
Adapted from #Jeff original answer just simply check to see if an end date exists, if it does use it otherwise use the start date. There is an allDay key (true/false) but non allDay events can still be created without an end date so it will still throw an null error. Below code has worked for me.
eventRender: function(calev, elt, view) {
var ntoday = new Date().getTime();
if (!calev.end){
if (calev.start.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
} else {
if (calev.end.getTime() < ntoday){
elt.addClass("past");
elt.children().addClass("past");
}
}
}
Ok, so here's what I've got now, that's working (kind of):
eventRender: function(calev, elt, view) {
var ntoday = new Date();
if (calev.start.getTime() < ntoday.getTime()){
elt.addClass("past");
elt.children().addClass("past");
}
}
In my stylesheet, I found I needed to restyle the outer and inner elements to change the color; thus the elt.children().addclass addition.
The only time check I could get to work, lacking an end time for all day events, was to look at the start time - but this is going to cause problems with multi-day events, obviously.
Is there another possible solution?
I would like a way to obtain an HTML element or CSS selector (or a reference to the droppable object itself) for the date on which an external draggable element was dropped. I tried using the following within the drop() callback to get the node for the date box using the coordinates of the drop event:
var pageX = jsEvent.originalEvent.pageX;
var pageY = jsEvent.originalEvent.pageY;
var domElem = document.elementFromPoint(pageX, pageY);
var node = Y.one(domElem).ancestor('#calendar > .fc-content table.fc-border-separate tr > td', true);
(I'm using the YUI 3 Y.one() and ancestor() methods above to get the node I want, but other methods could be used.)
The above does correctly locate the node of the date box as long as the drop does NOT land on top of an event cell rendered on that date. If the drop does happen to land on an event cell, however, domElem ends up being the event cell, which is an absolutely positioned element outside of the calendar, and the ancestor() methodology above does not work.
I have also tried getting a reference to the droppable obj by way of the draggable element revert property:
revert: function(droppableObj) {
if(droppableObj === false) {
alert('No droppableObj');
return true;
}
else {
alert(Y.dump({droppableObj: droppableObj}));
return false;
}
},
Unfortunately, the above does not work. Even though the external element does drop correctly, the revert function does not recognize the calendar as droppable. (For details, see my earlier stackoverflow post at: Fullcalendar: draggable object rejects fullcalendar as droppable even though fullcalendar accepts drop )
The only alternative I can think of is to use the date object in the drop() callback, and with that find the correct fc-dayXX element, but that seems pretty cumbersome. I have searched on this already, but not found anything so far. If anyone has a suggestion, please let me know.
Here is what I came up with for the fullcalendar drop callback:
function getSelectorForDroppedOnDate(date, allDay, jsEvent, ui) {
if (! date) return;
var displayedDate = $('#calendar').fullCalendar('getDate');
var displayedMonth = displayedDate.getMonth(); // 0 - 11
var displayedYear = displayedDate.getFullYear();
var droppedOnYear = date.getFullYear();
var droppedOnMonth = date.getMonth(); // 0 - 11
var droppedOnDate = date.getDate(); // 1 - 31
var droppedOnDayOfWeek = date.getDay(); // 0 - 6 no matter what week of the month
// Get values related to the last day of the month before the month the event was dropped on
// so that the grid location of the drop can be determined
var lastDayOfMonthBeforeDroppedOnMonth = new Date(droppedOnYear, droppedOnMonth, 0); // This is actually correct
var dateOfLastDayOfMonthBeforeDroppedOnMonth = lastDayOfMonthBeforeDroppedOnMonth.getDate(); // 1 - 31
var dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth = lastDayOfMonthBeforeDroppedOnMonth.getDay(); // 0 - 6
var i;
var gridLocationOfDrop; // 0 - 41 to cover 42 days of six weeks always shown
if (droppedOnMonth === displayedMonth) { // dropped on month is same as currently displayed month
i = 0;
// adjust droppedOnDayOfWeek by 1 to account for 0-based index
while ((droppedOnDayOfWeek + 1) + i*7 < droppedOnDate) {
i++;
}
gridLocationOfDrop = droppedOnDayOfWeek + i*7;
}
else {
// if dropped on date is in month previous to currently displayed month (need to compare years since inequality will reverse at year boundary)
if ((droppedOnMonth < displayedMonth && droppedOnYear === displayedYear) || (droppedOnMonth > displayedMonth && droppedOnYear < displayedYear)) {
gridLocationOfDrop = droppedOnDayOfWeek;
}
// else if dropped on date is in month after currently displayed month (need to compare years since inequality will reverse at year boundary)
else if ((droppedOnMonth > displayedMonth && droppedOnYear === displayedYear) || (droppedOnMonth < displayedMonth && droppedOnYear > displayedYear)) {
i = 0;
// adjust dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth by 1 to account for 0-based index
while ((dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth + 1) + i*7 < dateOfLastDayOfMonthBeforeDroppedOnMonth) {
i++;
}
gridLocationOfDrop = (dayOfWeekOfLastDayOfMonthBeforeDroppedOnMonth + i*7 + droppedOnDate);
}
}
selector = '#calendar > .fc-content table tr > td.fc-day' + gridLocationOfDrop;
return selector;
}
Works for me!