I want to add my Google Analytics Tracking ID- UA-XXXXXXXXX-X to my svelte app.
I found two ways of doing it.
First using Install the global site tag here
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
I think, I have to insert the above code in app.svelte. Am I right?
Second, using #beyonk/svelte-google-analytics
Installing package using
npm i --save-dev #beyonk/svelte-google-analytics
import { GoogleAnalytics } from '#beyonk/svelte-google-analytics'
<GoogleAnalytics properties={[ 'google property id A', ...'google property id X' ]} />
So where here am I suppose to add tracking ID? This is how it is mentioned in svelte documentation here
The first or the second method to use? This is confusing
You can add the global site tag within public/index.html. All of your Svelte will be injected into this file, so it will handle all of your pages.
EDIT: SvelteKit 1.0 has this base HTML file as app.html in in the root directory, but for whatever flavor of Svelte you're using, just make sure to add it to the HTML file that is hydrated with Svelte.
To insert multiline html into .svelte file:
{#html `<!-- google tag analytics goes here -->
<!-- ... -->
<!-- / -->`}
or you can insert code into app.html
Related
I have pasted the following code in the <head> section of all of my pages to connect to Google Analytics:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*********-*"></script>
<!-- Google Analytics -->
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-*********-*');
</script>
<!-- End Google Analytics -->
I have seen this article which talks about upgrading from Analytics.js to gtag.jas. I believe I am already using the new version so I believe I don't need to do any updates...
At the same time, I have created a Google Tag Manager account and created a Tag for my Google Analytics. The Tag Manager asks me to add the following code to my <head> and <body>
<!-- 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', 'G**-*******');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=G**-*******"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
Question
What is the difference between former and latter .js snippets? Do I need to include both of them on my page or either one would do the job?
At the moment, I am only using the former code and my Google analytics is working fine... I am just confuse what is the purpose of Tag Manager snippet and if I need to include it in my code?
The first one is the global site tag (gtag.js). It uses similar infrastructure, hence the reference to https://www.googletagmanager.com. However it works only with Google Tags, and you configure them in code, not in the Web UI. Good if you only have Analytics and Google Ads, and do not change your setup too often.
The second snippet is for the Google Tag Manager (GTM), a Google tool that offers a user interface to deploy and remove tracking tags via a web interface (usually they are bundled into a Javascript file that is then injected into the page). A little more overhead (both in page performance and in the learning curve required), but if your tracking requirements change often you can make all necessary changes without touching code or redeploying your site. GTM also offers a few different container types, e.g. for AMP pages (that do not run gtag), or server side tag management.
I was trying to install google analytics code into our google tag manager at first I installed the GTM and add a tag that I grabbed from tracking ID and after all that, it doesn't seem to appear an analytical dashboard on my account.
I was wondering how do I fix this error on Google tag assistant and also to have the dashboard appear. thank you so much.
page script
script below
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-171638252-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-171638252-1');
</script>
Errors shown as below image,
This double-tracked ID's behaviour could be caused if you have loaded your tracking code both inline on the website, and through GTM as well. Please make sure that you do not load your tracking both inline on the website, and through GTM. This is my initial guess so far, unfortunately, I could not give you a final solution to this issue without seeing the source code and domain.
I'm trying to setup ecommerce event configuration of Google Analytics App+Web for a website. Refer to the documentation here.
Because there is a lot of custom code for the ecommerce configuration, I cannot use the general GA App+Web webevent template, so instead I'm using a custom HTML-tag in this case.
As a first test, I tried to fire the following simple event:
<script>
gtag('event', 'blabla', {
'test_param1': 'test_value_1'
});
</script>
However, the event is not correctly sent to GA; instead, the following error in the console is returned:
Uncaught ReferenceError: gtag is not defined
To reproduce, see the following page: https://www.hema.nl/mooi-gezond/make-up/make-up-accessoires/toilettassen-1/toilettas-11830901.html
Additional information:
The GA App+Web base initialization is (successfully) done via GTM, via the GA App+Webconfiguration template tag.
I also configured a few other (simple non-ecommerce) GA App+Web events via GTM via the GA App+Web webevent template tag , and these events are sent to GA successfully.
Does anyone know what's going wrong, why the console error appears and why the event is not sent to GA?
Short answer
Additionally to the GTM GA App+Web tag, you need to add the following code to have gtag() defined:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
</script>
Long answer
According to the official documentation (https://developers.google.com/analytics/devguides/collection/ga4) this is the code you should include in your site:
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'MEASUREMENT_ID');
</script>
After inspecting a website with this tag I found GTM has injected that first line, which is enough to make analytics work. But it didn't add the other lines, some of which effectively defines the gtag global function as a "syntax sugar" for pushing things to the Analytics Data Layer.
Personally, I find this really strange, since using GTM is the most cannonical of adding Google Analytics to a website and it's by the same company.
The cause of the problem has been found. The problem seemed to be that gtag() does not work if the App+Web base setup is done with the GTM App+Web base template tag. Instead, an event should first be pushed to the GTM datalayer, and then the GTM App+Web event template should be used to send the event to Google Analytics.
Lots of thanks Gino (working at Merkle) for fixing the issue!
In my case Uncaught ReferenceError: gtag is not defined was caused by uBlock/adblock turned on.
I think it's worth testing if accepted answer doesn't work.
2022 Year answer:
For anyone struggling with using GA4 gtag and GTM (Google Tag Manager) simultaniously in your SPA/Angular/React app, you should do next:
don't use built-in GTM's "Google Analytics: GA4 Configuration" tag configuration
do use "Custom HTML" GTM tag with exactly that gtag JS code from your Google Analytics, i.e.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
After that you can use gtag in your code as you intended to do, all should work. No whole Firebase needed or something. Possibly you will need to have
gtag('config', 'GA_MEASUREMENT_ID', {
send_page_view: false
});
to disable automatic page_view tracking.
If you're using Google Tag Manager, the gtag function doesn't exist. Follow this guide to create custom events
Basically the code you use is
dataLayer.push({event: 'event_name'});
Then you setup a tag in GTM for GA4 event. Use the event name that you want to see in Google analytics. For the trigger, use custom event. Here, in the event name, use the name that you used in your code event_name
I found out that it was due to an AD Blocking Extensions added to my chrome
This may be a bit of a repeat of the accepted answer, but I wanted to confirm that it is indeed recommended by (some) Google documentation to manually add the following snippet of code to the <head> section of your website, just above your existing Tag Manager container snippet:
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
</script>
This is necessary if:
You are deploying your Analytics Tags using Google Tag Manager rather than the "Google Tag"
You wish to utilize the gtag() syntax to send Events to your GA4 Analytics property
Source: https://developers.google.com/analytics/devguides/migration/ecommerce/gtm-ga4-to-ua#4_enable_the_gtagjs_api
Can this one gtag code from GA be used for own tags, or does tag manager need another tag on each page?
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=xxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', xxx');
</script>
As per Google Analytics documentation:
To install the global site tag, copy the following code and paste it immediately after the tag on every page of your site. Replace GA_MEASUREMENT_ID with the ID of the Google Analytics property to which you want to send data. You need only one global snippet per page.
https://developers.google.com/analytics/devguides/collection/gtagjs#install_the_global_site_tag
I would like to know how and where to add this code to SharePoint and start tracking usage via Google Analytics. I've seen conflicting information about adding to the master page and . When I reupload to Master Pages and Page Layouts the changes are not shown. Can anyone help please?
<!-- Global site tag (gtag.js) - Google Analytics -->
<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);
</script>
If you are using the classic pages, you should be able to add your script to the head tag of your masterpage and publish.
If you're using the modern pages, you might be able to use the SPfx extensions.