Simo Ahava Gets Under the Hood with Google Tag Manager Triggers

If it’s Simo, you know you can count on expert insight and valuable tips on Google Tag Manager and Google Analytics, delivered with unique depth and clarity. Simo recently joined Feras and Eric for a 30-minute webinar – listen to hear Simo’s perspectives pageview and DOM ready triggers, All Elements and Just Click triggers, testing in Google Tag Manager and Google Analytics, and more.

Don’t forget to register for our upcoming webinars in the Analytics Breakthrough series.

[videoembed url=”https://youtu.be/TYfVViVQYnM”]

Resources recommended by Simo:

CSS SELECTORS

My guide: https://www.simoahava.com/analytics/matches-css-selector-operator-in-gtm-triggers/
Great reference: https://www.w3schools.com/cssref/css_selectors.asp

JAVASCRIPT

Learning portal: www.codecademy.com
DOM tutorial: https://www.w3schools.com/js/js_htmldom.asp

GTM

Google’s own Fundamentals Course: https://analyticsacademy.withgoogle.com/course/5
My #GTMTips posts: https://www.simoahava.com/category/gtm-tips/

Q&A with Simo

Is there a way to test, whether a trigger works on all the pages we want except testing it on every single page which is possible?
Not via GTM, no. There’s currently no surefire way to do this. Typically when creating new tracking points, sending the data first to a test GA property (if tracking to Google Analytics) would let you analyze whether or not hits are coming in steadily from the pages your site visitors frequent. Other than that, testing with a sample of your site pages should be enough to give you a good idea whether or not the triggers work. Getting some diagnostic tools into GTM (which triggers fired on which pages, and which did not) would be sweet, definitely!

Would you recommend pushing data layer variables with custom html tag or had-coding it on the HTML of the site? an example would be for a membership site, after user log ins should the data layer already exist or be pushed.
Both are valid options. dataLayer isn’t something that you setup once on the page, and then leave it be. It’s a message bus for all actions on the page. Any business critical, purely semantic information (such as Ecommerce transaction details) I’d always put into the page template before the container snippet, so that this information would be available to the very first tags that fire on the page. However, I would use a Custom HTML Tag to push information into dataLayer that isn’t yet available at page load – such as when I want to create a custom event listener for changes in form fields, for example.

Where can I find a reference of the dom properties GTM can use. I always struggle with the dot notation. For example, myForm.getElementsByTagName?
Good JavaScript resources are e.g. www.codecademy.com and https://www.w3schools.com/js/js_htmldom.asp. There’s also the great “DOM Enlightenment” book by Cody Lindley, which I always recommend as required reading for JavaScript in the web browser. Another wonderful reading resource is Professional JavaScript for Web Developers. It covers everything you need to know. JavaScript is a living language, so books aren’t always that useful, especially with big updates to the JS standard in the works. There are plenty of great online resources for all DOM questions, too – Google search and StackOverflow being a great combination.

What is the best way to fire triggers on overlays such as video modals?
If you mean track the event of a modal opening, there are a number of options. If the modal opens with a click, you can always track the click with a Click Trigger. If the modal opens based on some other user interaction, such as successful submission of a form, you will need your developers to add a custom dataLayer event to the JavaScript which is invoked upon a successful modal open. A Custom Event Trigger can then be used to fire your tags based on this dataLayer event.

If you mean tracking interactions that take place within the modal, if the modal is part of the normal page DOM, you can track any interactions within without any issues. However, if the modal is an iframe from another domain (e.g. YouTube video) or an embedded object, you will need to go to the support of the embedded service and look for details on how to use their APIs for tracking interactions. Most of the popular embeddable services have some sort of JavaScript API that lets you track interactions, but it’s definitely not trivial to setup and requires fairly good JavaScript skills. For YouTube, there are plenty of great articles online on how to do video tracking with Google Tag Manager.

You also mentioned a CSS technique for propagating out from an All Elements trigger, if there’s something to share on that.

Actually, I just noticed I DON’T have an article about this 🙂 I’ll put one in the works! But here’s a Custom JS Variable that returns the desired element IF it’s an ancestor of the clicked element:

function() {
  // Point this ID to the element you want to grab
  var targetElementId = 'someElementId';

  var clickedElement = {{Click Element}};

  while (clickedElement.id !== targetElementId || clickedElement.tagName !== 'BODY') {
    clickedElement = clickedElement.parentElement;
  }

  return clickedElement.id === targetElementId ? clickedElement || {{Click Element}};
}

This JS walks up the DOM until it finds an element with the ID you specify in targetElementId. It then returns this particular element. If no such element is found, the variable simply returns the original clicked element.