Let's Talk

Google Analytics UA officially sunsetted at the end of June, and many of us have spent the last year or more learning a whole new approach to tracking engagement using Google Analytics 4 (GA4). There are pros and cons to GA4 as with any analytics tool, but one feature we really like is how it works with Google Tag Manager (GTM) to create custom events.

Why Use Google Tag Manager with GA4

We’ve found it’s much more scalable and beneficial to load GA4 through Google Tag Manager. Our typical set up looks like this:

A website loads Google Tag Manager, and then Google Tag Manager in turn loads other scripts, including GA4.

This approach gives our clients one central place to manage their tracking scripts (since there are often more than just GA4). It allows for easier collaboration between client and agency, and it simplifies compliance because so many Cookie Consent / GDPR tools work with Google Tag Manager.

Developer tip! CraftCMS makes it easy to exclude tracking scripts for your staging website with a simple condition or by using the SEOmatic plugin. This ensures development and test traffic does not get mixed into your live data.

Understanding GA4 Events

An event in GA4 is an action taken by one of your website visitors, such as a button click, a contact form submission, or a product purchase.

Some events are automatically collected simply by having the GA4 code on your page. And many common actions, such as “click,” “search,” or “share” are already recognized with predefined event names you can use out of the box. We recommend you check out GA4’s Recommended Events to learn more about them.

But there are cases when one of the recommended events doesn’t fit your exact need and you would like to track a custom action that is specific to your business. That’s where Custom Events come in.

The Benefits of Custom Events

While the built-in Recommended Events are very robust, we’ve found success using Custom Events to more tightly define the interactions we track. Custom event names make it convenient to see at a glance what actions are happening. And they make it easier for us to track dynamic content modules that authors may add or remove from the page at their discretion.

Related Article: Process Spotlight — How We Achieve Design Consistency that Scales with Time

Screenshot showing GA4's standard recommended events (such as page view) and a custom event titled contact_form_submission_GA4.

Some of the ways we’ve used Custom Events include:

  • Tracking the use of a specific click element on a site, like a homepage banner, regardless of whether the link text or destination URL change.
  • Honing in on links in specific locations on a website, like only counting email link clicks in the footer.
  • Counting successful form submissions on forms included by plugins or add-ons.
  • Tracking clicks on critical or temporary elements such as an alert bar such as dismiss_warning
  • Tracking events when shoppers configure a product with several options, such as customize_start or change_color
  • Tracking interaction with survey’s and quizzes, such as survey_start or question_answered

Using Google Tag Managers Preview feature enables us to easily test and troubleshoot throughout the process.

Our Process for Creating and Tracking Custom Events

Strategy First

  1. We work closely with our client to determine what is valuable to track. While we want to collect as much useful data as possible, we don’t want to clutter up the website or analytics tools with triggers and tags that are not going to be utilized.
  2. Once we align on what data is needed, we determine which ones can be created using GTM’s Recommended Events. This covers many of the common clicks and form submissions.
  3. Then for any business-specific data or actions that don’t map neatly to an existing Recommended event name, we create a Custom Event via Google Tag Manager.

Example of Custom Event Creation

Let’s imagine a scenario where you would like to use a GA4 Custom Event to track clicks on the “Get a Quote” call to action button in the main navigation. To keep this example brief, we’ll assume that you’ve already created a GTM container containing a “Google Analytics: GA4 Configuration” tag; and that you’ve added the GTM code snippet to your template.

Create a Way to Target the Desired Action

First, you will need a way to target the desired action. While class names are a common solution, we prefer using data attributes because they feel a bit cleaner.

Here’s what the HTML for our call to action button looks like.

<a class="button button-primary" href="/get-a-quote" data-gtm-element="navigation-cta-get-a-quote">Get a Quote</a>


Set Up a Trigger in Google Tag Manager

Next, create a new Trigger in your GTM Container. This will tell the tag you are creating in the next step when to fire.

The Trigger Type would be “Click - All Elements” set to fire on some clicks. Then choose the “matches CSS Selector” option to fire only when the clicked element contains our data attribute.

Create the trigger

Ensure that your variables include “Click Element.” If you intend to track form submissions, you can add the “Form Element” as well.

Variables

Create the Tag in Google Tag Manager

Now, you’ll create a new “Google Analytics: GA4 Event” Tag in your GTM container. For the “Event Name” field, add your own custom event name. The name is entirely up to you, but we recommend following the convention established by GA4 Recommended events, using lowercase characters with an underscore.

Under Triggering, select the Trigger you created in the previous step. Note that if you want to create the Tag first and then the Trigger, that’s fine too. Just make sure to hop back into your tag to set up the correct Trigger to fire.

Create the tag

Once you save your tag, you can proceed to preview your changes and then publish them to your live site.

If you want to take it a step further, you can look into adding Custom Dimensions and Metrics for your Custom Event.

Important Tip! When you create a “Google Analytics: GA4 Event” in GTM, you do NOT need to manually add that same Custom Event in the GA4 admin. (In fact, if you do, it will double count the data your tag collects.) GTM automatically populates custom events to GA4. Within 24-48 hours they will be visible in your reports. To preview events before they are visible in your reports, check out the Realtime View.

And That’s It

This process has allowed us to provide more robust and useful data to our clients, which, in turn, helps inform and improve our collective marketing efforts.

Tell us about your project.

If the transition from UA to GA4 has been a bumpy ride, please feel free to reach out. We’d love to help you understand where your users are currently engaging with your website and what you can do to increase it.