I have started to develop my first Typo3-Website.
To track interactions I have included Google Analytics with the following-code in the Setup-Section of the main-template:
page.headerData.9000 = TEXT
page.headerData.9000.value(
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-04738GHDL1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-04738GHDL1', { 'anonymize_ip': true });
</script>
)
With Google Tag Manager-plugin I am able to verify, that a global-site-tag is sent to my G-04738GHDL1 tag
But I am not able to see anything in Google Analytics. Account and property is selected correctly.
Any ideas?
You don't need to anonymize the IP, it is a parameter not foreseen in GA4 since anonymization is always active.
So try replacing this:
gtag('config', 'G-04738GHDL1', { 'anonymize_ip': true });
with this:
gtag('config', 'G-04738GHDL1');
If the TypoScript Object page.headerData.9000 is not overwritten somewhere else in your TypoScript it should work fine. You can check the TypoScript Object Browser in the Template module for that.
Set up correctly, the code should be output in your site's HTML.
From there I would suggest having a look at your browser's inspector tools, checking the console tab for any errors (e.g. regarding JavaScript errors or any CSP violations) and the network tab whether any request towards google are sent.
If you aren't familiar with that, the Google Chrome browser extension Tag Assistant is quite helpful. ;)
Related
I've been working on a migration from Universal Analytics to Google Analytics 4, and am considering switching to Google Tag Manager at the same time. I'm trying to make sure the initial code on the site will work correctly.
Here's what we previously used with Analytics:
<script async src="https://www.googletagmanager.com/gtag/js?id=[analytics id]"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag( 'js', new Date() );
gtag( 'config', '[analytics id]', {"optimize_id":"[optimize id]"} );
gtag( 'config', '[ads id]' ); // this is a different ID than the Analytics one
</script>
The Google Tag Manager looks like this:
<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=
'//www.googletagmanager.com/gtm.'+'js?id='+i+dl+'>m_auth=[environment auth code]>m_preview=[environment id]>m_cookies_win=x';f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','[tag manager id]');
</script>
On the Analytics code, I'm able to supply an ID for (universal) Analytics and Google Ads by using the config method. On the new Tag Manager code, there appears to only be one Google Tag Manager ID.
I'm aware that I can add things like Google Analytics 4, Universal Analytics, Google Ads Remarketing, Google Ads Conversion, etc. as distinct Tags with their own ids within Google Tag Manager. But is there an equivalent to this initial config method? Or is that something that Tag Manager takes care of on its own?
GTM takes care of it. Every tag type will load its respective library if it's not yet loaded (it's best to let GTM load its stuff as needed), then execute the config method if it's applicable to the library/tag type and fire events as needed.
GTM will also define dataLayer if it's not defined. It will also hijack the dataLayer from gtag, so no need defining the gtag() function. Basically, pretty much anything you can do with gtag in code is better done through GTM, so if you do tracking properly through GTM, you don't even touch gtag.
dataLayer, in GTM world, becomes a tool of communication between front-end and GTM's logic rather than just direct mindless proxy to GA endpoints, as gtag() offers it.
Useful for GA4 double tracking into different measurement ids, Killan Walsh in Measure slack just uncovered it. You can supply comma-separated measurement ids in the GA4 config tag like so:
Just return comma-separated measurement ids in a string from that var. But this seems like an undocumented, unfinished feature, so use with caution.
Hi i'm new to vaadin and i have a problem implementing google analytics with vaadin.
I have searched a lot in forums and I have not been able to find the solution.
I would like someone with experience in this process to guide me to connect vaadin with google analytics.
I have already created a Google Analytics account and it has generated a JS for me:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Y3YPVNQBCZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Y3YPVNQBCZ');
</script>
My problem now is that in the google analytics Tracker plugin (https://vaadin.com/directory/component/googleanalyticstracker/samples) it does not specify how to add the JS code and I don't know what else to look for, please help !!
I need a little guide because I don't know where to start working
(SOLVED)
There is a component you can use:
https://vaadin.com/directory/component/googleanalyticstracker/samples
You can use an annotation
https://github.com/samie/vaadin-ga-tracker/blob/master/demo/src/main/java/org/vaadin/googleanalytics/tracking/demo/MainLayout.java
Like:
#EnableGoogleAnalytics(value = "G-Y3YPVNQBCZ")
I got an email from Google requesting a change to my AdWords conversion tracking setup. They want me to add new library "gtag.js" and some calls to a "gtag" function.
This seems pretty easy. In my research, though, I've read some things that give me pause, e.g.
"If you have Universal Analytics code on-page and are using any sort of customization to send events, virtual pageviews or other unique data to Analytics, you will likely not want to switch to gtag.js. That would mean updating all on-page customized code to the new gtag syntax. Not sure if you have custom code? Any use of custom dimensions, custom metrics, or events is likely relying on your current implantation of Universal Analytics."
(Source: https://www.bounteous.com/insights/2018/01/30/guide-adwords-conversion-tracking-2018/)
I definitely have Universal Analytics calls in place; I'm not 100% sure what they mean by "on-page" (where else would they be?) but I suspect my stuff qualifies. As for "customization," I do make use of the numbered dimensions (e.g. ga('set', 'dimension4', creditStatusCode) )
Does this really mean I should avoid gtag.js, though? I'm thinking not, but I'd also like to understand what that Bounteous.com post means.
One hunch I came up with is that the post is talking about sites that have actually made their own version of the UA script (i.e. modified analytics.js- I have not done this). Is that it?
You could use Global Site Tag for Google Ads conversion tracking without changing your current GA tracking setup at this point in time (though you would want to look at updating, once you have had a chance to check what needs to be ported over from Universal syntax to Global Site Tag).
If you were to only use gtag.js for google ads it would be similar to the following:
<!-- Global Site Tag (gtag.js) - Google AdWords: GOOGLE_CONVERSION_ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-GOOGLE_CONVERSION_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-GOOGLE_CONVERSION_ID');
</script>
If you were to combine the GA and Google Ads tracking the snippet would be along the following line
<script async src="https://www.googletagmanager.com/gtag/js?id=GA-PROPERTY_ID">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA-PROPERTY_ID');
gtag('config', 'AW-GOOGLE_CONVERSION_ID');
</script>
Custom dimensions would need to be mapped in the GA config command
https://developers.google.com/analytics/devguides/collection/gtagjs/custom-dims-mets
You would also need to update any event tracking to the gtag.js syntax, and same would apply to things like ecommerce tracking and so forth.
There is an analytics.js to gtag.js migration guide available
https://developers.google.com/analytics/devguides/collection/gtagjs/migration
I've just started using GA (after I took a long vacation from it). It seems I'm missing something obvious/simple here.
I don't understand why in my analytics account / admin / property / tracking code they tell me to put this into <header> :
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-my-tracking-code-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-blahblah-1');
</script>
While in their docs they tell me to use this:
<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
Src: https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_javascript_tracking_snippet
These are completely different scripts o.O Additionally, the examples here https://developers.google.com/analytics/devguides/collection/analyticsjs/how-analyticsjs-works just don't work with the first snippet, because ga is undefined.
Is this because they have different API versions? Then... why isn't this explained somewhere o.O
I'm asking because I get
unreachable code after return statement
In the console, on this javascript: https://www.googletagmanager.com/gtag/js?id=UA-my-tracking-code-1:formatted
I also found this answer:
Why is tracking code generated for my site different than what is in the documentation?
But it's from 2015, and the js snippets are again different, so I guess I can't use it as a reference.
All of this is just weird, this is why there are so many "o.O" in my question, please forgive me :)
This is definitely slightly confusing, but you're seeing the difference between analytics.js and gtag.js. You can learn more about the differences between them and/or migrating to gtag.js here.
Hope this helps!
We try to set up google experiments to work with our backend setup and found that there is API for letting GA know what variation we have selected to show for the user through function:
cxApi.setChosenVariation(chosenVariation, opt_experimentId);
When I visit official docs: https://developers.google.com/analytics/devguides/collection/gajs/experiments
it says that:
"ga.js is a legacy library. If you are starting a new implementation we recommend you use the latest version of this library, analytics.js. For exisiting implementations, learn how to migrate from ga.js to analytics.js."
We do use analytics.js.
Does it mean that all the functions present in ga.js are already in analytics.js and we do not need to worry about using this function?
You can try the browser-only Implementation as explained at https://developers.google.com/analytics/devguides/collection/analyticsjs/experiments. Instead of ga.js or analytics.js, you can try gtag.js. Visit https://developers.google.com/analytics/devguides/collection/gtagjs/migration to learn how to migrate from analytics.js to gtag.js. I am sharing the code below of how I implemented my experiment. Remember to create the experiment in Google Analytics, you will find it in the BEHAVIOR > Experiments section. In the code below, you will need to use your own Experiment ID.
<head>
.......................................
.......................................
.......................................
<!-- Load the Content Experiment JavaScript API client for the experiment -->
<script src="//www.google-analytics.com/cx/api.js?experiment=MY_EXPERIMENT_ID"></script>
<script>
// Ask Google Analytics which variation to show the user.
var chosenVariation = cxApi.chooseVariation();
// Define JavaScript for each page variation of this experiment.
// Wait for the DOM to load, then execute the view for the chosen variation.
$(document).ready(function(){
switch (chosenVariation) {
case 0:
// Original: Do nothing. This will render the default HTML.
break;
case 1:
//document.getElementsByClassName('logo_tagline')[0].value = 'I love programming';
$(".logo_tagline:first").text("I love programming");
break;
case 2:
//document.getElementsByClassName('logo_tagline')[0].value = 'Programming is my passion';
$(".logo_tagline:first").text("Programming is my passion");
break;
case 3:
//document.getElementsByClassName('logo_tagline')[0].value = 'I enjoy writing code';
$(".logo_tagline:first").text("I enjoy writing code");
}
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXXXXXX-X');
</script>
</head>