GA4 is the latest iteration of Google Analytics.
GA4 is a whole new ball game. The biggest difference is that the entire ecosystem is event-based.
So how do you set everything up?
Like most things, there are several ways you can do it, but I’m only going to walk you through the preferred method for most people. For this demo, I’m going to assume that you are working with a website (vs. an App) and are using Google Tag Manager to manage your existing tags.
Setting Up Google Analytics 4
Step 1 - Create a Firebase Account
Step 2 - Create a Firebase Project
- Click the plus sign to add a project
- Name your project
- Be sure to “Enable Google Analytics for this project”
- Select the Analytics account you want to connect your new project to.
- Be sure to select “Automatically create a new property”
- Hit Create Project
Setting up a Firebase project automatically creates your GA4 property for you.
Step 3 - Open Your New Firebase Project
- Return to Analytics and refresh your page.
- Select the new property you created in Firebase
Step 4 - Set Up Data Stream
- Select Data Stream Section in Analytics
- Select Web (unless you’re working with an app)
- Add your domain and a nickname
- Before clicking Create Stream, click the gear icon in the Enhanced Measurement section. These are the events that Google will track automatically. Unless you have a reason to not track any of these events, leave them all enabled.
- Click Create Stream
Step 5 - Create New GTM Container
- When you get to the screen that says Web Stream Details, jump over to Google Tag Manager (GTM) in a new tab.
- Create a new account.
- Name your account.
- Select your Country.
- Name your container.
- Select your Target Platform. For most people this means selecting “Web” but if you’re setting up an app, building and AMP site, or plan to use server-side measurement, then select a different platform.
- You can read about AMP here if you’re curious, but if you’re not sure if you’re using AMP, don’t select this option.
- Server-side measurement is still and beta, is more complicated to set up, has a cost associated with it and is outside the scope of this tutorial, so unless you know for sure you want to set up server-side measurement, don’t select this option.
- Hit Create.
Step 6 - Install Your New Containers
- Paste your new tags into your site
- If you’re already using GTM Universal Analytics (the previous version of Analytics), just paste these new container tags directly below your existing container tags.
- Read Google’s documentation on using multiple containers if you’re unsure about this step.
- If you’re setting up GTM for the first time, follow Googles’s recommendations for setting this up or ask a developer to assist. Ultimately, your goal here is to have these containers load on all of your pages—with the top container loading in the head and the bottom container loading in the body of each page.
An example of how to install two GTM containers at once.
Step 7 - Set Up Your Configuration Tag
- In your new GTM account, select the Tags section on the left side of the page.
- Hit New to create a new tag.
- Name your tag something that makes sense. Ex: “GA4 Config”
- Click the “Tag Configuration” section and select the “Google Analytics: GA4 Configuration” tag type on the right side of the page.
- Enter your Measurement ID. This can be found in the Web Stream Details section in Analytics. If you’re following along, this page is already up in a separate tab in your browser.
- Consider using a Variable instead of entering this manually. This will save you time in building your other tags and remove the risk of entering the ID incorrectly on other tags.
- To do this, enter the Variables section on the left side of GTM.
- Create a new Variable.
- Select “Constant” as the type on the right side of the page.
- Name your Variable. Ex: “GA4 Measurement ID – (Your ID)”
- Enter your Measurement ID into the only available field.
- Save.
- Optional: Configure the “Fields to Set” section.
- This is where you can configure your GA4 implementation, such as setting up your cookie settings. You can also set persistent parameters that will be sent with each event, such as language or currency type.
- For example, if you have an ecommerce site or or use embedded forms or services that require you to share cookies with third-parties, you’ll need to set your sameSite settings here. In GTM you do that by adding a field of cookie_flags with a value of secure;samesite=none. You can read more about configuring your sameSite settings here.
- NOTE: There are default values already in place for your cookie settings (shown below). Add new settings will supersede the default settings. And the settings used in cookie_flags will supersede both the default settings and any standalone cookie settings you make in the tag if they conflict.
- ALSO NOTE: these values won’t change from event to event, so you don’t want to use them for values that will change.
- This is where you can configure your GA4 implementation, such as setting up your cookie settings. You can also set persistent parameters that will be sent with each event, such as language or currency type.
- Trigger to fire on All Pages and save.
Step 8 - Connect Your Configuration Tag to GA4
- Go to Web Stream Details section in GA4
- Enter your Measurement ID and give your stream a nickname.
- Press Connect.
Step 9 - Test Your Tag
- Go to GTM.
- Hit Preview and enter your domain when prompted.
- Once you connect successfully, you will see your Configuration tag on the Tag Assistant Page.
Step 10 - Create Your Own Events
The final step is to create your own events, but before we create our own events, let’s take a closer look at the data that is being sent to GA4 so we understand what it is that we’re going to create.
Inspect your page and go to the Application tab in Dev Tools. You’ll see three tags:
_ga
_gid
_ga_
The first two distinguish users and the third persists the session state. Here’s where you see the configuration settings you set for your cookies in the configuration tag. You can read more about this here.
The third cookie says <container-id> but this is incorrect. What you will see is your Measurement ID.
Jump over to the Network tab. Enter “collect” into the search box. Look for the url that has:
tid=<configuration-id> near the front of the url. Select it.
In the Header section to the right you’ll see all of the data is being passed in your events. Note that the request is a POST type, so the data is accessible in the same way other POST type requests are (This will be helpful when you build you variables for your data layer). Scroll to the bottom of the Headers panel to the Query String Parameters section.
Here’s where you can see the data that will get passed along with all events. Here’s a few tables that define the request parameters you’ll see.
Below that section is a section called Request Payload. This is where you’ll see the events passed in this particular batch of data. Data is sent to GA4 in batches, so you wont see a new url for each event, but rather for a group of recent events. If you click around on this page while the inspector is open, you’ll see new urls show up with new events periodically. NOTE: Request Payload section is only available when there are multiple events being passed.
In this instance we see two events:
en=page_view
en=scroll&_et=243&epn.percent_scrolled=90 The first event is a page view event with no additional parameters besides what was passed with the configuration tag. The second event is a page scroll event collected automatically by GA4 with two parameters: _et, which stands for Event Time and epn, which stands for Parameter Name.
What kinds of events can we create? There are three types of events we can send.
- Automatic Events. These are the events that GA4 collects automatically. You just have to enable them in this section when you set up your property.
- Recommended Events. These are events that Google thinks you may need. Their event names are reserved. At this moment, most of these events don’t have any specialized reporting or usage, but that will change in the future as Google develops their reporting. Recommended events also have expected parameters, so if you do use them, be sure you know which parameters are expected for each event. You can find links to these events here.
- Custom Events. These can be whatever you want. They just can’t have the same name as an automatic or recommended event. They can pass any parameter you’d like.
Create A Custom Event
- Go to GTM.
- Create a tag. Name it. We’ll call our “lets_see”.
- Select Google Analytics: GA4 Event as the tag type.
- Enter your Measurement ID or select your ID Variable.
- Name your event. We’ll call ours “lets_see”.
- Add an event parameter. We’ll call ours “did_it_work” and give it a value of “yessssss”.
- Add an additional parameter named “debug_mode” with a value of “true”. This is a special parameter that will allow us to see our event data in the DebugView section in Analytics. (More on that below)
- Set it to trigger on Window Loaded.
- Save your tag and enter Preview mode in GTM.
- Inspect the preview page.
- Go to the network tab and select the request with your measurement ID in it. There may be multiple, so you may have to look at a couple before finding the correct one.
- Select the Headers tab and scroll to the bottom.
- We can see our custom event here called lets_see with a parameter of did_it_work and a value of yessssss. We also see our debug mode event with a value of true.
That data is now being sent to GA4 every time a page loads. We can verify this in GA4 by visiting the DebugView section in Analytics. Since we added the debug_mode parameter in our event, our data is now visible for inspection in Analytics. We can view our events in real-time and see their parameters. It’s a very nice feature of GA4 and one of my favorite parts.
You can debug your events several different ways. If you just want to debug a single tag, you would add the debug_mode parameter to that one tag. But you can also add the debug_mode parameter to your main config tag and this will send all of your data through in debug mode. You can read all about debug_mode and the different ways to use it in Google’s documentation.
Create A Recommended Event
GA4 offers us a wide range of recommended events to choose from. Lets create a fun one. Lets say that your site rewards its users with Bitcoin for doing something. Every time a user earns Bitcoin, you would fire a recommended event called earn_virtual_currency. Feel free to try this with a different recommended event, but remember that each recommended event has expected parameters, which can be found here.
- Go to GTM.
- Create a tag with “Google Analytics: GA4 Event” as the tag type.
- Name the tag “earn_virtual_currency” and select your Configuration tag.
- Name the event “earn_virtual_currency”. Be sure to spell this, and the parameters, correctly.
- Add a parameter of “virtual_currency_name” with a value of “Bitcoin”.
- Add another parameter of “value” of 18293 *(Side note, when I shot the video for this article, the price of Bitcoin was 18,293. By the time I published this article a few days later, price was at 22,848)
- Add a parameter of “debug_mode” with a value of “true”. (the value of debug_mode can be whatever you want)
- Create a Trigger to fire your event. We’ll name ours “virtual_currency_trigger”.
- Select Custom Event as the trigger type.
- Name the event whatever you want. We’ll call ours “virtual_currency_trigger”.
- Save the tag and enable preview mode in GTM. Be sure that you see your new tag called “earn_virtual_currency”. It will not have fired.
- Go to your site in your browser and inspect your page.
- Open the console tab. Enter “window.dataLayer.push({event: ‘virtual_currency_trigger’})” and hit enter.
- Go back to your Tag Assistant page in GTM. You should see your custom event in the summary and that the tag called “earn_virtual_currency” has now fired.
The data being sent can be viewed and analyzed in the same way as we did with our custom event. One additional way to view the data is to click the Analytics button on the Tag Assistant page. This will show you just what is being sent to Analytics. What you see here is almost an exact match for what you would see in the Network tab when you inspect the page manually.
Now go to Analytics and select the DebugView. We can see our recommended event and its parameters by clicking on it.
That’s it. You’re done.
Just create actual events that pass meaningful data based on your implementation and you’ll be entirely set up.
I’ll help get you started. Let’s say you create a tag that fires on every 404 page. You would just need to generate an internal event from your site every time a 404 occurred (similar to the window.dataLayer.push({event: ‘XYZ’}) we manually created earlier. (I already have my data layer set up to identify 404 pages.) Then create a tag with an event called 404. Give it a parameter of {page_location} / {{Page URL}} to know which page was a 404 and another parameter of {page_referrer} / {{Referrer}} to know where the user came from. The values for both of these parameters are already built into GTM, so you don’t even need to create any custom data layer elements/variables. Set your tag to trigger on Window Loaded. Now, every time there is a 404, you’ll see an event called 404 in your data, along with the page it happened on and the page referrer. Also, add the debug_mode parameter to check your work.
