GMP Hub

Implementing Google Analytics 4 on your Website

Google Analytics 4 (GA4) is the next generation of cross-platform, cross-device tracking where all your data is unified in one central location, the new GA4 property. Within the new Google Analytics property, you can set up data streams from one or all of your sources, including iOS, Android, and website.  

Google has announced that Google Analytics will be migrating all current properties to GA4 in the next few years (no official timelines have been released yet).  

Previously known as Google App + Web, GA4 will bring together all digital analytics across websites and apps (if applicable) into an integrated reporting feature. Whether you have an app or not, this newly integrated reporting will form the backbone of Google Analytics in the future, so it’s best to look to the horizon and future-proof your implementation sooner rather than later. 

We have a ways to go with the new GA4 property in terms of reporting, data collection, and functionality limitations; however, we’ll give you some tips on how to make the Beta betta, and get you riding the curve to adoption. We’ll run through dual tagging, walk you through your property and data stream setup, and explain how GTM and Firebase all fit into the picture.

Watch our recent Google Analytics 4 Ask Me Anything webinar On-demand

Why do this now?

The most obvious benefit of GA4 is for organizations that currently have an app or are actively developing one. In this situation, you have no choice but to concede to the Firebase SDK and GA4.

Maybe you don’t have an app at the moment, and don’t have one on the roadmap for the foreseeable future. Even so, GA4 should be on your radar to future-proof your web implementation.

By doing this now you’re able to capture your historical data into the GA4 property before you’re forced to migrate. That way you’ll have a multi-year look-back window of your data. You won’t be stuck flipping between multiple properties to stitch together reports when your current analytics property finally gets ‘shut off’.

Bonus: If you do decide to create an app, you’ve got the web stream flowing into GA4 already and you understand how the reports work in advance.

An Introduction to Dual Tagging

Dual tagging is best practice for implementing Google Analytics 4 on your site before Google forces the migration. For websites, dual tagging means setting up both a Google Analytics 4 property and a Universal Analytics property.

For every tag that you currently have set up in GTM, you will need to set up a corresponding tag in GTM for GA4. This article outlines the steps to setting up a single dual tag. You will need to replicate this process until all of your current UA tags have parallel GA4 tags.

*This guide presumes you already have Universal Analytics implemented on your websites.

Data Flow with Dual Tagging

We’ve highlighted in the diagram below the flow of data from your website all the way to your hit level data in BigQuery. Note: this illustrates the data flow for GTM not gtag implementations

You can see that GTM is doing double-duty sending information to both your UA Property and your GA4 Property through dual tagging.

Implementing Google Analytics 4 on your website

Implementing Google Analytics 4 on your website requires a new GA4 property and implementing dual tagging across your website. 

Again, this article outlines the steps to setting up a single generic dual tag. This does not include mapping custom parameters or user properties to custom dimensions. You will need to replicate this process until all of your current UA tags have parallel GA4 tags.

We have also included instructions on how to add GA4 via gtag.js, which is just a couple of extra steps.

Step 1: Create a GA4 Property

For most implementations you should be creating two GA4 properties: one for production, and the other for lower environments such as dev, testing, and UAT.

Note: You will need admin permissions to create your GA4 properties

Step 2: Add a Web Data Stream in UA

Add a Web data stream to your new GA4 properties by – (you can add app data streams at a later date).

Enter your URL and website name as requested. 

After entering the required site information, you will be given a Measurement ID: G-XXXXXXXX (example below). Before you finish creating the stream, be sure to copy that ID. You’ll need it for your next step in GTM.

You may be wondering how many data streams are needed for your specific use case. Try going with one web stream initially, you can always add more later.

Step 3: Add GA4 via Google Tag Manager

This assumes your website is tagged with GTM, and that all your events and pageview tags are set up and working properly.

Start by creating a GA4 Configuration tag. This is similar to your Pageview tag in Universal Analytics. Feel free to add Fields to set User Properties, and Advanced Settings to customize the tag. This tag also acts like your Global Settings Variable for Universal Analytics tags. It should have the configuration you would like for all events and pageviews alike. All your GA4 Event tags will reference this Configuration tag. This does not include mapping custom parameters or user properties to custom dimensions.

Enter your Measurement ID and set the trigger to fire on All Pages, and publish. Now you’ve completed 1 generic dual tagging for your website.This does not include mapping custom parameters or user properties to custom dimensions.

Adding GA4 via gtag.js

You can also add gtag.js directly to your page instead of using Google Tag Manager. There are two different methods to accomplish this: 1) JavasCript, or 2) Property configuration.

JavaScript Method

You will need to have your developer add the following code to all your website pages to  implement pageview tracking

<!– Global site tag (gtag.js) – Google Analytics –><script async src=”https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID”></script><script>  window.dataLayer = window.dataLayer || [];  function gtag(){dataLayer.push(arguments);}  gtag(‘js’, new Date());
gtag(‘config’, ‘MEASUREMENT_ID’);</script>

Replace MEASUREMENT_ID with the ID of the Google Analytics property to which you want to send data. 

Property Configuration method:

This is the fastest method to track pageviews without developer involvement.

Navigate to your “Universal” property and link to you GA4

Next Steps

Now that you have set up dual tagging for your pageviews, the next steps would be to set up dual tagging across your event tags to mimic the current tagging you have in place. This is where things start to get more complex, which we will cover in an upcoming post. 

It would be remiss for us not to ensure that you also include a step for tag validation across your dual tagging implementation. We’ve created a free guide and checklist for tag validation and debugging to ensure this very important step does not get overlooked.

Transitioning to Google Analytics 4 is inevitable. With GA4 set to affect the way we measure online behavior going forward, getting a head-start on planning, strategy, implementation, and education will be essential for organizations to be successful.

Contact us for support on all of your GA4 initiatives.

Bill Tripple

Bill is a Consultant on the Digital Intelligence team who works remotely from the Vancouver Office. His area of expertise includes Analytics Implementations for both Google and Adobe products, and he is convinced that he can track nearly anything. He is certified in Google Analytics, Adobe Analytics, and Eloqua. Before coming to Cardinal Path, Bill was the Senior Developer responsible for the countless initiatives of the Western Union Business Solutions marketing department who also had a lead role with their integrations of Marketing Automation, Customer Relation Management (CRM), and Content Management Systems (CMS). His current and past experiences in the Digital Marketing and the development industry has given him a competitive edge to easily associate and relate with both Marketers and Developers.

Share
Published by
Bill Tripple

Recent Posts

Optimizing user experiences with Digital Experience Analytics (DXA) platforms

As consumers become increasingly digitally savvy, and more and more brand touchpoints take place online,…

1 month ago

Enabling Value-Based Bidding with Google Tightlock

Marketers are on a constant journey to optimize the efficiency of paid search advertising. In…

1 month ago

Resolving “Unassigned” Traffic in GA4

Unassigned traffic in Google Analytics 4 (GA4) can be frustrating for data analysts to deal…

2 months ago

This website uses cookies.