The following datalayer push appears to be deployed correctly after an action is clicked on a website.
I can see that this code is loading onto the page after the click fires, this full datalayer push script is then visible within the source code.
But when using the GTM debugger, there is no sign of the event, or the datalyer information.
Is this an issue with the data layer code, or perhaps how or when it is fired?
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'addressResult',
'postcode': '3415',
'availability': 'limited'
});
</script>
Related
According to this on Single Page Applications you load the google tag script when the user first loads the app, then on subsequent page views you programmatically update the page path like so:
gtag('config', 'UA-1234567-89', {'page_path': '/about-us'});
My question is, when you call this code does it automatically send a new page view too?
So for example let's say my SPA has a root URL of:
https://helloworld.com
And the user clicks on the /about-us link from the homepage. Does this mean there will be 2 page view events?
First https://helloworld.com/
Then https://helloworld.com/about-us
Or do I need to do something else after updating the page path to send the page view event to GA for the about us page?
gtag('config', 'UA-1234567-89', {'page_path': '/about-us'});
// Call something else here to trigger new page view using updated path here?
If you're using gtag.js then your code snippet for implementation will look something like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-00000000-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-00000000-1'); //modify this line
</script>
To prevent it from sending a pageview on load you just make the adjustment like so:
gtag('config', 'GA_MEASUREMENT_ID', {'send_page_view': false}); //replace the id with your own id
For SPAs, I'd recommend Google Tag Manager instead and use datalayer events or the included history change trigger for tracking, there might be a slight learning curve to start, but I think it'll simplify your code and make it more "portable" should you switch analytics platforms later on.
More info on GTM: https://developers.google.com/tag-manager/devguide
I am building a SPA and I would like to have a full control over pageview tracking.
I have an Universal Analytics tag in GTM.
How can I disable initial pageview?
gtag.js has send_page_view option:
gtag('config', 'GA_MEASUREMENT_ID', { 'send_page_view': false });
How can I set something similar for Universal Analytics?
When tracking a SPA application it makes sent not using the default "Page View" trigger for Pageviews.
If you want to have full control over the Page View you should do two things
Implement a custom dataLayer push in your SPA.
Create a custom event trigger in GTM.
Implement a custom dataLayer push in your SPA
For example:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'custom_pageview',
'additionalData1': 'optional data 1'
})
This push need to happen every time you want a page view tracked.
Create a custom event trigger in GTM
go to Trigger
add custom event trigger
as Event name chose the event you pushed in the dl: custom_pageview
Now use this trigger for your google analytics page view tag.
I'm not sure which tracking codes are needed to get both Google Analytics (GA) and Google Tag Manager (GTM) to work. I'm currently using the following script with GA ->
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxx-x');
</script>
Now that I'm setting up GTM, it is asking me to add the following tracking codes as well ->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s) .
[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?
id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxx');</script>
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Do I need all these snippets? It would be important to be able to both set up event tracking and not lose any previous GA data.
Technically you are migrating from gtag.js to GTM (GTM is a tag manager, and while it can be used to deploy GA by itself it tracks nothing).
If you want to integrate Google Analytics via GTM then the second snippet in your post is the replacement for the first, not an addition. You need the second snippet, then you configure GTM to deploy Google Analytics to your page. For most use cases you do not even need the noscript tag (unless you specifically configure tags that run in noscript mode).
For you debounce-event you can use a timeout to push an event to the datalayer and then use it to trigger a Google Analytics Event. You can do this either somewhere in your page code, or in a custom HTML tag that is triggered on a Pageview (or DOM ready) event.
setTimeout(dataLayer.push({'event':'deBounce'}),20000);
Then you create a trigger of the "Custom Event" type an in the field "event name" you enter "debounce" (without the quotes). You then use that trigger to fire a Google Analytics tag that is set to event tracking in GTM (you notice already that this is not really simpler than gtag.js, but it allows you to control also non-Google tags so it's probably worth the effort).
The "Event" key is special in the dataLayer object - Google overwrites the native push-method in the datalayer array to listen for object keys called "event". Whenever it hits an "event" key it updates all internal variable from the dataLayer (this adds all newly pushed values) and then allows to fire tag.
Yes you would need both the script to set up GTM. 1st code preferably in the head section and 2nd code in the body section of your website.The code enables tag manger to fire tags by inserting gtm.js in the page.
Once your GTM is set up ,for tracking you can create universal Analytics tag to track your events.Check out the url below for tracking events using GTM.
https://www.gravitatedesign.com/blog/google-tag-manager-analytics-event-tracking-2018/
I am using the new gtag.js on a website with existing Google Tag Manager dataLayer. I am trying to send events via gtag but because GTM also uses the same window.dataLayer for its operation (and we have some custom operation going on the dataLayer, so I cannot change over there), events are not being sent.
Is there a way to rename window.dataLayer for gtag.js?
It would seem so. Since gtag uses infrastructure from GTM I look how GTM goes about renaming the dataLayer and tried the same with gtag:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456789-1&l=foo"></script>
<script>
window.foo = window.foo || [];
function gtag(){foo.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123456789-1');
</script>
Watching the console in a jsfiddle I could see that the pageview was sent. adding the "l" query parameter with your desired datalayer name to the script tag seems to do the trick.
This is the code I have
jQuery('iframe.language-menu-frame').contents().find(".text").click(function(){
if (ga) {
ga('send', 'event', 'Language Tool', 'click');
}
});
I placed this code inside my js file along with other event tracking code. All the other event tracking code works just fine, but not this one. Any idea why it is working in the console but not when installed into the js file?