Back Road Building

View Original

How to Implement GA4 with Google Tag Manager

MV

Google Analytics 4 (GA4) is the latest version of Google's popular analytics tool, and it offers a number of new features and enhancements over the previous version, GA3. One of the best ways to implement GA4 is by using Google Tag Manager (GTM), which allows you to easily add and manage your GA4 tracking code without needing to make changes to your website's code.

This is a high level post on the steps of implementing GA4 with GTM, so you can start taking advantage of its new features and capabilities.

Step 1: Create a GA4 Property

The first step in implementing GA4 is to create a new GA4 property in your Google Analytics account. To do this, log in to your Google Analytics account and click on the "Admin" button in the bottom left corner. Then, click on "Create Property" and select "Web" as the platform.

Step 2: Get the GA4 Measurement ID

Once you've created your GA4 property, you'll be given a measurement ID that you'll need to add to your GTM container. The measurement ID can be found by clicking on "Data Streams" in the property settings.

Step 3: Create a GA4 Tag in GTM

Next, log in to your GTM account and create a new tag for GA4. To do this, click on "Tags" in the left sidebar, then click on the "New" button to create a new tag. Select "Google Analytics: GA4 Configuration" as the tag type.

Step 4: Configure the GA4 Tag

Once you've created your GA4 tag, you'll need to configure it by entering your measurement ID and other settings. To do this, click on the "Tag Configuration" section of the tag and enter your measurement ID. You can also configure other settings, such as the data stream, tracking type, and more.

Configure your Tag

  • In the field Measurement ID, enter your "G-" ID.

  • Keep the Send a page view event when this configuration loads option checked to automatically send pageview events.

  1. Optional settings:

    • Server-side tagging: Select Send to server container to send all GA4 events to a Tag Manager server container instead of Google Analytics. Specify the Server Container URL of your Tag Manager server container. Learn more about Server-Side Tagging.

    • Parameters: Add any parameters you'd like to configure in Fields to Set. Use recommended event parameter names so that Google Analytics can populate dimensions and metrics for you. 

      Example 1: To set a user ID, add a row to Fields to Set. Set the Field Name to user_id, and the Value to a Tag Manager Variable that returns the user ID.

      Example 2: Use Fields to Set to configure cookie field settings.

    • Custom properties: Add any custom user properties that you'd like to configure in User Properties.
      Note: Analytics automatically collects some user dimensions so you don't have to define user properties for them. You can set up to 25 additional user properties per Google Analytics 4 property.

Create a Trigger

Set up a trigger to load the Google Analytics: GA4 Configuration when someone loads your website. 

  1. To ensure that the Google Analytics 4 Configuration tag fires before other triggers, click Triggering and use the Initialization - All pages trigger. Learn more about Page triggers.

  2. Save the tag configuration.

Step 5: Publish the GTM Container

Once you've configured your GA4 tag, it's time to publish your GTM container so that the GA4 tracking code is added to your website. To do this, click on the "Submit" button in the top right corner of the GTM container and select "Publish" from the drop-down menu.

Step 6: Verify Your GA4 Implementation

Finally, you'll want to verify that your GA4 tracking code is working correctly on your website. There are a few ways to do this. To do this,

  1. Adswerve DataLayer Inspector: This browser extension allows you to inspect and debug the data layer on your website, which is crucial for proper tracking and analysis in Google Tag Manager. You can download it here: https://chrome.google.com/webstore/detail/adswerve-datalayer-inspector/bhlhncmhejjljdekhnolcjgjhiejccnb

  2. Google Tag Assistant: This browser extension allows you to check the tags on your website and see if they're working properly. You can download it here: https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk

  3. Google Analytics Debugger: This browser extension allows you to see the analytics tracking code on your website and debug any issues. You can download it here: https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna

  4. Charles Proxy: This powerful debugging tool allows you to see all the requests and responses between your website and the analytics tracking server. You can download it here: https://www.charlesproxy.com/

  5. GTM Debugger: This browser extension is specifically designed for debugging tags created in Google Tag Manager. You can download it here: https://chrome.google.com/webstore/detail/gtmga-debugger/ilnpmccnfdjdjjikgkefkcegefikecdc

  6. Fiddler: This is a web debugging tool that allows you to see the traffic between your browser and the web server. You can download it here: https://www.telerik.com/fiddler

  7. GA4 Real-time Report: Log in to your GA4 property and check the "Real-time" report to see if data is being collected.

  8. Google Tag Manager preview mode: Google Tag Manager's Preview mode allows you to test and debug your tags before they are published to your website, by allowing you to see the tags that are firing, the data that is being sent to each tag, and the status of each tag, you can troubleshoot any issues and make sure your tags are working properly before publishing the container. Go to Google Tag Manager here:
    https://tagmanager.google.com/

Implementing GA4 with GTM is a quick and easy process that can help you take advantage of all the new features and capabilities of the latest version of Google Analytics.

Additional Resources:

[GA4] Configure Google Analytics 4 tags in Google Tag Manager

How to set up Google Analytics 4 using Google Tag Manager