Ok, I hope that by now it is clear to you that from now on, if you create a new Google Analytics property it will be by default from the new GA4 version, more beautiful, with new interface, new data model... and also a new tag template in Google Tag Manager.
But that doesn't mean you can't create Universal Analytics (AKA GA3) properties. If you want to know how to do it, I recommend you to check this article I wrote recently.
But that's not what we're here for today. Today we are going to see how to install our new GA4 property on our website. And we are going to use Google Tag Manager for this, basically because it is one of the best options for this, and not only thinking about the current moment, but also thinking about the future, because it will simplify our life when we want to implement more advanced measurements.
A quick summary of the steps we will need to take:
- Create a Google Analytics property 4.
- Create and configure a web data stream,
- Copy the measurement ID provided by GA4.
- Create a configuration tag in Tag Manager.
- Paste the ID we just copied.
- Configure the tag to be activated on all pages of the website.
- Test the label by activating the preview mode.
- Publish Google Tag Manager container changes.
... let's get down to work!!!
Table of contents
What if I already have Universal Analytics?
What do I do, do I remove it, do I leave it, do I use both?
You can read this other article and make your decision from there. But come on, my recommendation, if you read this article between May and December 2021 is that you implement both measurement tools while waiting for GA4 to mature. If you read it at the beginning of 2022, it may no longer be worth installing Universal Analytics, time to time.
And now we are going to implement Google Analytics 4 with Google Tag Manager.
Create a GA4 property and a data flow
First things first, we need a new GA4 property.
I'm not going to use the option to upgrade to GA4 which would appear if you already have a Universal property. So what you'll need to do is go to the Manage section within your Google Analytics account and in the property column click on the "Create Property" button.
Once you have done this, you will have to fill in the details of the new property. First of all, the name with which you want to identify it, I usually name it with the name of the web and then GA4, that is in my case carlosmdh - GA4, but you can name it as you prefer.
You must also configure the country in which the website is located, the time zone you want to use for reporting and the currency in which you operate.
After doing this and clicking next, Google Analytics asks you a couple of questions that you can fill in or not and after this, you can click on Create your new GA4 property.
A note. in this step you can also create a Universal Analytics property, but as it is not the subject of this article, I will not go into it. If you want to know how, you can see it in this other article.
Once the new GA4 property has been created, it is time to create the data flow, i.e. the source from which the data will be sent to the Google Analytics 4 property. In this new version it is possible to configure more than one data source, both web and IOS or android app, one or several in all cases. The reason? to be able to track multi-device and/or multi-site user behaviour from a single place. This way, for example, you can set up two websites, an Android app and an iOS app. Anyway, as I said before, today I'm going to focus on a web data flow.
Once you have chosen the web data flow, the first thing to do is to write the url of the website where you are going to implement the property (without the protocol, which is already defined as https://, although you can change it to http://, but you won't have to do that, will you? and the name of the website.
When you have done that, you will see that there is a new option, activated by default, which is called "Enhanced Measurement" and that you can deactivate it completely or by events. What is the Enhanced Measurement? You can see it in more detail in this article but, basically, they are a set of pre-configured events that can help you to get data in reports without needing to write an additional line of code in your ga.js script or add new tags in your Google Tag Manager container.
As mentioned above, Enhanced Measurement is enabled by default and includes the following events:
- Page views. The name of the event is page_view.
- Scroll. The name of the event is scroll.
- Outbound clicks. The name of the event is click and carries an additional outbound parameter with the value set to true.
- Search the site. The name of the event is view_search_results.
- Interaction with videos. In this case there are three events: video_start, video_progress and video_complete.
- File downloads. The name of the event is file_downloads.
You can individually enable or disable these page_view events by clicking on the wheel in the bottom right corner, except for the page_view event. Enhanced Measurement by clicking on the wheel in the bottom right corner, except for the page_view event.
Once you have finished configuring the flow and choosing which events of the Enhanced Measurement events, you can click on the create flow button.
Install Google Analytics 4 with Google Tag Manager
Once we create the web flow, we will have access to, among many other things, the measurement ID. In GA4 this ID starts with G- and then has 10 alphanumeric characters and is unique for each Google Analytics 4 property. It is the equivalent of the Universal identifier that started with UA.
From here you can also configure your Google Analytics 4 property.
As you can see in the image below, the tracking ID is in the top, right corner. Copy it, you will need it to set up the Google Tag Manager tag.
Finally, if you ever need to access this screen again, you can do so by going to Manage > data stream and choosing the web data stream you wish to view.
Once you have the tracking ID, it's time to go to Google Tag Manager to create and configure the tag. To do this go to Tags > New and choose "Google Analytics: GA4 Settings".
In the template tag configuration you have to paste the tracking ID of your property, the one you copied earlier in the GA4 web data stream interface and, in principle, leave the field "Send a pageview event when this configuration is loaded" checked. This will ensure that every time a page is visited on your website, the automatic tracking we have configured via Enhanced Measurement will be performed.
Normally this field is always checked. But there may be cases, such as single-page websites, where you want to disable it and create an extra tag. I'll cover this in a future article, but if you can't wait and you're good at English, you can see how to do it in this article by Ken Williams.
To finalise the creation of the tag two obvious steps: As a trigger select "All pages" and then give the tag a name. For example, you can put GA4 - Page View or GA4 - Page View [Tracking ID] replacing the latter by the ID. In the case of the example the tag would look like this GA4 - Page View [G-JV4SC5B3V9].
Time to test the implementation
As Rosendo would say "This is finished or almost finished". We still have to test that everything works correctly, if you have followed the instructions. But it is not bad practice to follow the following steps to check it, especially for future implementations that may be a little more complex.
We are going to look at two things: whether the tag you have configured is executed when it is supposed to be executed and whether the events to be measured are actually measured. For this, you have two tools: Google Tag Manager's Preview Mode and the DebugView section of Google Analytics 4.
Once you have saved the GA4 tag - Page View [Tracking ID], in Google Tag Manager you have to activate the preview mode by clicking on the "Preview" button in the top right corner. This will open a new browser window to activate the connection to your website and, once connected, another window with your website in preview mode.
If the tag appears in the "Tags Fired" section, we have configured it correctly.
Well, we can see that the tag is activated, now we have to see if it works correctly. To do this we go to the Google Analytics interface and in the bottom corner we will see a new section called "DebugView".
By default, if you only enable DebugView mode, you won't see anything. You will need to enable GA4 debug mode. The easiest way to do this is to install the Chrome GA Debug extension and enable it. From there, you will be able to start seeing events in DebugView.
One detail, these events do not appear immediately, sometimes it can take up to a couple of minutes for some of them to show up in DebugView, so be patient.
And another detail, make sure that the chosen debugging device is yours. If there are more visits to your website at that moment, you may be seeing interactions from another device.
Once everything is activated, you will see something like this
If you are browsing your website and everything is correct, great!!! you are ready to take the last step, publish your GA4 tag (remember that you were in preview mode).
Finishing. Publish changes to Google Tag Manager
You are now ready for the final step, publish the Google Analytics 4 tag and start collecting data.
In the Google Tag Manager interface, simply click on the "Submit" button located in the top right corner and fill in the data that you are asked to provide. Recommendation, add a name and description of the version so that you can later find out what you have done. This is like the comments in the snippets, they will always help you.
From here, you can collect data. Just one detail, remember to deactivate the preview mode.
Finally, if you want to do one last check, not necessary but good, you can go to GA4's real-time mode.
Google Analytics 4 Real-Time Reporting
The truth is that GA4's real-time reports are quite powerful. Apart from the map where you see where users are connected from, it gives you much more detailed information than what Universal used to offer.
One detail, you can track a user's activity on your website in real time. Obviously, unless you have activated the userID, it will be anonymous. In order to do this, you must click on the "Access user overview" button in the top right corner.
From this overview you can see the sequence of events that this user is triggering and the parameters of each event, in the same way as before in DebugView. You can also switch between the currently active users.
Overview of how to install Google Analytics 4
With this we will have GA4 installed using Google Tag Manager. I recommend that you use this method for its implementation because, as I said before, many subsequent measurement configurations will work better if you do them with this Google tagging tool. Also, from what I've seen so far, the creation of custom events in GA4 follows the same philosophy, and a very similar interface, to what I've been seeing in Google Tag Manager for some time now.
To summarise what we've talked about, I'll go back to the beginning. These are the steps you need to take to install Google Analytics 4 on your website with Google Tag Manager:
- Create a Google Analytics property 4.
- Create and configure a web data stream,
- Copy the measurement ID provided by GA4.
- Create a configuration tag in Tag Manager.
- Paste the ID we just copied.
- Configure the tag to be activated on all pages of the website.
- Test the label by activating the preview mode.
- Publish Google Tag Manager container changes.
Don't go yet
If you have any questions, you can visit this FAQ article. If the question is not there, you can leave it in the form. In this way, we can all enrich ourselves and learn more from each other.
I invite you to leave your impressions and/or doubts in the contact form and to suggest new topics that you would like me to cover in these tutorials. I will be happy to answer you by email and write in this blog.
