New GTM Trigger Condition: âMatches CSS Selectorâ

An exciting line was added into Google Tag Manager Release Notes in April: “DOM element variables may now use CSS selector”. The purpose of this new feature is to make targeting an element from your website for GTM tags as easy as picking a chocolate from your Cadbury selection box. However, the limitations are not to be ignored. This article will show you the usage of this feature and the testing results on the limitations.

Web Design 101: What are DOM elements and CSS selectors?

It is helpful to understand what CSS selectors are before you start using this new feature in GTM V2. However, please skip this and jump to the next section if you are already familiar with DOM and if you know perfectly well how to use CSS selectors.

DOM stands for Document Object Model, the structure of the web elements the browser creates when loading pages. CSS selectors allow you to select elements by using the tag names of the elements, the IDs or classes of the elements and the hierarchy relationship between the elements. Web designers or developers use the selected elements to add functions in the JavaScript files and add styles in CSS files.

If the above explanation is not helpful, imagine DOM being a family tree and the CSS selector is the pattern people use to describe the relationship between the family members. For example, the HTML is written as below:

The first element in this example is a <div>, of which the ID is ‘abraham’ and the class is ‘first-generation’. This element is the parent element of the second element, of which the ID is ‘isaac’ and the class is ‘second-generation’. Continue the logic: ‘isaac’ is the parent of ‘jacob’, who is the parent of ‘the-twelve’, which is a <ul> element and contains 13 children elements: an <h1> element and twelve <li> elements.

Now, how do you select the elements you want? Here are some basic CSS selectors that are frequently used:

- Use ‘#’ when selecting an element through its ID, e.g. “#abraham”

- Use ‘.’ when selecting an element through its class, e.g. “.first-generation”

- Use the element tag name in addition to the ID or class to target the exact element, e.g. “div.third-generation”

- Use “>” to indicate parent-child relationship of the element, e.g. “ul.the-twelve > li”, note this selector will select all 12 <li> elements within the <ul class=”the-twelve”> element (this selector is not supported in IE6)

You can find the selector of an element using the developer tools of the browser by right clicking onto the element and selecting ‘Inspect Element’ from the drop down menu. The HTML of the element will be highlighted in the “Elements” window of the developer tools.

Please note that most CSS3 selectors are not supported in some antique browsers. Microsoft’s website lists most CSS selectors and their availability for the main browsers:https://msdn.microsoft.com/en-us/library/hh781508%28v=vs.85%29.aspx#element_selectors

Also, W3C provides a list of the available CSS selectors, examples and details of which can be found here: http://www.w3.org/TR/css3-selectors/

Use CSS Selectors in GTM V2

Now you know how to select a web element via CSS selector, how do you use it in GTM V2? Let us use the “Abraham’s family tree” example from the last section. Suppose we would like to fire an event tag every time someone clicks on one of the twelve <li> elements. You can create a new trigger, select ‘Click’ as the event type and choose ‘Click Element’ ‘matches CSS selector’ ‘#jacob > .the-twelve >li’. Example as below:

What if you want to use the text content of the <h1> elements under <ul class="the-twelve"> as the category of this event tag? What if this text content is also useful for other tags in your container? You can now create a DOM element variable and choose “CSS selector” as the selection method. In V1, you can only use element ID when creating a DOM element macro. The value of the variable will be the text content of the CSS selector element unless you add an attribute name, in which case the value would be that of the attribute.

Example as below:

Now, when you configure the event tag, you may use this variable by selecting {{The 12 Tribes}} in the ‘Category’ field.

Further Testing & Limitations

I hope you are still with me, because the below two limitations of this feature are important: Firstly, if a DOM Element variable uses a CSS selector that selects multiple elements, the value returns the text content of the first matching element. For example, in the ‘The 12 Tribes’ DOM element, if we change the selector to “#jacob > .the-twelve > li”, the event category that uses this variable will be set to “Reuben” because “Reuben” is the text of the first matching <li>

Testing: The best way to test this is to push the DOM variable into the dataLayer and review the results in the console. Here I used “DOM CSS Selector” as the key when pushing the variable into the dataLayer. The variable matches all 12 elements, but only the first element was passed into the dataLayer:

Secondly, this function is not supported in IE7 and most CSS3 selectors are not supported in IE8. IE7 and IE8 both return “null” as the value of the DOM variable that uses unsupported CSS selectors. However, the site would not be more broken than it was because of this feature (yes, I assume all sites are broken for legacy IE regardless, it’s 2015 after all!).

Testing: One way of testing this feature in IE7 and IE8 is to look at the “Network tab” in the development tool of the browser. Check the “Request URL” results when the event is fired. To illustrate, I used CSS DOM selector in both “Event Category” and “Event Label” and, because IE7 and IE8 do not support this feature, both of the fields return a “null” result:

Final Words

Using “Matches CSS Selector” gives you a lot more flexibility when tagging the elements in your website, but this is not a “one size fits all”. You should always analyse your HTML structure and choose the most efficient method to target the correct elements in your website.

It is also necessary to consider your audience before you start considering using this feature. For example, if more than 20% of your audience use IE8 or lower IE versions, then DO NOT use this feature.

If you need help with any of the new features of GTM V2 or GTM in general, please contact one of our GTM ninjas. We live to serve.

To view the blog written by Yikai Wang on Periscopix's website, please click here.