How to Use dataLayer to Fire GA4 Custom Events via Google Tag Manager

Table of Contents

1. Introduction
2. Why Use dataLayer for GA4?
3. Prerequisites
4. Goal
5. Create Triggers at GTM
6. Create DataLayer Variable
7. Create Google Analytics GA4 Event
8. Choose the Triggering for GA4 Event
9. Publish or Preview the GTM Changes
10. Verify the Code
11. Verify at GA4 UI
12. How About BigQuery?
13. Conclusion

Introduction

This page shows an example of how to set up GA4 custom events for learning purposes. Please be aware that Google Universal Analytics will no longer process new data beginning July 1, 2023. You'll need to switch to a Google Analytics 4 Property.

Why Use dataLayer for GA4?

GA4 has different ways to fire events. Enhanced measurement events are built-in events that can be enabled via options. Recommended events won't send automatically but require some configuration or manual setup. Now, if the events you want to fire don't fit either of these scenarios, you can create custom events and send them to GA4. You can use gtag or dataLayer to send custom events.

This blog will focus on and demonstrate how to use dataLayer to fire custom events to GA4.

Prerequisites

This blog assumes the following tasks are already done on your site:

• You have Google Tag Manager already configured for GA4.
• Your website has loaded the GTM script.
• Your Google Analytics has been linked to BigQuery.

Goal

The goal is to fire the following dataLayer events. Assume you have a contact form on your home page and you want to track this data in GA4. For testing purposes, we'll fire the events below from the console. Once we fire the events, we'll see how they appear in the browser, how to view them in the GA4 UI, and how the data flows into BigQuery.

// we want to fire this event when the user clicks the submit contact form button.
dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home"});

If you just run the above JavaScript in the console, nothing will happen until you finish the following setup at GTM.

Create Triggers at GTM

In GTM, click Triggers > Custom Events, and enter the event name as contact_lead.

Create DataLayer Variable

If you look at the above dataLayer, you can see there are two fields: email and page. We'll need to configure the dataLayer variables so that running the above dataLayer push will include the email and page fields.

In GTM, click Variables -> User-Defined Variables, and create 2 dataLayer variables as shown below.

Create Google Analytics GA4 Event

Once you've created the Triggers and Variables, you can create a new GA4 Event tag. Click Tags > New > Google Analytics: GA4 Event. Here, we'll enter the event name as contact_lead and also add 2 Event Parameters. Now the configuration to run the above JavaScript code is ready.

Choose the Triggering for GA4 Event

Now, the last part is to add the trigger — specifically, when the above event should fire. So far we've set it to all custom events, but you can filter by class or ID.

Publish or Preview the GTM Changes

If you don't want to publish your GTM changes right away, you can preview and test the settings to see if you can fire the events with GA4.

Verify the Code

Run the code below in the browser console window to test.

After running the above code, take a look at the browser's network tab. You should see some requests starting with collect?v=2... — this is the GA4 request.

As you can see, the GA4 request includes the email and page key-value pairs. Without the GTM setup, you won't see this request fire. Without the dataLayer variables, you won't see the email and page included in the payload either.

You can test by running the following JavaScript code in the console to see if GA4 will include this data or not. It will not include data1 unless you configure the dataLayer variable data1 in GTM.

dataLayer.push({"event" : "contact_lead", "email": "test@test.com", "page": "home", "data1": "other data"});

Verify at GA4 UI

You can verify the event by going to GA4's realtime section and checking the events section. As you can see, our contact_lead event displays on the page, and you will see the email and page key-value pairs as well.

How About BigQuery?

If you've connected GA4 with BigQuery, you should see something like analytics_111111 with an events_intraday_ table. That intraday table contains streaming data coming from GA4, and you can see our contact_lead event is being written to this table.

Conclusion

GA4 provides dataLayer and gtag to fire custom events. If using dataLayer, you will need to configure triggers and events in GTM. Following the correct steps should allow you to configure things quickly, but having many configurations in GTM might not be suitable for every company's requirements.