Where should I put dataLayer creation code in the page? Is it mandatory to put it above the GTM snippet?
Where should I call the dataLayer.push() function? Should it always be put in the code were the dataLayer creation code is placed like below?
<script>
dataLayer=[{‘Pcategory’:’login’,‘Pno’:1}],
dataLayer.push({‘Pcategory’:’login’,Pno:1});
</script>
Is it mandatory to declare an event for each dataLayer we push?
Is it mandatory to declare the dataLayer before we call dataLayer.push() function or does GTM provide a built in dataLayer?
Where should I put the code below? If I want declare it, how can I do it?
Click Here...
You need to initialize the dataLayer above the GTM snippet. You need to put all information there that is supposed to be available on page load (the GTM snippet on page load can only access stuff that preceded the tag managenemt script). If you do not need custom data on page load the dataLayer might be empty. You still need to declare, else the push later on will fail.
You use a push when you want to add data after page load, e.g. if you want to respond to user interactions.
You do not need to add custom events to clicks or form submissions, since GTM has what's called auto-eventhandlers (i.e. the necessary javascript to respond to clicks is already part of the GTM script).
You need a custom event if you want to trigger tags on user interactions that are not clicks or form submits (or timers). E.g. if you run a javascript function and you need to trigger tags dependening on the result the function can push a custom event per possible result to the dataLayer, and you can fire tags accordingly.
For your example you might, for example, set up a click based trigger; if the link text is unqiue you could set the a pageUrl Variable based on the link text (which is automatically available via the {{Click Text}} variable if you use a click trigger). So for that example you would not have to use any custom code at all, you can simply use what GTM provides.
Related
I currently have a form with a related articles element that suggests the user related articles upon filling the form subject.
I'm trying to catch all the form submissions where a related article has been clicked.
I've created 2 triggers and 2 tags:
The first fires once the user clicks on one of the related articles.
The second trigger fires once the user clicked on the form submission button.
I've also created a Trigger group that combines these 2 triggers, however, I'm having trouble with storing the clicked article text from the first trigger and using it in the tag.
Eventually I want to send to analytics the form subject and the clicked article text.
I know this can be easily achieved with dataLayer, but unfortunately, I cannot add any code to the site source.
Any ideas on how to implement this without using dataLayer ?
Since standard variables are frequently overshadowed by new events, you probably should rewrite what you want to keep with a new name in the dataLayer. You do not need access to the site source to do so as long as your GTM snippet does not restrict GTM from adding custom html tags (blocking tag types is possible, but rarely used.)
You can do custom html tags with variable references like:
<script>
dataLayer.push({importantclick:{{click element}} })
</script>
fired on one event and create a new DataLayer variable to retrieve importantclick at a later event on the same page.
(If for some reason you really can't write to the dataLayer, then using custom javascript variables, you can instead examine the contents of the dataLayer yourself to see contents that were overshadowed or write data elsewhere in the window environment to be fetched by another variable. But both of those practices are highly discouraged when working with javascript variables.)
I am a developer in codiva.io a java ide for students. I am using codemirror editor.
I want to track on edits (specifically a pause or timeout after last edit).
I had previously used Google analytics, and for events, we will do ga.send(). Now I'm using Google tag manager, for clicks and other events it seems we can configure using tag manager ui itself.
With tag manager, I'm not able to find how implement tracking for this.
Codemirror generates an on change event. On each edit, clear any previous timer and setup a timeout trigger to run after 200ms. (The compilation will be dive at this point, and I want to make sure to track the number of times this event happened)
If I understand you correctly:
Use you change event to have a custom event pushed to the dataLayer:
dataLayer.push({event:'compile'});
Then create a trigger of the type "custom event", set event name to "compile" and use that to fire a Google Analytics event tracking tag (if you use the GA tag template you can select the hit type via a dropdown).
The "push" method of the dataLayer ist not the native array method but a special implementation by the GTM code; GTM uses this to monitor changes to the dataLayer, and the "event" keyword tells GTM to update its internal datastructure so new values become available to tags and triggers.
With the same push you can also pass data to be used as eventCategory etc:
dataLayer.push({
event:'compile',
eventCategory:'myCategory',
eventAction:'myAction',
....
});
You then create new variables of the "dataLayer" type and enter the name of the key you want to access. You can then use the variable in your Ga tag, either by selecting it from the autosuggest list (if you click the icon right to the eventCategory etc. fields) or by typing out the variable name with curly brackets, i.e {{myVariableName}}.
Also keep in mind that the "event" keyword in the dataLayer does not relate to Google Analytics events, except in the sense that it can be used to trigger event tracking (as well as any other tag). "Event" is just a keyword in GTM to indicate that data is updated and tags can now access the new data.
I'm trying to integrate Google Tag Manager with my Ember app. I'm having a hard time understanding how to notify GTM that the page changed, and send a page view event.
I've read a lot of things online, mostly working around creating a new variable for a "virtual page" or something, but obviously this is far from ideal.
I'd like to be able to just use dataLayer.push to notify the page actually changed. Is there an easy way out I didn't find or is it really a pain to track with GTM on SPA?
This was asked quite a while ago. With the current feature set of GTM, you can easily set up SPA page tracking without much trouble.
First, go to Triggers and create a new trigger. Select History Change as the trigger type. This will create a trigger that fires every time the location history changes.
Then create a new Tag of Universal Analytics type and set it up as per the screenshot below.
[
As for the trigger, set the previously defined History Change trigger, and you're done. Every time a navigation occurs in your SPA, a page view event with the proper page path will be triggered.
EDIT: as trognaders pointed out in a comment, this does not track the initial page view. To remedy, simply add an additional trigger for your tag that fires on the Page View event (All Pages). See screenshot below.
You definitely need to push events into the dataLayer which you can then trigger a GA page view tag in GTM. So to push an event into the DL:
dataLayer.push({'event':'virtualPageView'});
Then setup a trigger called 'vpv' which fires on a custom event called 'virtualPageView'. Add that trigger to a GA tag.
The best thing to do is also send through the details of the virtual page when you send the event. This way you can set up variables that pull these dataLayer property values into the page view call. So you might do this:
dataLayer.push({
'event':'virtualPageView',
'page':{
'title':'contact us',
'url':'/contact'
}
});
So you'd setup a variable called 'DL- page title' (for example) which is a dataLayer value of 'page.title' and another variable called 'DL - page url' which is a dataLayer value of 'page.url'.
You then setup a new Universal Analytics tag which has all your usual pageview settings but with 2 'Fields to Set' (under More Settings). Set 'title' to {{DL-page title}} and 'page' to {{DL - page url}}
Finally set the trigger to 'vpv' and you'll find everytime you push the event + data into the datalayer you'll get a pageView fired off with your virtual page's title and virtual url.
First of all I am new to GTM. I am trying to implement GTM video tracking on one of our site which is using JW player.
I have followed couple of articles as follows:
https://www.thyngster.com/jwplayer-video-tracking-using-google-tag-manager/
In the above one I was clueless what to do after putting the tag code as I couldn't find how to trigger that.
I also followed this link, but it didn't work either:
http://ecommppc.com/2014/11/30/track-jw-player-videos-on-gtm/
I believe I know what is going on. The code/tag, trigger, and variable he has set up in the tutorial is only what pushes the information to the dataLayer itself. The final step would be to add another variable, a tag to capture it, and a trigger to send it.
The variable you need is the dataLayer variable (Available in GTM under Variables > User Defined Variables > New > Data Layer Variable). You then give it the name of the variable in the dataLayer you want it to capture. Specifically, any of the variables in the dataLayer.push action (i.e. video_url, duration, etc).
The trigger to use in this case is the Custom Event trigger. This trigger will specifically wait for an object to be pushed to the dataLayer with the "event" variable in it. In this case, you need a trigger to wait for an event with the name "video". You can also add filters, i.e. this trigger will only fire on specific URLs, or when other conditions are true.
Finally, you need another GA Universal Analytics tag, set up to track events i.e. Track Type: Event. In this tag, set the trigger to the Custom Event trigger you made earlier, and then click into "Configure Tag". Under "More Settings", click "Add Custom Dimension". Make sure the index you are using to send it to Google Analytics is not in use in your property already; other than that it doesn't matter what index you choose. Finally, add the variable name in the "Dimension Value" field in this format: {{video_url}}. Instead of "video_url", include the name of the dataLayer Variable you created earlier.
This should get GTM to grab the variable out of the dataLayer and push it to Google Analytics every time that "event" variable is seen in the dataLayer object.
Hope that helps!
I am using the async version of Google Analytics along with custom variables and events. I have placed the tracking script (cut and paste from google) at the end of the section.
The custom variable is set above the tracking code in the head section. I'm assuming that Googles Analytics will send the data including the custom variable on page load. What happens if I have onclick triggered events? Will the custom variable in the head section get sent along with each event that is triggered as well?
I'm not sure how this plays out with javascript.
Thanks!
It depends on the scope of the custom variable. Page view scope will only send/report the first time. You will have to include it in the onclick code that is triggered to get it to count each click.
If you have it as a visit/session scope, in the reports, it will associate itself for each click event for the duration of the visit/session.