Need some advice in relation to giving our developers the code for the dataLayer that is to be used along with the GTM code.
If the dataLayer is to be on every page along with the container tag code, how do i define all variables for many events across the domain?
dataLayer = [];
I've read that using macros is the best way going forward, which should mean less time dealing with the developers in the future. I'm not a coder so i'm struggling to understand what code to give. Struggling with the current lack of documentation for non-developers.
The website is a non-ecommerce site but we track many events as micro-conversions.
Ninjasys,
your code is correct :-). You have successfully implemented GTM data layer (it should be before GTM tag itself in the source code of your webpage).
The only thing you need to do now is to fill it. You can either specify its items when the page loads (if there is a need for that), or you can push updates to it when a user does something (like clicks on the button / selects a drop-down value).
Using onclick attributes is the easiest way -- simply add:
onclick="dataLayer.push({'event': 'EventFire-TopMenu',
'EventCategory': 'Navigation', 'EventAction': 'Menu', 'EventLabel':
'QuickCheck'});"
With this code, you are telling GTM to track an event. Setup 3 macros that will retrieve the values from data layer (EventCategory, EventAction and EventLabel) and then set a rule to trigger a Google Analytics Event Tag with the condition being event equals EventFire-TopMenu.
Keep in mind that you can pick any names you want, I just copied the example above from one of my webpages. I would also suggest reading few articles about event listeners that GTM introduced few months back, it makes your life a lot easier.
But I hope this simple example will get you started.
Related
I have a GTM script implemented in my Angular application (SPA - Single Page Application).
When I change the page, a Page-View event is triggered via: window.dataLayer.push(obj)
obj represents the whole object.
On GTM side, I have 2 triggers as a result:
Insert to the DOM a Custom HTML element (a script element) that triggers another dataLayer.push with a simple object that indicates the new page view and the previous referer.
Insert to the DOM an iframe of type DoubleClick Floodlight to track certain behaviors for a short lifespan.
Now, to my understanding, these events should have been inserted to the DOM once and get cleared after that.
As it seems, for every page view that a user creates while navigating in the app, linearly, 2 elements are appended to the DOM (scropt element + iframe).
This behavior causes a tremendous amount of js heap size. I see a great memory leak in the Memory tab in chrome DevTools.
Of course, dataLayer keeps track of events and once it gets to 300 events it pops the oldest event, etc...
I would like to know is this is an expected behavior by design and it's just me that is missing a key component in GTM.
Am I supposed to create a cleanup tag to trigger after all of my elements are inserted to the DOM?
Or even better, try to track it and remove it from within my application?
I feel like I did not truly understand my problem so I can only hope you have a clue what I'm aiming to explain here.
Thanks ahead.
I did not try anything.
All I did was to read stackoverflow questions and answers, combined with a lot of articles, videos, dry documentation.
I do have a few leads as to what to try and tackle but I prefer the community to guide me through their experience if possible.
We put the GTM code snippet in the site.
However the sequence of events resets every time I switch from one page to another.
For example - if a user comes on the login page, enters the login details and clicks the login button to go to the home page, the list of events reset and I lose all data about previous events.
How can i ensure that I dont lose the event data from previous pages?
There's nothing you can do about the browser resetting window-level variables, that's just how they work.
You might want to reconsider the way you think about GTM and the dataLayer. Instead of thinking of the dataLayer as a list of all past events, think of it as just a way to send data to Google Analytics (or whatever too you're using). Google Analytics is what stores the events, the dataLayer is just an interface for sending them there.
Having said that, here are some potential solutions for remembering values across pages:
You could try using something like window.sessionStorage, which will allow the browser to remember certain values across pages. This isn't a solution for remembering the entire dataLayer, but if you have one or two bits of data you want on multiple pages, this might work.
Alternatively, if you have data that's stored on the server (like the user's ID) that you want to have client-side, you could have your server generate some code to push that data when the page loads, like this:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'userId': '123'
});
Edit: I just learned that Simo Ahava found a way to do this. It is very complicated and I still recommend changing the way you think about the dataLayer, but it is possible.
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'm using Google Tag Manager and implementing Enhanced Ecommerce tracking via dataLayer. Everything is working fine. However, I'm now adding a CTA (call to action) that I want to track impressions for (there's multiple versions). This CTA is rendered as a partial, so at the time dataLayer is being constructed, it doesn't exist yet and I have no idea what will end up being there.
With straight Google Analytics, it looks like you can manually track an impression via:
ga('ec:addImpression', {
// impression data
});
But, this doesn't work with GTM, as ga is not defined in that scenario. According to the GTM Enhanced Ecommerce documentation, the only other "option", is to manually track the impression through the GTM control panel based on page view. Again, that's not feasible as the impression data is not always the same.
After a little research, I found a third "option" in delaying pushing dataLayer. For example, instead of letting if fire on GTM load, you can tie it to a particular event and then send that event at a later point. I suppose that would let me, then, alter the dataLayer in this partial, as long as I made sure that the event was not sent until well after it's been rendered. However, that not only seems clunky and prone to error, but it would also require me to substantially alter the rest of my Enhanced Ecommerce tracking code.
Is there no way to just send the impression as you can with straight GA, with GTM?
I am not quite sure that I understand the problem (but I have a go anyway). The way to do this is to push new data to the datalayer and have a custom event, i.e. the keyword "event" within the datalayer with a custom value; you then can use a "custom event" type trigger with the value you have pushed:
dataLayer.push({
"event":"mycustomevent",
"impressionData": myData
})
Specifications for EEC dataLayer are here. You then send a GA event that has EEC enabled and reads EEC data from the impressionData variable in the example.
You seem to have figured that out in principle, but seem to think this is somehow bad. No, it isn't, it is the recommended way by Google.
The dataLayer is an array of objects, and you can add new data to it by using the push method. This is not the native push method, but a custom implementation by Google. It scans the added data on every push, and if it finds the "event" key in the added object it adds the data from the on-page dataLayer variable to GTMs internal data model, where you then can use it in your tags.
Your problem might be, if I understand correctly, that you seem to think you have to construct all of the datalayer in a single go. But it is perfectly fine to split it up into multiple pieces and add new data via dataLayer.push as you need it.
I have some check boxes on my website selecting which the data on the page gets filtered but the page name remains the same. I want to capture the data for visitors selecting any of the check boxes. Can you please let me know how can this be done?
Presently, I have different page name whenever the user select any of the check box. But by doing this, Page views data for that page becomes irrelevant.
For Omniture tracking, that's very possible, but you need to add a bit of javascript. You need to add an onClick event for the checkbox, and have it submit a custom link event to Adobe. They provide a function for it:
s.tl(this, 'o', 'Checkbox X Clicked');
Prior to this call, you can set props/evars if you want other tracking tied to this event. It doesn't count as a page view, though.
The Omniture implementation guide is here:
http://microsite.omniture.com/t2/help/en_US/sc/implement/oms_sc_implement.pdf... do a search for the s.tl() function. It'll explain.
Presumably, your page has JavaScript that does the filtering.
You would need to add to this JavaScript to send an AJAX request to the server every time the user makes their selection. The server will need to track the requests in a database or a file. After that, you can analyse the results.
There are many ways to send AJAX requests in JavaScript. The basics are here: http://www.w3schools.com/ajax/default.asp but there are also 3rd party libraries available.
Unfortunately there is nothing that "google-analytics' can do for you here, as far as I know.
Good luck,
DC