The case: We are running a test on 5% of page views (NOT USERS) with a different ad layout. We are looking to tag each page view that has the different ad layout with a custom dimension.
The custom dimension scope is "Hit".
The problem we're running into: Google Analytics reporting is showing more than 5% of page views with the custom dimension. We know (via other reporting) that the different ad layout is only being shown to 5% of traffic (so Google Analytics is overreporting).
I'm assuming this is happening because the dimension we're setting is staying for subsequent page views (i.e. once a user has been tagged with that dimension, all page views after that are tagged). This is almost certainly due to a misunderstanding of how dimensions work and/or the code.
The code:
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID', {
'custom_map': {'dimension1': 'adlayout'}
});
Later on in code:
gtag('event', 'adlayout_dimension', {'adlayout': 'true'});
Questions:
Are custom dimensions the correct way to do this? Is there a better feature for tagging a page view in Google Analytics?
If so, where am I going wrong with my code/setup that's causing it to overreport?
The event is firing after the pageview and the custom dimension is associated with the event.. not the pageview.
To fix it going forward, pass the custom dimension with the pageview itself rather than an event. To do so, edit the tracking code for the relevant pages similar to the following
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_TRACKING_ID',{
"dimension1": "true"
});
</script>
You can then create a custom report using a flat table, with Page and the Custom Dimension as dimensions together with the desired metrics.
I think that in this case the most suitable scope is at session level. In this way you can see all the sessions that have seen a particular page tagged (obviously if in a session you can see more than one page tagged with your system only the last value will be saved).
Otherwise at hit level but only for specific pages and looking at unique pageviews.
Related
I have an issue where a data layer value is not being passed to GA4.
When the user clicks download, I assign the title of the download to a Data Layer variable. This works.
I then check the Data Layer, and there it is. Great!
I create an additional GA4 event where I assign that variable, check it in GTM and GA Debug mode, and see nothing. Not even the parameter name with no value.
Both of these tags use the same click trigger.
I realize this is probably not ideal. Is there a way to push directly to GA4 from the Custom HTML Tag?
Thank you.
# This captures the name of the export and adds it to the Data Layer.
# Trigger is a click event.
<script>
$(".download-export-icon").click(function() {
var kp_export_company_name = $(this).closest('.export-file-list-top').find('.export-list-file-name').text();
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'kp_export_name_test',
'kp_export_company_name': kp_export_company_name
});
console.log( 'export name: '+kp_export_company_name );
});
</script>
Screenshot of custom HTML tag.
Additional Tag to send to GA4
I'm trying to report on website performance for a website with editors in various UK regions (Eg. South-West, North, North-East) that don't map to regions that GA understands.
Is it possible to embed the region into the metadata of the page and then read that via Google Analytics as a hit for a custom dimension? If so how do I format the metadata tag on the page?
You can absolutely do this. On your page, below wherever it is that you have the Google Tag Manager script, you'll want to push your values into the data layer. I recommend something along the lines of the following:
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'uk-region': 'South-West' //As applicable
});
</script>
And then you'll need a couple of things in GTM in order to pick this up. First, create a new Data Layer Variable and populate the "Data Layer Variable Name" with the "uk-region" name I used above, or whatever else you want to identify it with. Give it a useful name like "uk-region" at the top.
In your Google Analytics page view tag then, you'll need to set up the custom dimension mapping. Click the box for "Enable overriding settings in this tag" and a dropdown will appear with "More Settings". Expand the "Custom Dimensions" and click the "+ Add Custom Dimension" button. Specify the number custom dimension you wish to populate under Index and in the value, we'll specify the variable we created with {{uk-region}}.
Test your container to ensure it's getting picked up as it should, then publish to commit the container to your website.
I am using the WordPress plugin Borlabs Cookie to manage Google Analytics. It delivers the appropriate JavaScript-code which transfers the data to Google if the user agrees. Therefore you have to enter the Tracking ID (usually the UA-number) within the properties of Borlabs Cookie.
The question is: how can I connect my website to more than one Google Analytics property? I need this to migrate to the new Google Analytics Version 4. They recommend using the old version parallel to the new one for a while.
If you manage your code by yourself you simply have to double some lines of code with the old UA- and the new G-number like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-…"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-…"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-…', { 'anonymize_ip': true });
gtag('config', 'G-…', { 'anonymize_ip': true });
</script>
Is there a way to do the same with the Borlabs Cookie plugin? Adding another cookie is not the right way, I guess, because the same cookie is used for both properties.
Documentation page about 'How to tag for both Universal Analytics and Google Analytics 4 properties' (if you are already using gtag) said:
If you already use gtag.js for your UA property, you can either
add one line to your existing gtag.js page snippet as explained below,
or
use Connected Site Tags to add your GA4 Measurement ID without
changing the code on your page.
To change your code, add the following config command to your existing
gtag.js snippet:
gtag('config', 'G-XXXXXXXXXX');
where G-XXXXXXXXXX is the Measurement ID for a GA4 data stream.
For example, here is the complete gtag.js snippet you would use to
collect data for a UA property with an ID of 'UA-XXXXXX-13' and a GA4
data stream ID of 'G-XXXXXXXXXX'.
Example:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-13"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX-13');
gtag('config', 'G-XXXXXXXXXX');
</script>
So you don't need to add this part:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-…"></script>
About you question, you don't need to manage IP anonymization in GA4 since, in GA4 properties, IP addresses are automatically anonymized: https://developers.google.com/analytics/devguides/collection/ga4/basic-tag?technology=gtagjs#ip_anonymization
With the WordPress plugin Borlabs Cookie, tracking to multiple properties of Google Analytics is quite easy (and I wonder why I did not find the solution by myself but had to ask the Borlabs support).
Anyway, go to the plugin settings on the Cookies tab and edit the Google Analytics cookie. Within the HTML & JavaScript section substitute the Opt-in Code with something like:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXX-X');
gtag('config', 'G-XXXXXXXXXX');
</script>
For the details of this code look at Michele Pisani's answer.
I would like to track beforeunload event on SPA website, as I want to send data via GTM to datalayer. I want to track video watch time (HTML5 player) and send the data right before a user leaves the current page either to another one on the same website or completely different.
Is there a way to have this done via GTM custom HTML?
Assuming that you have a way to capture the video time in a variable, you can send that information to Google Analytics using an event listener for the beforeunload event. I’m doing that on one of my webpages to get an idea of how long users have the page open.
Here’s the code I’m using:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
// Disable tracking if the opt-out cookie exists
if (document.cookie.indexOf("ga-disable-GA_MEASUREMENT_ID=true") > -1) {
window["ga-disable-GA_MEASUREMENT_ID"] = true;
}
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag("js", new Date());
gtag("config", "GA_MEASUREMENT_ID", { "anonymize_ip": true, "cookie_flags": "SameSite=None;Secure" });
</script>
<script>
window.addEventListener("beforeunload", function (e) {
gtag('event', 'Time_Spent', {
'event_category': 'Time_on_page',
'event_label': e.timeStamp.toString,
'value': 1,
'transport_type': 'beacon'
});
delete e.returnValue;
});
</script>
The first section is in the head and the second section is at the end of the body.
I put the event.timeStamp value in the event_label; you could put your video time, formatted however you like into that field as well.
I’m not sure I need the optional value field, but I have it.
The transport_type beacon tells Google to transmit the data asynchronously when the User Agent has an opportunity to do so, without delaying unload or the next navigation.
To see how long people have been spending with my page open, I go to:
Google Analytics -> Behavior -> Events -> Overview
I click on the event category (Time_on_page in my case), and then click on Event Label to get a listing of all of the values.
I'm trying to migrate from Google old Analytics to Universal Analytics. I have code below and from universal - developers guide I couldn't find solution.
Inside my analytics code I had these lines. Part 1:
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-123456-1']);
_gaq.push(['_trackPageview','/tools/one');
_gaq.push(['_setCustomVar', 1, 'name', 'michael', 1]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
Also inside my some other script I have this code snippet. Part 2:
if (typeof _gaq !== "undefined" && _gaq !== null) {
_gaq.push(['_trackPageview', '/dosomework']);
}
How can I convert "gaq.push"s inside 2 parts and add to my universal analytics code ?
Unfortunately, migrating to analytics.js isn't as simple as just changing the code syntax.
Firstly you should know that Universal Analytics is currently in open beta phase. Currently google does not offer a way to "upgrade" or "convert" an existing web property to take advantage of universal analytics (analytics.js) tracking. You will need to setup a new web property (or new account) and check the "universal analytics" radio button.
Google currently recommends setting up analytics.js code in addition to your current ga.js code. Once you are happy that the base data is lining up between the two, you can either keep both versions on your page or decide on a date to remove the old ga.js code. The historical data in your old profile will still be there but it won't be tied to the new web property. I don't know if Google will eventually offer an "upgrade" or "convert" feature for existing ga.js based web properties; so far I have not seen any news on if/when they will offer this.
Moving on to Universal Analytics (analytics.js) code ...
Universal Analytics does not use the .push syntax. Instead, it has a function ga() that requires arguments to be passed to it. The first argument is the "command" argument, and the additional arguments are for passing additional settings, values, etc. based on the command.
setting the GA account is now done with the 'create' command
tracking a page view is now done with with the 'send' command
setting a custom variable* is now done as either an argument in the 'send' command (for only popping it on that 'send' command), or with the 'set' command (for setting it to be popped with all 'send' commands executed on the page)..but about this...
Custom Variables no longer exist
Well they do, but how they are implemented is different. Universal Analytics offers custom dimensions and metrics. Custom Variables are mostly what Custom Dimensions now are. The main difference is that setting things like the name and scope of the variable is now done within the GA interface instead of as an argument to the function. Also, you get more than 5 to work with now. To set this up, click on the web property you created, and you should see tabs
Profiles Tracking ..Custom Definitions
Click on the Custom Definitions tab to setup your custom dimensions and metrics there.
Now on to the page code
This is what the "equivalent" of the code you posted would look like:
First snippet:
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-123456-1');
ga('send', 'pageview', '/tools/one');
ga('set', 'dimension1', 'michael');
</script>
<!-- End Google Analytics -->
note: as mentioned above, you would set the name and scope of the dimension within the interface. 'dimension1' should be changed to whatever dimension# you created.
Second snippet:
if (typeof ga == 'function') {
ga('send', 'pageview', '/dosomework');
}
sidenote: Not really related to your question, but in your code you first send a page view and then set the custom variable. In case you didn't know, if you set the custom variable (_setCustomVar) after the page view (_trackPageview), your custom variable will not be sent with that page view (the '/tools/one' hit). It will (assuming your 2nd snippet gets popped later on) be sent along with that 2nd page view (the '/dosomework' one). Not sure why you would have two separate pageviews or if you knew about that order of operations thing but if you're happy with how things currently look in the reports..well the analytics.js version will behave the same way.