Google Analytics (GA4) Tracking with Google Tag Manager

This article will take you through:

• What is Google Tag Manager?
• Steps to configure your setup
  • Step 1: Add Google Tag Manager ID to Web Widgets URL
  • Step 2: Create a Google tag
  • Step 3: Verify your tag works
  • Step 4: Set up Google Analytics 4 events with Tag Manager
• Next steps and additional support

What is Google Tag Manager?

You can now integrate Google Tag Manager (GTM) with the Glofox web integration and lead capture forms. This powerful tool simplifies tracking and analytics and enables operators to optimize marketing strategies and enhance user engagement effectively.

Key Benefits

• Google Analytics Setup: Connect GTM with GA4 to manage analytics and marketing tags without altering website code.
• Conversion Tracking: Monitor interactions and conversions from sign-ups, membership purchases, to booking, gaining valuable insights into marketing campaign effectiveness.
• Retargeting and Ad Tracking: Utilize GTM for targeted retargeting campaigns and direct advertisement performance tracking within Glofox, enhancing conversion rates and marketing ROI.
• Behavioral Insights: Dive deeper into user behaviors on your web forms to optimize interactions and reduce abandonment rates.

Before you begin

This guide assumes that you've done the following:

• Create a Google Analytics 4 account and property
• Create a web data stream for your website
• Set up and install Tag Manager

It also assumes that you have the following:

• Access to the Tag Manager container for the website
• The Editor (or above) role to the Google Analytics account

Steps to configure your setup:

Step 1: Add Google Tag Manager ID to Web Widgets URL

1. Locate your Google Tag Manager ID in your Google Tag Manager configuration page.

1. To set up tracking in the Glofox web integration and lead capture forms, you need to add the Google Tag Manager ID to all the Glofox widgets URLs embedded in your website. To access your custom web integration link go to Web integration settings in the dashboard. Append the GTM ID as a parameter to the URL using the format ?gt=GTM-XXXXXXX. Below are examples of the links, depending on the type of widget you are using:

Make sure you replace GTM-XXXXXXX with your own GTM ID. Once you update the iFrame URL on your website with the additional parameter and set up the Google Tag (Step 2) this will initiate the tracking via GTM.

Please note that historical data will not be visible on your property, and it will start collecting when you implement the new tracking code on your website.

Step 2: Create a Google tag

The Google tag establishes the data flow from Glofox web integration and lead capture form to Google Analytics and other destinations you might have set. Create one Google tag per domain and place it on every site that you want to measure.

1. Open Google Tag Manager
2. Select the container you want to configure. Open the Tags menu.
3. Create a New tag. Enter a name for the tag at the top (e.g., "GA4 - Main tag").
4. In the Tag Configuration box, select Google tag.
5. Configure your tag. In the field Tag ID, enter your Google tag ID. Where do I find my measurement ID?
6. Click on triggering and select "All pages".

Step 3: Verify your tag works

To make sure your tag works as intended:

• In your Google Tag Manager Workspace, click Preview. Tag Assistant opens.
• Enter your site's URL. Make sure it includes the ?gt=GTM-XXXXXXX parameter at the end of the web portal url.

• Check if the Google tag configuration – GT-XXXXXXX fired when the page loaded.
  • If it fired successfully, the Tag Assistant UI will look like this:
  • If your tag didn't fire, check your tag's trigger settings.
• When you are done with debugging, close Preview mode.
• In your Workspace, click Submit to publish your changes.

With the GTM ID set, Glofox will automatically track basic GTM events like page views, clicks etc. tied to a particular user session on your web portal and lead capture form.

Step 4: Set up Google Analytics 4 events with Tag Manager

The GA4 Event tag lets you set up events on your website without writing code. The event data shows up in your GA4 reports. Create as many event tags as you need to measure events.

The following steps show an example of how to send a custom event to a Google Analytics 4 property when a user purchases a membership. The steps show you how to implement the event using Tag Manager and don't require you to implement a data layer object.

• First, navigate to the variables section and click on "New" to create a new user-defined variable.
• We are going to create 3 different variables. Each one will have a different name listed below, and the variable configuration will be set to "Data Layer Variable".
• The first one called "GF Price", and whose Data Layer Variable Name will be set to "eventModel.metadata.price".

• The second one is called "GF Membership", and whose Data Layer Variable Name will be set to "eventModel.metadata.membership”.
• The third one is called "GF Branch name", and whose Data Layer Variable Name will be set to "user_properties.branch”.
• The last one is called "GF Ecommerce", and whose Data Layer Variable Name will be set to "user_properties.branch”.
• After this, you will navigate to the Tags section, and will create a new tag.
• Name the tag "GA4 GF - purchase" and in the tag configuration select Google Analytics > Google Analytics: GA4 Event.
• Introduce your GA4 Measurement ID in the corresponding field. Where do I find my measurement ID?
• Enter a name for the event (e.g. "purchase"). This will create a new custom event and the name will appear in your GA4 reports. To create a recommended event, use one of the predefined event names.
• Scroll down to More settings, open it up, and toggle on the "Send Ecommerce data" option. Make sure it's set to "Custom object" and Ecommerce Object to {{GF Ecommerce}}.

• Last, click on the Triggering section, and create a new trigger clicking on the "+" sign. Name the trigger "GF - PURCHASE_SUCCESS (trigger)", and click on the configuration section. Select "Custom Event" and name it " PURCHASE_SUCCESS".
• Once your tag looks as above, click save, and Submit your workspace changes. 

You can also set up additional custom events. Below is the DataLayer information for each event that you can use to set up your Tags.

Communication between the parent page and Glofox web widgets

To track events triggered in the Glofox web widgets to the parent page, you need to add a listener and forward scripts as Custom HTML Tags.

Next steps and additional support

If you have any further questions or want access to our Google Tag Manager Configuration Demo Account, please contact us at support@glofox.com.