Google AnalyticsGoogle Tag ManagerHow To

Send Events to GA4 with GTM custom event

The new Google Analytics 4 is event-driven, so the data you see in reports comes from events that are triggered by interactions a user has with your web/app. GA4 has built-in events that you should take advantage of before going to custom events, mainly because you don’t have to code anything to use most of these events and they will have better integration and support for reporting and data analysis. However, if you can’t use any of the automatic, enhanced, and/or recommended events you can implement your own custom event. Here I will show an implementation of GTM custom event sending data to GA4 for the KnowYourPixel blog.

Important: GA4 has collection and configuration limits. So if you are mapping all events in your web/app, make sure that you are within your quota.

Use-case: reactions to GA4 reports

At the end of each post, we have a reaction box where users click on an Emoji, and the counter of the clicked reaction changes. I would like to track these clicks as events to measure interactions with posts.

Screenshot of Reaction Box at the end of the post
Screenshot of Reaction Box at the end of the post

Javascript: dataLayer configuration

For this use-case, I’ve decided to code the dataLayer inside the WordPress theme‘s javascript function that controls the interaction with the reaction boxes. If you are already using GTM you know it uses dataLayer to retrieve and save data and we can use it to leverage our custom events.

Here, whenever a user clicks on the reaction box, my function pushes an event called ‘reaction’ to dataLayer and sets the attribute dtL_reaction with the reaction type, status, and name. These values are set in the javascript code above this dataLayer implementation.

// Above this is the reaction js function of my WP Theme.

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'reaction',
  'dtL_reaction': {
    'type': reactionType,
    'status': reactionStatus,
    'name': reactionName
  }
});

Variables: send dataLayer attributes to GTM

Now I need to tell GTM to catch these attributes when my code pushes them to dataLayer. GTM does that with variables. On GTM you can do that by going to Variables at the left side menu and click on the New button in the User-Defined Variables section.

GTM Custom Event: Screenshot of GTM's Variables
Screenshot of GTM’s Variables

After you click the New button, GTM will show you a list of variable types where you can choose from. For our use-case we gonna need Data Layer Variable.

GTM Custom Event: Screenshot of GTM's Variable Type List
Screenshot of GTM’s Variable Type List

Now we configure GTM to fetch the nested attribute ‘type’ from ‘dtL_reaction’ and assign to the variable dtL_reactionType. As a result, this variable can be used elsewhere in GTM with {{dtL_reactionType}}.

GTM Custom Event: Screenshot of GTM's Variable Creation
Screenshot of GTM’s Variable Creation

After create all three variables (dtL_reactionType, dtL_reactionName and dtL_reactionStatus) we need to configure the trigger that will activate our GTM tag.

Triggers: GTM custom event

Triggers are listeners that will fire a tag when a specific event happens on your website/app. So in this next step, we will create a trigger that will listen to a custom event ‘reaction’ and fire an event tag on our GA4 sending data from our previous variables. On GTM you can do that by going to Triggers at the left side menu and click on the New button in the Triggers section.

GTM Custom Event: Screenshot of GTM's Triggers
Screenshot of GTM’s Triggers

There is a variety of trigger types to choose from, but for our use-case, we will go with Custom Event. GTM has a list of standard methods to track events (e.g. form submission, video play), and everything that is not handled by these should be tracked by using the Custom Event trigger.

GTM Custom Event: Screenshot of GTM's Trigger Types
Screenshot of GTM’s Trigger Types

In the next screen, we will configure our trigger. For this use-case, only the Event’s name is necessary. Since we are pushing an event to Data Layer called ‘reaction’, we need to tell GTM that this is the name it should look for. In addition, it is possible to filter out custom events and trigger them only when certain conditions are met. However, in our’s example scope there is no need. After that, set the Trigger’s name and save it.

GTM Custom Event: Screenshot of GTM's Trigger Configuration
Screenshot of GTM’s Trigger Configuration

Tag: GA4 Event

Finally, the last step in the configuration is the firing Tag. This is the pixel (tracking code) that GTM fires after the trigger is activated. GTM has a bunch of pre-built tags on their portfolio and even more types on their community template gallery. On GTM you can add one by going to Tags at the left side menu and click on the New button in the Tags section.

Screenshot of GTM's Tags
Screenshot of GTM’s Tags

In the tag configuration screen, you can set the name, the type, and which triggers fires the tag. For this use-case, I’ve selected the GA4 Event. After choosing this option, GTM will show the fields where you configure your GA4 Event Tag. Alongside the ‘Event name’, I will send parameters to differentiate the events in the GA4 reports. The values for the parameters will be the variables we set before in GTM from the Data Layer.

Screenshot of GTM's Tags - GA4 Event configuration
Screenshot of GTM’s Tags – GA4 Event configuration

All set, now it is time to debug to check if everythin went ok and is good to go live.

Debug: test, test, test

Google Tag Manager has a preview feature where you can debug your tags and configurations. It’s a good practice to check things before go-live and understand what’s happening under the hood. Just click the Preview button on the top right and add the URL you want to check.

Screenshot of GTM's Preview Mode
Screenshot of GTM’s Preview Mode

GTM will open a new tab and shows which tags are firing while you interact with the website. After the URL loaded I’ve clicked on a reaction box to see if my configuration is correct.

Screenshot of GTM's Preview Mode Summary
Screenshot of GTM’s Preview Mode Summary

As you can see in the previous image, you will find on the left side the list of events that are happening while your site loads and/or there is interaction. Additionally, you can see if some API call was made to the Data Layer and which tags were, or not, fired in the process. In this example, the Data Layer pushed an event called ‘reaction’ and some attributes to be consumed by GTM Variables after I’ve clicked on the reaction box. GTM Custom Event Trigger has listened to this push event and fired the GA4 Event Tag. You can check the details of this tag by clicking on it.

Publish: go-live!

After testing it, your GTM configuration is ready for publication. Just hit the Submit button on the top right. Fill in your submission configuration and click on the Publish button.

Screenshot of GTM's Publish Configuration
Screenshot of GTM’s Publish Configuration

All set! You can check if your GTM custom event is being sent to GA4 reports by going to the real-time feature on Google Analytics. Enjoy 🙂

What's your reaction?

Excited
6
Happy
3
In Love
3
Not Sure
0
Silly
0
Davi Candido
Data Scientist and Data Engineer at GrowthHackers

Leave a reply

Your email address will not be published. Required fields are marked *

0 %