Create a CSS path variable for the click element – News Couple

Create a CSS path variable for the click element

At some point in the turbulent year of 2020, you may have been surprised when looking at the preview interface of Google Tag Manager. No, I’m not talking about the new preview mode interface.

Instead, indicate how to use Click an item And form element Inline variables will now display a file CSS path Series instead of expected [object HTMLDivElement] (Or what’s equivalent to it).

There was good And bad in this update.

The Hassan The thing was, the Click Element variant was now much more useful in preview mode. Honestly, there’s not much you can do with the object element string in terms of debugging. Being able to see the CSS path gives us more clues on how to access the clicked element.

The Bad The thing is that the preview mode output is very misleading. It now claims that Click Element yields a Series and CSS path. Neither of them does. still yields An HTML element that you can use with CSS selector predicates and custom DOM traversal scripts.

just repeat: behavior Click the item Not change. The only thing that has changed is how the Click Element . changes an offer in the preview interface.

I would have expected Google to keep the Click Element as it was and instead introduce a new internal variable called Click CSS Path or something. This would have avoided ambiguity while still adding value to the variables in the container.

Well, I want to show you how You are You can create your own CSS path variable. The variable uses the same method that GTM uses to define a CSS path, so it should always match what you see in the preview interface.


Simmer . Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!

CSS path variable

In Google Tag Manager, go to Variables and click new button to create file User defined variable.

new variable

Next, choose custom javascript variable as a species.

Unfortunately, custom templates do not (yet) support DOM traversal or manipulation of HTML elements, so you need to use a custom JavaScript variable for this.

Copy and paste the following into the code editor:

  // Build a CSS path for the clicked element
  var originalEl = Click Element;
  var el = originalEl;
  if (el instanceof Node) 
    // Build the list of elements along the path
    var elList = [];
      if (el instanceof Element) 
        var classString = el.classList ? []'.') : '';
        var elementName = (el.tagName ? el.tagName.toLowerCase() : '') + 
            (classString ? '.' + classString : '') + 
            ( ? '#' + : '');
        if (elementName) elList.unshift(elementName);
      el = el.parentNode
     while (el != null);
    // Get the stringified element object name
    var objString = originalEl.toString().match(/[object (w+)]/);
    var elementType = objString ? objString[1] : originalEl.toString();
    var cssString = elList.join(' > ');
    // Return the CSS path as a string, prefixed with the element object name
    return cssString ? elementType + ': ' + cssString : elementType;

Save it and you are good to go!

The script first builds the list of items on the click path, all the way to the top node in the document (html).

It does this by checking what tagName of the element, then adding class modifiers and/or identifiers to it. Then it moves to the next element at the top of the DOM tree.

Once the list is created, the script finally takes the name of the computed element object itself (eg HTMLDivElement) and adds that as a prefix to the CSS path string.

A sample script’s return value could be something like this:

'HTMLDivElement: html > body > div#blog > div.hasCoverMetaIn#main'

This means that the item clicked is a file HTMLDivElement (<div>), with one class of hasCoverMetaIn and the identifier main. The element has three ancestors: a <div id="blog">, The <body> And finally a file <html> the knot itself.


What is the use of this script? Good question!

It’s not very useful in the launcher, you can use a file Matches CSS selector Predicate for a more robust approach to selecting items in the DOM tree.

However, it can be useful to send metadata to the analytics tool of choice with the click event. Sometimes sending a click path will help reveal missing pieces of information that you might not have thought of sending in the first place.

For example, you may discover that your click trigger was too lenient, collect clicks from items you never intended. You can check the CSS path to see which “rogue elements” receive clicks, and then you can calibrate the click operator itself to be more accurate.

Also, I miss writing articles like this, as I look at some of the neat customizations that can be achieved with JavaScript.

I hope you enjoyed this article! If you can think of a use case for a CSS path variable, please let us know in the comments!

Source link

Related Articles

Leave a Reply

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

Back to top button