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/
Related
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.
When using the Google Tag Manager, is it possible to track some things the old way in addition to using the GTM?
For example, I use GTM in order to fire a page view.
However, I want to fire another page view, when a user clicks a button, also known as a virtual page view.
The button in question doesn't have an ID and I don't trust the othet agency, which handles these buttons to consistently keep the same IDs for these elements. So I would rather have them be responsible for these types of page views.
The code for the virtual page view would look something like that:
ga('send', {
hitType: 'pageview',
page: 'button2'
});
Since the tracker is already initialized by GTM, I would only have this code outside GTM.
Would this work if all other google analytics related things run over gtm and where should I put this code in this case? Somewhere after the GTM code on the page I'd imagine?
Google Tag Manager (GTM) by default uses a random name for each tracker, generated for each Universal Analytics tag. There is a possibility to use fixed name for trackers, which is highly discouraged. This means, that you might have difficulties to identify the proper tracker to use, when sending your additional pageview data.
There are however other methods to send virtual pageviews using GTM, where you can benefit from your existing Analytics settings, defined in Google Tag Manager. (Preferably by using Google Analyitcs Settings variable.)
As far as I understand, you have control over the code, to run some JavaScript on the relevant click event.
So instead of directly invoking the ga object, you can send the desired data to GTM, with a call like this:
dataLayer.push({
event : 'virtualPageView',
virtualPagePath : 'button2'
});
Obviously, there are a couple of things you need to set up in GTM, which will be able to act on this event, and send the pageview to Google Analytics.
Create a variable that points to virtualPagePath dataLayer variable, so the newly pushed value could be reused
Create a custom event trigger, that can be used with one or more tags. The event name should match your given event name, virtualPageView in my example.
You need an Universal Analytics tag, which will send the pageview. This tag should be fired by your new custom event trigger, and should have an extra setting compared to your regular pageview tag. Namely, page variable within the Fields to set block should point to the newly created dataLayer variable, that contains your virtual page path.
This way, Google Tag Manager will take care of creating the tracker for you, sending the hit to Google Analytics, and using the virtual page path variable provided by you, instead of the URL in the browser address bar.
I have a complicated issue with GTM, dataLayer and GA.
My setup is:
GA tag is triggered in PageView with Enhanced Ecommerce enabled by using dataLayer
A Custom HTML tag which pushes an item to dataLayer, and it's configured to run just before the GA tag (by using tag sequencing)
Problem is; GA is not including dataLayer changes made by custom Tag even if it's fired after Custom tag.
I noticed, dataLayer.push(...) creates a new GTM event named message.
How can I handle this, GA pageview tag must have the final dataLayer.
tHanks
The datalayer is not re-evaluated in a tag sequence. However you can manipulate the dataLayer directly.
First you need to make sure that the built-in "Container ID" variable is active (or you pass in the ID manually).
Then you get a reference to your GTM instance and call a dataLayer.set with a key and value:
var gtm = google_tag_manager[{{Container ID}}];
gtm.dataLayer.set('someKey',"someValue")
Unlike a dataLayer.push this will be available in the next step in the sequence.
First of all, this is first time I'm trying to setup Google Analytics and Tag Manager and need client id from _ga cookie.
I thought that including snippet gtm.js is enough but _ga is not set after that
<!-- Google Tag Manager -->
<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-XXXX');</script>
<!-- End Google Tag Manager -->
So my question do I need to include also snippet for analitycs.js or gtm.js is enough but I'm doing something wrong ?
To summarize you need to follow these steps to start tracking to Google Analytics via GTM (meaning to se _ga cookie created):
implement GTM to page
create in the GTM management interface pageview GA Tag with desired tracking ID UA-XXXX
assign trigger to this Tag - probably All Pages which is automatically created
preview the tag - to see if its working and you are getting real-time hits on your page in Google Analytics interface
publish the changes to the GTM container
After these steps everything should work fine and the cookie should be created.
In case of need refer to this video:
https://www.youtube.com/watch?v=28d60ejfk3s
First create variable on GTM type 1st-party cookie
Variable - GA-COOKIE
1st-party cookie
On Cookie Name = _ga
Obtain ClientID from the Cookie
Create one custom javascript an put this function
function() {
var id = {{GA-COOKIE}};
var aux;
aux = id.split(".");
return aux[2]+"."+aux[3];
}
This function return the clientID
Just starting with Google Tag Manager. In my analytics setup I am sending custom page paths to canonicalize or "unify" the page path since in the web app there can be many different URLs for the same page. Example:
/?action=view
/view
/view_page
and in my GA for that page I'm sending:
ga('send', 'pageview', '/view');
I can't figure out how to set this up with GTM. I have access to the server side so I can make any necessary changes there.
I tried setting it in the dataLayer link this:
<script>
dataLayer = [{
'pageview': '/view'
}];
</script>
And I can see the data in the datalayer debug/preview, but it doesn't appear this is actually being set as the page path. I am guessing something needs to be set up on the GTM admin to map the dataLayer value?
If you want to push the pagepath as a dataLayer parameter, then you would need to
configure a dataLayer type variable with the value of pageview (this is how the value you've defined in the dataLayer gets passed into GTM).
In your base pageview tag, you would need to set the page field (under "Fields to Set") with the value of the name of the dataLayer type variable.
It's worth mentioning that your dataLayer declaration MUST come before the GTM container. In this way, you can set your pageview to fire on the regular Page View trigger.