You need to add tracking code to your site for Google Analytics 4 to work. Google gives simple instructions on where to add it. But as in the past, this confuses even experts…
Where to place the GA4 tracking code?
You need to place the tracking code for Google Analytics 4 right after the HTML <head> element. That sounds easy-peasy, but it is confusing.
Let’s look at the instructions from Google itself on where to add the Google Analytics script:
If you dissect a web page, it becomes clear why even experienced web designers and developers can blunder.
Simplified HTML code looks as follows:
Simple.
So why are there still developers and designers that misplace the GA tracking code?
#1 The HTML head element is not the head tag
Google clearly mentions the <head> element. From a web developer’s point of view, there is a difference between an HTML element and an HTML tag.
Tags are embedded between “<” and ”>”.
A layout element starts and ends with a tag. In this case: <head> and </head>.
If you want to get a better understanding of the technical specifications, this is an excellent resource.
#2 The header is not the head element
The head element is not the same as the HTML header layout element. The head can contain all sorts of metadata, styling elements and scripts. This element is not visible on the front end of a web page.
HTML is a monster. Chop off the head and the header remains.
The header, on the other hand, contains code to display the upper section of a web page. This can, for instance, be a picture, text, a logo, etc.
#3 The body element follows the head layout element
Immediately after the head element, HTML code contains the body element. Again, this starts and ends with a tag: <body> and </body>.
If you misinterpret the instructions of Google, your tracking code will mess up things.
On the front-end, you won’t see that something is wrong. But in Google Analytics, you may not receive data.
Now you know where to place the Google tag script, let’s answer another question…
Where can you find the GA4 tracking code?
You can find the GA4 tracking code in the Data Streams of your Admin section.
Click somewhere in the field with the globe icon. This is your web stream, as opposed to streams for Android or iOS apps.
Scroll down the page to Google Tag and click on View tag instructions.
On the next screen, click Install Manually. Here you can find your GA tracking code. To copy it, click on the copy/paste icon right above it.
That’s it.
You have successfully found your GA4 tracking code.
And you know where to place it.
One question remains unsolved…
Why would you even care about what your GA tracking code looks like?
Implementing the code in the wrong place can result in no data collection. It is also possible that the tracking code contains errors.
If you know how it is supposed to look, you can easily detect if your site contains the right tracking code on the right spot. This goes one step further than checking if a site has Google Analytics installed or not.
There are several ways to add the GA4 tracking code to your site. In contrast to Universal Analytics, on its support pages Google no longer explicitly distinguishes the type of sites any more.
However, that doesn’t mean that the advice from the past has become completely obsolete.
Static sites and GA tracking code
In the past, static sites were built with HTML. Nowadays, there are services that convert dynamic sites into HTML sites. These sites load faster and add an extra level of security.
Especially with manually built HTML sites, it is easy to misplace your GA tracking code, because you need to add it on every page of your site.
A copy paste job is mind numbing and before you know, the 3 above-mentioned reasons undo your work.
Dynamic sites and GA tracking code
There used to be a trend to self host your GA analytics code. Copy the whole thing, paste it in a file, upload it to your web server and then insert it in your website code.
Although this can still be useful to embed the tagging script, it is a horrible idea to do this for the original tracking script.
Why?
When you have your tracking code, click on the link that starts with https://www.googletagmanager.com/gtag/js?
This will show the original JavaScript tracking code that is behind the simple lines you are inserting in your website code.
I don’t know about you, but my head starts spinning.
Change one character in that thing and I wish you the best luck with finding out why Google Analytics is not working. (We can later on add a link here to the post about why GA is not working)
This has been a topic of wild discussions in the past. And I get it. Loading scripts from external sources can slow down your site.
But copying the GA code to your site and then inserting it into your web pages? That’s a terrible idea.
Adding the GA tracking code with a plugin
Besides adding the code manually to your site, you can also use
- Settings of a website platform, such as Squarespace
- Website builder plugins
- Cookie notice providers that load the GA4 tracking code script only after a user has given consent.
The best solutions are tested and being actively maintained. But here too, a mistake by a programmer can do your data harm.
In summary: If you know what your GA tracking code should look like and where it needs to be placed in your site, you are one step closer to a successful data-driven business.
If you prefer sprinting over strolling, you may want to check out our GA4 mastery program and put your business or organization on the highway to success.