Custom engagement events tracking with GTM & Data Layer for media conversions

Custom engagement tracking events and engagement conversions on your website or landing pages is crucial for optimizing digital marketing strategies and increasing conversions. By tracking user engagements with digital content, businesses can target engaged users with tailored remarketing campaigns, and identify which specific engagements lead to the highest levels of engagement or conversion, allowing for optimization of marketing spend.

This is a step-by-step guide to implement custom engagement tracking that can be used to trigger any advertising technology and media conversion pixel or script using Google Tag Manager & the Digital Data Layer.

A prerequisite to this guide is to have a Google Tag Manager container access to the GTM instance installed on your website, and to have the dataLayer already declared on the website.

Implement custom event listeners

The first step to trigger a custom engagement tracking event is to set a JavaScript listener that will identify the interactions that we will consider as engagements. For this tutorial we will consider any of the following events an engagement to trigger our engagement event: First scroll, first click, or if the user will spend 20 seconds on the page. Whichever will happen first will trigger the engagement tracking event.

To set this listener we will be going to deploy a custom HTML tag through GTM on all pages by Clicking on Tags > New > Custom HTML. Give your new tag an appropriate name, paste the below provided script, set it to trigger on all pages and save your tag.

The script will push two variables to the dataLayer: event = engagement and engagementType that will be equal to either “scroll”, “click”, or “30seconds”. We will use the event = engagement to trigger engagement tracking conversion scripts, and it will be possible to push further the engagementType if needed for additional information on the interaction that triggered the event for example in Google Analytics 4 as well.

<script>
var engaged = false;
var timeout;

function engageSession(eventType) {
  if (!engaged) {
    engaged = true;
    clearTimeout(timeout);
    dataLayer.push({'event': 'engagement', 'engagementType': eventType});
  }
}

document.addEventListener("click", function() { engageSession("click"); });
document.addEventListener("scroll", function() { engageSession("scroll"); });

timeout = setTimeout(function() { engageSession("30seconds"); }, 20000);
</script>

Publish the event and test if it is working. To learn how to debug your digital data layer, check this quick guide here.

Implementing a custom engagement event variable

Now you need to head to your variables section in GTM so be able to intercept the dataLayer variable “event” pushed through the JavaScript event listner and verify if it contains the value “engagement”.

To do that click on Variables in the GTM left menu > New (under User-Defined Variables) > Data Layer Variable. Give it an appropriate name as shown below, input “event” in the Data Layer Variable name field to be able to read values from the dataLayer.event and save it.

Implementing a custom engagement event trigger

Now head to Triggers section > New > Custom Event and give it an appropriate event as shown below.

Set the event name to match a regex and input “.*”.

Set it to trigger on “Some custom events”

Choose the data layer variable configured before, and set it to be equal to “engagement”.

Save the new trigger.

Set the custom engagement event trigger to fire a media tag or conversion pixel

Head to the tags section in GTM and create a new tag. You can create a new custom HTML tag and insert the code provided by the advertising, media, or digital marketing vendor; Apply the newly created trigger to this tag or choose any tag template form the GTM available tags.

Preview your implementation and publish your container. It is important to audit and verify if your new custom engagement conversion is working properly as supposed or not by validating the new tag deployment before running any media investments. TAGLAB is a tag monitoring software that can help you to assure the quality of your marketing and analytics implementations.

Google Analytics 4 Engagements

Google Analytics 4 can track engaged sessions by default. Learn more here about GA4 built-in events.

You can still track your own custom events in the naming convention and mechanism that you prefer by using the above configurations to trigger a GA4 event. Additionally you can configure the dataLayer variable engagement Type to pass in the value “scroll”, “click”, “30seconds” as an event parameter.

Frequently Asked Questions

What is custom engagement tracking?

Custom engagement tracking involves monitoring specific user interactions with digital content, such as clicks, scrolls, or time spent on a page, to gather data that helps optimize marketing strategies and increase conversions.

Why is custom engagement tracking important?

Custom engagement tracking is important because it allows businesses to understand which specific interactions lead to higher engagement or conversions, enabling them to optimize their marketing spend and target engaged users with tailored campaigns.

How do you implement custom engagement tracking with Google Tag Manager?

To implement custom engagement tracking with Google Tag Manager, set up JavaScript event listeners to identify user interactions, create custom variables and triggers in GTM, and configure tags to fire based on these triggers. Detailed steps include adding scripts to track clicks, scrolls, and time spent on a page, and using dataLayer variables to handle event data.

What are engagement conversions?

Engagement conversions are specific user interactions that have been tracked and identified as valuable, such as clicking a link, scrolling down a page, or spending a certain amount of time on a website. These conversions help businesses measure and optimize their marketing strategies.

What is a dataLayer in Google Tag Manager?

The dataLayer is a JavaScript object used in Google Tag Manager to pass information from your website to GTM. It stores data that can be used by GTM tags, triggers, and variables, facilitating more accurate and organized data collection.

How do you create a custom engagement event trigger in GTM?

To create a custom engagement event trigger in GTM, define a custom event variable to capture engagement data, then set up a trigger to fire when this variable matches certain conditions. Configure the trigger to activate tags that track or respond to the engagement event.

How can you verify that custom engagement tracking is working correctly?

To verify that custom engagement tracking is working correctly, use GTM’s Preview mode to test your setup and ensure tags fire as expected. Additionally, use debugging tools like the GTM Tag Assistant and check analytics reports to confirm that engagement events are being recorded accurately.

What are some common use cases for custom engagement tracking?

Common use cases for custom engagement tracking include monitoring user interactions with key content areas, tracking form submissions, measuring scroll depth, recording video plays, and identifying engaged sessions for remarketing purposes.

How can Google Analytics 4 track custom engagement events?

Google Analytics 4 can track custom engagement events by using event parameters defined in the dataLayer. Custom events can be configured in GA4 by pushing event data from GTM to GA4, allowing for detailed tracking and analysis of specific user interactions.

What is a tag snippet?

A tag snippet is a small piece of code added to a website’s HTML to track user interactions and collect data for analytics and marketing purposes. These snippets enable businesses to monitor website performance, understand user behavior, and measure the effectiveness of their marketing campaigns.