What is the gtag.js equivalent of the following analytics.js Google Optimize integration:
ga('set', 'expId', '$experimentId'); // The id of the experiment the user has been exposed to.
ga('set', 'expVar', '$chosenVariation'); // The index of the variation shown to the user.
I could not find anything documented in Google site.
Some places I looked:
https://developers.google.com/analytics/devguides/collection/gtagjs/migration
https://developers.google.com/analytics/devguides/collection/analyticsjs/experiments
Update - 08/23/2018 - using the response from #AnkDasCo
Further, my Optimize experiment is configured as SERVER_SIDE which means I do not want Optimize to assign the experiment and variant to the site. Instead, that's something I would like to control from my end. I have injected the following in the page:
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('set', {'expId': 'xxxxxxxxxxxxxxxxxxxxxx'});
gtag('set', {'expVar':'1'}); // set to variant id 1
gtag('config', 'UA-xxxxxxxx-y', { 'optimize_id': 'GTM-xxxxxxx'});
However, the variant assignment is still being controlled by Optimize and not by the script above. In the above example I am asking it to be set to variant id 1, but it's not happening.
Even setting the experiment/variant in a single statement as this does not work either:
gtag('set', {'exp': 'xxxxxxxxxxxxxxxxxxxxxx.1'});
Any thought what I might be missing. Any help will be greatly appreciated.
You can still set values that persist across gtag calls on the page.
gtag('set', {'expId': 'xxxxxxxxxxxxxxxxxxxxxx'});
gtag('set', {'expVar':'1'});
This analytics.js way works:
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-xxxxxxxx-y', 'auto');
ga('set', 'exp', 'xxxxxxxxxxxxxxxxx.1');
ga('require', 'GTM-xxxxxx');
ga('send', 'pageview');
</script>
Note that since the experiment is set as SERVER_SIDE, the effect of setting the experiment and the variant needs to be handled by the server and Optimize plays no role in that. If you do server side, you do it all yourself - you can create an experiment for "page A" and then send experiment hits from "page B" and things will still work fine.
Related
In the past I used a Google Analytics Custom Report to track the amount of pageviews per author and number of pageviews per forum topic category which I had setup like this in Google Analytics (analytics.js):
The code I used to push this data to Google Analytics was simple ga('set', 'dimension1', 'Name of Author');
I've updated my Google Analytics javascript snippet to gtag but I can't seem to push the data in the same way.
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxx',
{ 'anonymize_ip': true,
'forceSSL': true,
'custom_map': {'dimension1': 'author', 'dimension4': 'forum_name'}
});
gtag('event', 'author', {'event_category': 'Writers', 'event_label': 'Author Name'});
gtag('event', 'forum_name', {'event_category': 'Forum category', 'event_label': 'Forum Category name'});
</script>
At the moment I am getting the data as an event in Google Analytics. But the way the code works right now makes it much harder to analyse the data. In the past I could click on an authors name and see which pages got the most pageviews and for the forum category it was the same. I could dig in and see per category the urls that brought in the most visitors.
I think the difference between the two code snippets is that ga 'set' was sent as a virtual pageview where the net gtag 'event' is an event and not an virtual pageview. The question now is how to setup a similar custom report as I has previously or how to update the code snippet to get a similar result as in the past?
Update
This is the old version of Google Analytics and the code I've been using:
<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-XXXXX', 'auto');
ga('set', 'dimension1', 'Author Name');
ga('set', 'dimension4', 'Forum name');
ga('require', 'ec');
ga('set', 'anonymizeIp', true);
ga('set', 'forceSSL', true);
ga('send', 'pageview');
</script>
After a lot of testing I finally found the answer to my own question. The trick seems to be to add the dimensions in the config so they are send as a pageview.
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxx',
{ 'anonymize_ip': true,
'forceSSL': true,
'dimension1': 'Author Name', 'dimension4': 'Forum category'
});
</script>
Based on your analytics.js code, the set command sets the custom dimensions and their given value so that they persist and send with all/any hits within the page. The example code snippet that was being used for analytics.js, is sending the cd's along with the default pageview.
Try instead
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('set', {'dimension1': 'Author Name', 'dimension4': 'Forum name'});
gtag('config', 'UA-xxxxx',
{ 'anonymize_ip': true,
'forceSSL': true
});
</script>
If you have any onclick or other events being sent within the page, or virtual pageviews being sent within the page, it will also send the above custom dimensions and their set values with those too.
After doing some testing custom_map doesnt appear to be necessary (however it may come into play with the new app+web properties and possibly where the gtag.js snippet is used for multiple products and custom parameters need to be mapped).
Not sure, however I found custom_map somewhat strange in it's behaviour when i did some testing with it.
This is turning out to be much more challenging than I expected.
There is a Google Analytics Integration extension:
https://www.mediawiki.org/wiki/Extension:Google_Analytics_Integration
But for the Global Site Tag version of Google Analytics, it refers you to the HeadScript extension:
https://www.mediawiki.org/wiki/Extension:HeadScript
The problem here is the download link (http://downloads.jingames.net/mediawiki/HeadScript.zip) looks a bit dodgy and the documentation mentions a bug.
I've also reviewed this discussion on the Mediawiki site:
How can I add the code into the <head>?
But it's a lot of telling and not much showing.
The Google Analytics snippet looks like this:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TRACKING_ID');
</script>
I would prefer to insert it by updating a setting in LocalSettings.php config file.
Thanks!
I found a way to insert the tag into LocalSettings.php using the $wgHooks setting as demonstrated here:
https://www.mediawiki.org/wiki/Topic:Uxv32na6lh6wd5rf
Just replace TRACKING_ID (in both spots) with your Analytics tracking ID and paste this at the bottom of LocalSettings.php:
$wgHooks['BeforePageDisplay'][] = function( OutputPage &$out, Skin &$skin ) {
$code = <<<HTML
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TRACKING_ID');
</script>
HTML;
$out->addHeadItem( 'gtag-insert', $code );
return true;
};
This is a very old post but for anyone else who might happen upon this I have found a possible solution by combining other examples.
I have used Tom's code as an example and replace the corresponding variables within the google analytics extension.
Change the hook in googleAnalytics.hooks.php line 9.
Old:
...
public static function onSkinAfterBottomScripts( Skin $skin, &$text = '' ) {
...
New:
...
public static function onBeforePageDisplay( OutputPage &$out, Skin $skin ) {
...
Then replace all mentions of $text with $code, there are 5 of them on lines, 14, 24, 31, 54, and 59.
Then at the end of the parser function above the return true; insert the following code on line 61.
$out->addHeadItem( 'gtag-insert', $code );
Finally go into googleAnalytics.php line 52 (Bottom of file) and replace the hook call to use the new hook.
Old:
...
$wgHooks['SkinAfterBottomScripts'][] = 'GoogleAnalyticsHooks::onSkinAfterBottomScripts';
...
New:
...
$wgHooks['BeforePageDisplay'][] = 'GoogleAnalyticsHooks::onBeforePageDisplay';
...
If everything worked out you will see the googleAnalytics extension script in the head element as opposed to within the body. I am going to try and contact the creator/contributors of the extension and see if it can be change or ask why its not this way already.
There is a google analytics extension.
Alternatively, the script can be added to Mediawiki:Common.js using document.write to link to the url and your site's UA-xxxxxx-x:
// GOOGLE ANALYTICS (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-xxxxxx-x', 'auto'); ga('send', 'pageview');
// END GOOGLE ANALYTICS
I want to convert my current Google Analytics tracking code to use the newer gtag.js (Global Site Tag) What syntax is needed replace the below values with values that will work with the newer Global Site Tag?
My current code:
ga('create', 'UA-XXXXXXXX-1', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['subdomain.example.com'] );
What would I convert the above to, to make it work with the below?
Revised gtag code:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
// what to add here?
gtag('config', 'UA-XXXXXXXXX-1');
</script>
I looked through documentation, but don't have access to Google Tag Manager which seems like it may help with this, but hoping there is a way to just add the necessary code snippets?
You should be able to find more information here https://developers.google.com/analytics/devguides/collection/gtagjs/cross-domain, but to answer your question, it looks like you should have:
gtag('config', 'UA-XXXXXXXXX-1', {
'linker': {
'domains': ['subdomain.example.com']
}
});
for my static HTML webside I embedded this recommended script code to every page of the side.
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-96597161-1', 'auto');
ga('send', 'pageview');
ga('set', 'userId', {{USERID}});
The question is:
how to format my known Google analytics userId into this place {{USERID}}?
Is it With brackets?, with quotes?
Thanks for your help.
The analytics.js fields reference lists UserID as format type "text", which means you pass it in like you would any other string value in Javascript (i.e. in as quoted string).
In fact the same page has examples:
// Set the user ID when creating the tracker.
ga('create', 'UA-XXXX-Y', {'userId': 'as8eknlll'});
// Alternatively, you may set the user ID via the `set` method.
ga('set', 'userId', 'as8eknlll');
this is my new analytics code:
<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-000000-0', 'mysite.com');
ga('send', 'pageview');
</script>
I found in the analytics api, that I set a custom var like:
_gaq.push(['_setCustomVar',
1, // This custom var is set to slot #1. Required parameter.
'Items Removed', // The name acts as a kind of category for the user activity. Required parameter.
'Yes', // This value of the custom variable. Required parameter.
2 // Sets the scope to session-level. Optional parameter.
]);
but the variable "_gaq" is not defiend, and where do I place this code?
my analytics is just after the tag
Universal Analytics doesn't have the .push it has a ga() function.
Also there are no custom variables in Universal Analytics. In Universal Analytics we get custom dimensions and metrics.
Your custom variables are pretty much the same as the new custom dimensions.
The main difference is that they are set up in the GA interface instead of via arguments to the old .push function.
ga('set', 'dimension1', 'Yes');
Set up or edit custom dimensions & metrics