How To Set Up Google Analytics 4 (GA4) – Step by Step Guide

how to set up analytics 4

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.

  1. Create a Firebase Account
  2. Create a Firebase Project
  3. Open Your New Firebase Project
  4. Set Up Your Data Stream
  5. Create New GTM Container
  6. Install New GTM Containers
  7. Set Up Your Configuration Tag
  8. Connect Your Configuration Tag to GA4
  9. Test Your Tag
  10. Create Your Own Events

Step 1 – Create A Firebase Account

https://firebase.google.com/

Step 2 – Create A Firebase Project

  • Click the plus sign to add a project
  • Name your project
ga4 firebase add project
ga4 firebase add project
  • Be sure to “Enable Google Analytics for this project”
ga4 firebase enable analytics
ga4 firebase enable analytics
  • Select the Analytics account you want to connect your new project to.
  • Be sure to select “Automatically create a new property”
  • Hit Create Project
ga4 firebase configure analytics
ga4 firebase configure analytics

Step 3 – Open Your New Firebase Project

  • Return to Analytics and refresh your page.
  • Select the new property you created in Firebase
ga4 select firebase account
ga4 select firebase account

Step 4 – Set Up Data Stream

  • Select Data Stream Section in Analytics
  • Select Web (unless you’re working with an app)
ga4 set up data stream
ga4 set up data stream
  • Add your domain and a nickname
ga4 stream details
ga4 stream details
  • 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
ga4 automatic events
ga4 automatic events

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.
ga4 create gtm account
ga4 create gtm 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.
ga4 configure gtm account
ga4 configure gtm account

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.
ga4 new gtm container tags
ga4 new gtm 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 Google’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.
ga4 multiple containers documentation
ga4 multiple containers documentation

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.
ga4 create config tag
ga4 create config tag
  • 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.
ga4 measurement id
ga4 measurement id
ga4 paste measurement id
ga4 paste measurement id
  • 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.
ga4 create config id variable constant
ga4 create config id variable constant
  • 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.
  • Trigger to fire on All Pages and save.
ga4 config id variable cookie flags
ga4 config id variable cookie flags
ga4 default cookie settings
ga4 default cookie settings

Step 8 – Connect Your Configuration Tag to GA4

  • Go to Web Stream Details section in GA4
ga4 connect config tag
ga4 connect config tag
  • Enter your Measurement ID and give your stream a nickname.
  • Press Connect.
ga4 enter config tag details
ga4 enter config tag details

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.
ga4 preview config tag
ga4 preview config tag

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.

ga4 cookies set
ga4 cookies set
ga4 how cookies are used
ga4 how cookies are used

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.

ga4 network requests
ga4 network requests

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 your variables for your data layer). Scroll to the bottom of the Headers panel to the Query String Parameters section. 

ga4 query string parameters
ga4 query string parameters

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.

ga4 request parameters
ga4 request parameters
ga4 shared parameters
ga4 shared parameters
ga4 event parameters
ga4 event parameters

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 won’t 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.

ga4 page view event query string parameters
ga4 page view event query string parameters

In this instance we see two events:

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)
ga4 create custom event
ga4 create custom event
  • Set it to trigger on Window Loaded.
ga4 create window loaded trigger
ga4 create window loaded trigger
  • 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.
ga4 test custom event network
ga4 test custom event network

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.

ga4 test custom event debug view
ga4 test custom event debug view

Create A Recommended Event

GA4 offers us a wide range of recommended events to choose from. Lets create a fun one. Let’s 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.

ga4 create recommended event
ga4 create recommended event
  • 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)
ga4 create recommended event configuration
ga4 create recommended event configuration
  • 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”.
ga4 create recommended event trigger
ga4 create recommended event 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.
ga4 push recommended event trigger
ga4 push recommended event trigger
  • 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.
ga4 preview recommended event
ga4 preview recommended event
ga4 recommended event tag details
ga4 recommended event tag details

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.

ga4 recommended event analytics output
ga4 recommended event analytics output
ga4 recommended event hit details
ga4 recommended event hit details
ga4 recommended event network
ga4 recommended event network

Now go to Analytics and select the DebugView. We can see our recommended event and its parameters by clicking on it.

ga4 recommended event debug view
ga4 recommended event debug view
ga4 recommended event debug view parameters
ga4 recommended event debug view parameters

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.

ga4 create real custom event trigger
ga4 create real custom event trigger
ga4 create real custom event preview tag fired
ga4 create real custom event preview tag fired
ga4 create real custom event network request
ga4 create real custom event network request
ga4 create real custom event tag details
ga4 create real custom event tag details
ga4 create real custom event hit details
ga4 create real custom event hit details
ga4 create real custom event debug view
ga4 create real custom event debug view
ga4 create real custom event debug view parameters
ga4 create real custom event debug view parameters

© 2023 Nic Pederson. Built with Care