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

Posted by:

Issam Arab Avatar

Issam Arab

|

On:

|

, , , ,
Table of Contents

Custom engagement tracking in GTM and data layer for media and digital advertising 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.

    TAGLAB Web Signup

    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.

    JavaScript event listener to push dataLayer variables

    
<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.

    Setting a data layer variable in GTM based on event variable pushed into the dataLayer

    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.

    custom event trigger in GTM using the dataLayer variable event and the value "engagement"

    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.

    Latest Posts