Custom GTM Trigger on HTML Element Impression

var hasDeals = /products/.test(location.href);

Here you should declare the footprint that defines all the pages containing your element (in this example – all banners are in the product page, so we search for the footprint in the URL).

You can use any footprint (for example – similar class, id, or even some attribute that you know it’s on all pages with your element but not in the rest of your website. You can use querySelectorAll for this).

It’s important to define this variable as boolean, so if you are using CSS Selector make sure you use document.querySelectorAll('{{CSS selector}}').length, as it will returns directly 0 (false) when your element is not existing and you can use !hasDeal to turn it to true.

var element = document.querySelector('.deal-offer');

This part is pretty straightforward – you just need to declare the element you want to track. At this example I am using querySelector for element with class ‘deal-offer’, but you could use getElementsByClassName('deal-offer')[0] as well.

In any case – you just need to edit this line according your needs.

var elVisible = false;
var eventPushed = false;
var scrolls = 0;

Here you just declare some variables for the script to work. The elVisible is the trigger when the element is visible, the eventPushed is to assure once the element was visible and the push to Google Tag Manager was done – the script stops. The scrolls is the most interesting and completely optional part of the script. Check below to see what it does

if(hasDeals>0) {  
	document.addEventListener("scroll", function() {scrolls+=1; if(scrolls%7 === 0) {isScrolledIntoView(element);}} );
}

This part of the script attach Scroll Listener, so the script checks on every scroll if the element becomes visible. The unique part of the script is the if declaration. It’s completely optional, and honestly I tried it for the first time as a way to improve the performance of the script as much as I can.

The idea – instead of firing the function for checking the element on every detected scroll event it fires it on every 7th scroll. I have no information if this really improves the performance, but it looked neat, so I just left it there. 7 is the best number I tried that works well even on the fastest scrolling.

You can adjust the number or remove that part altogether.

function isScrolledIntoView(el) {
...
      dataLayer.push({'event': 'dealVisible'});
      eventPushed = true;
    }
}

This is the main function that makes the script works. It checks if the element is completely visible. When it is – it fires a dataLayer.push with event (the actuall GTM trigger) and also sets the eventPushed = true;, so the script stops listening.