Google Analytics (GA4) Tracking with Google Tag Manager

Follow

This article will take you through:

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:

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:

Type of widget 

GTM Parameter 

Example URL 

Web integration

?gt=GTM-XXXXXXX

https://app.glofox.com/portal/#/branch/605d8432e2ff824b934b5b6c/classes-day-view?gt=GTM-XXXXXXX

Custom web integration link

&gt=GTM-XXXXXXX

https://app.glofox.com/portal/#/branch/605d8432e2ff824b934b5b6c/classes-day-view?header=classes,courses,memberships,appointments_menu,facilities&gt=GTM-XXXXXXX  

Lead capture form

?gt=GTM-XXXXXXX

https://app.glofox.com/portal/#/branch/605d8432e2ff824b934b5b6c/lead-register/membership/644009b7d3cba57c150ca035/plan/1681918381969?gt=GTM-XXXXXXX

 

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., "Google tag configuration – GT-XXXXXXX").
  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 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:Screenshot of the Google Tag Assistant showing a successfully configured Google tag
    • 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 "Data Layer - GA4 Price", and whose Data Layer Variable Name will be set to "eventModel.metadata.price".

Screenshot 2024-05-22 at 13.13.00.png

  • The second one is called "Data Layer - GA4 Service name", and whose Data Layer Variable Name will be set to "eventModel.metadata.membership”.Screenshot 2024-05-22 at 13.12.34.png
  • The third one is called "Data Layer - GA4 Branch name", and whose Data Layer Variable Name will be set to "user_properties.branch”.Screenshot 2024-05-22 at 13.16.13.png
  • After this, you will navigate to the Tags section, and will create a new tag.
  • Name the tag "GA4 - 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.
  • Next, open up the event parameters section, and click add parameter to add the three parameters below, as well as the currency value:Screenshot 2024-05-28 at 17.36.09.png
  • Scroll down to More settings, open it up, and toggle on the "Send Ecommerce data" option. Make sure it's set to "Data Layer".

Screenshot 2024-05-22 at 13.20.30.png

  • Last, click on the Triggering section, and create a new trigger clicking on the "+" sign. Name the trigger "PURCHASE_SUCCESS", 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.

 

Event Description 

Event Name DataLayer 

DataLayer Variable Name

Value 

Registration: fired when a user successfully signs up via web portal or lead capture form

REGISTER_SUCCESS

eventModel.metadata.source

web / lead 

user_properties.branch

branch name

eventModel.metadata.url

Form url

user_properties.utm_source

Source from UTM in url

user_properties.utm_medium

Medium from UTM in url

user_properties.utm_campaign

Campaign from UTM in url

Membership purchase: fired when a user successfully purchases a service (membership or credit pack) 

PURCHASE_SUCCESS 

eventModel.metadata.membership

purchased service 

eventModel.metadata.price

service price 

user_properties.branch

branch name 

user_properties.utm_source

Source from UTM in url

user_properties.utm_medium

Medium from UTM in url

user_properties.utm_campaign

Campaign from UTM in url

Event booking: fired when a user successfully books a class/ appointment/ facility/ course 

BOOK_SUCCESS 

user_properties.branch

branch name 

eventModel.metadata.eventName

booked event name 

user_properties.utm_source

Source from UTM in url

user_properties.utm_medium

Medium from UTM in url

user_properties.utm_campaign

Campaign from UTM in url

Membership checkout (logged-out): fired when a logged-out user opens the membership or credit pack details/checkout 

SHOW_BUY_MODAL_LOGGED_OUT 

eventModel.metadata.membership

selected service 

eventModel.metadata.price

service price  

user_properties.branch

branch name 

user_properties.utm_source

Source from UTM in url

user_properties.utm_medium

Medium from UTM in url

user_properties.utm_campaign

Campaign from UTM in url

Booking checkout (logged-out): fired when a logged-out user opens the event details/checkout 

SHOW_BOOK_MODAL_LOGGED_OUT

user_properties.branch

branch name 

eventModel.metadata.eventName

selected event name 

user_properties.utm_source

Source from UTM in url

user_properties.utm_medium

Medium from UTM in url

user_properties.utm_campaign

Campaign from UTM in url

Membership checkout (logged-in): fired when a logged-in user opens the membership or credit pack details/checkout 

SHOW_BUY_MODAL_LOGGED_IN 

eventModel.metadata.membership

selected service 

eventModel.metadata.price

service price 

user_properties.branch

branch name 

user_properties.utm_source

Source from UTM in url

user_properties.utm_medium

Medium from UTM in url

user_properties.utm_campaign

Campaign from UTM in url

Booking checkout (logged-in): fired when a logged-in user opens the event details/checkout

SHOW_BOOK_MODAL_LOGGED_IN

user_properties.branch

branch name 

eventModel.metadata.eventName

selected event name 

user_properties.utm_source

Source from UTM in url

user_properties.utm_medium

Medium from UTM in url

user_properties.utm_campaign

Campaign from UTM in url

Add Payment method: fired when a user adds a payment method.

ADD_PAYMENT_METHOD_SUCCESS

user_properties.branch

branch name

 

Cross-domain tracking

If you’d like to preserve the user session between your site and Glofox widgets, you can set up cross-domain tracking. There are a few steps to be taken which are well described in official Google documentation.

 

Next steps and additional support

If you have any further questions, please contact us at support@glofox.com

Was this article helpful?
1 out of 1 found this helpful