How to Setup and Install Google Analytics 4 with Google Tag Manager

Updated: December 7th, 2022

If you want to measure the performance of your website, you must use some web analytics tool. Google Analytics 4 is one of them. It allows you to see things like the number of sessions, visitors, most popular traffic sources, etc.

To get started, first, you need to install GA4 on a website. And in this blog post, I will show you how to do that.

Here’s the process of how to install Google Analytics 4 with Google Tag Manager:

• Create a new GA4 property
• Create a data stream (in this blog post, I focused on the Web stream)
• Copy the Measurement ID
• Create a Google Analytics 4 Configuration tag
• Paste the Measurement ID and set the tag to fire on All Pages
• Preview/test the new tag
• Publish the changes in Google Tag Manager

As you can see, everything is pretty straightforward. So let’s dive in.

 

A Video Tutorial on How to install Google Analytics 4

If you prefer video content, I have recorded a quick tutorial on my Youtube channel. But if you want to learn some additional details, read this blog post as well.

You’ll learn the most if you do both: watch the video and read the tutorial.

 

If you are currently using the older version of Google Analytics

What if you already use the older version of Google Analytics on your website? Should you ditch it completely and replace it with Google Analytics 4? Should you use them both?

To answer that, I have published another blog post (and a video tutorial) on this topic.

In a nutshell, Google Analytics 3 (Universal Analytics) stops collecting data on July 1st, 2023. That’s why you have to switch to another tool (e.g. GA4) as soon as possible.

This article is your first step of the migration process.

 

Create a Google Analytics 4 Property & Data Stream

If you want to create a new Google Analytics 4 property (and you are not using the Upgrade to GA4 option), then go to the Admin section of your Google Analytics interface (by clicking the Admin at the bottom-left corner) and then (in the Property section) click Create Property.

Then enter the name of your property. It might be the name of your website, of your company, a brand, etc. Choose your company’s country, reporting timezone, and the main currency in that your business operates in.

Then press Next, answer several questions, click Create, and your new property will be ready.

The next step to complete is to configure your first data stream. It is a data source from which events will be sent to your Google Analytics 4 property. You can have multiple data sources in a single property. For example, three web properties, 1 for Android app, and 1 for an iOS app.

In this blog post, I will focus on a Web stream. Select it.

Then enter the URL of your website (for example, https://www.mywebsite.com). Note that the protocol (https) is already selected. After that, enter the name of your website.

When you create a web data stream in Google Analytics 4, you have the option to enable/disable Enhanced Measurement. It is designed to help marketers get as many events in the reports as possible without the need to cooperate with developers or configure them in Google Tag Manager.

By default, this feature is enabled and will automatically track the following events:

• Page view (event name: page_view)
• Scroll (event name: scroll)
• Outbound link click (event name: click with the parameter outbound: true)
• Site search (event name: view_search_results)
• Video Engagement (events: video_start, video_progress, video_complete)
• File Download (event name: file_download)
• Form events (form_start, form_submit)

If you want, you can disable/enable events individually. You can do that by clicking the gear icon in the Enhanced Measurement section and then clicking the toggle buttons.

When you’re ready, press the Create stream button.

 

Install Google Analytics 4 with Google Tag Manager

When you create a data stream (web), you will see a Measurement ID.

At the top-right corner, you will see the tracking ID of your new property. Copy it. We’ll need to use it in Google Tag Manager.

By the way, if you ever get lost in the GA4 interface, and you need to revisit this page, go to Admin > Data Streams > choose your most recently created stream, and then you will return to the same window that I have displayed in the screenshot above.

Then go to your Google Tag Manager container (if you haven’t worked with it, here’s a tutorial on how to get started) > Tags > New and choose GA4 configuration.

In the Measurement ID field, enter the ID that you copied in the GA4 interface. Keep the Send a page view event when this configuration loads if you want to automatically track pageviews.

Usually, that’s ok keep it enabled. Still, in some situations, e.g. on single-page applications, it is more recommended to disable the pageview checkbox and create just a standalone configuration tag. You can read more about that here.

In the Triggering section, select All Pages and then name the tag, e.g. GA4 – Pageview.

 

Check the DebugView in Google Analytics 4

Enable the preview mode to test your changes.

Once you enable the preview mode, you should see the new GA4 tag among the tags that fired.

Once you configure your events, it’s time to test them. The primary feature built for debugging GA 4 data is the DebugView section.

Head over to your Google Analytics 4 account > Admin > Debugview.

Most likely, you will not see any data there (yet). That’s because that data in the DebugView is visible ONLY when the debug mode in GA4 is enabled. Do not mix this with the GTM Preview and Debug mode. They are two different beasts.

To enable the debug mode in GA4, you have several options (any of them will work):

• Enable the GA debugger Chrome extension
• Send a debug_mode parameter together with an event
• Have enabled Google Tag Manager’s Preview mode on a page that you’re debugging

In the case of the first option, install the extension here, and then click its icon (so you can see the ON ribbon). From this moment, you will start seeing your events coming into DebugView.

The other option is to send a debug_mode parameter with every event that you wish to see in the DebugView.

In Google Tag Manager, you can do that by opening the GA4 Configuration tag and adding the following parameter:

If the debug_mode parameter contains any value, the event will be seen in DebugView. If you are using a hardcoded gtag.js, here are the instructions for including the debug_mode parameter.

But since we are working with Google Tag Manager, having the GTM Preview mode enabled automatically sets the debug_mode to true. Thus the data will start appearing in the GA4 DebugView.

When you start seeing data in the DebugView, you can click on every individual event, and then a list of parameters will be displayed.

Click on that parameter to see the value that was received by GA4. Now that is some granular debugging!

However, I have noticed some delays between the event actually happening on a website and then appearing in DebugView. Sometimes, I have to wait for several minutes until the data come in. That’s a bit unfortunate, and hopefully, the team behind Google Analytics 4 will improve this in the future.

Sometimes, refreshing DebugView’s page helps too.

Also, ensure you have selected the correct Debug device in the top left corner.

If multiple visitors have enabled the debug view (e.g. they all have enabled the Chrome extension), you will see multiple devices there and it might require some time to find yourself. This especially applies to my blog, when many of my readers have enabled the GA Debugger Extension, and I have to guess which device (out of the other 15) is mine 🙂

Anyway, once you start seeing data in DebugView, things will look like this.

 

Publish your changes in Google Tag Manager

Once you made sure that the data is coming in and it is displayed properly, you should submit your GA4 changes in the GTM container and publish it.

You can do that by clicking the SUBMIT button in the top right corner and then completing all the other steps that the user interface asks you to do.

After that, you should soon start seeing the new data coming in your real-time reports as well.

 

Google Analytics 4 real-time reports

On the left sidebar of the Google Analytics 4 interface, go to Realtime. This is where you will see the data coming into your reports. Unlike in the previous version (Universal Analytics), the new report offers you capabilities to see the data on a much more granular level.

First, you will see a map and a bunch of cards with traffic sources, the most popular events, and the number of users in the last 30 minutes.

You can also take a look at the snapshot of an individual user. You can do that by clicking the View user snapshot button in the top right corner.

Then, you will see a stream of all events of that particular user, you can click on them (just like in the DebugView) to see things on a more granular level. If you wish to look at another user/visitor, you can click the button here:

To exit the snapshot, press the Exit snapshot button in the top right corner.

 

What’s next? More events!

I will not go into too much details here, but here are several things for you to configure next:

• Exclude your internal traffic
• Increase data retention to 14 months (because the default for most of the data is two months)
• Configure cross-domain tracking

You will also find additional migration tips in this free e-book. Also, you can watch this video.

 

Frequently Asked Questions

Here are some additional questions that you might have that I wanted to address.

What if I already have Universal Analytics installed on my site? Please refer to my blog post on how to upgrade to Google Analytics 4. But a short version is that you can use both GA versions simultaneously (as long as the old version still works).

What if I already have Google Analytics 4 tracking code hardcoded in the website’s source code? I would highly recommend implementing GA4 (or any other JavaScript-based marketing/analytics tool) via Google Tag Manager because of its flexibility. Click here to learn more about GTM benefits. But a short version goes like this: your developers should remove the hardcoded tracking code from your website, and you should implement Google Analytics 4 via Google Tag Manager. My Google Tag Manager Course for Beginners covers the process and tips on how to migrate hardcoded tools to Google Tag Manager.

If I already have Universal Analytics (GA3) implemented in Google Tag Manager, should I create a new GTM container for Google Analytics 4? No, you don’t need to create a new GTM container just for Google Analytics 4. Use your existing Google Tag Manager container for the new GA version as well. Google Analytics 4 requires completely different GA tags, but they can co-exist with Universal Analytics tags in the same container.

 

Final words on how to install Google Analytics 4

And that’s how you install Google Analytics 4 with Google Tag Manager on your website. The reason why this blog post was longer (than it should have been) is DebugView and real-time reports of GA4. I wanted to introduce them properly, and you must understand how they work.

Speaking of the process, here’s a summary:

• Create a new GA4 property
• Create a data stream (in this blog post, I focused on the Web stream)
• Copy the Measurement ID
• Create a Google Analytics 4 Configuration tag
• Paste the Measurement ID and set the tag to fire on All Pages
• Preview/test the new tag
• Publish your changes in Google Tag Manager

Got more questions? Feel free to ask in the comments below.