Be honest, can you think of anything that’s more unfair than this:
A new Google Tag Manager feature, published at 02:07 AM my time, and with an easter egg hunt involved?! Of course it was the infuriating Charles Farina who found the new feature and claimed the prize. Curses! (Just kidding Charles, you’re still awesome.)
Anyway, there’s a new GTM feature in town, and oh boy, this time it’s a big’un! Without further ado, allow me to introduce a new Trigger operator - the matches CSS selector:
It’s modus operandi is quite simple. You create a Trigger condition, where an HTML element is checked against a CSS selector. If the CSS selector applies to the HTML element, the condition passes.
The Simmer Newsletter
Follow this link to subscribe to the Simmer Newsletter! Stay up-to-date with the latest content from Simo Ahava and the Simmer online course platform.
CSS selectors and GTM
CSS selectors are patterns that you check for in any given HTML element. Traditionally, CSS selectors have been used to modify styles of the given elements. Nowadays, we can actually use them to target HTML elements for other purposes as well, especially since frameworks such as jQuery, which target elements using CSS selectors, have become ubiquitous. There are also the vanilla JavaScript querySelector(), querySelectorAll() and matches() DOM methods that allow you to pick elements based on CSS selectors.
For a nice list of currently supported CSS3 selectors, check out the W3Schools guide: CSS Selector Reference.
Here are some CSS selectors you might find very useful. These are all auto-event tracking related, because the possibilities of auto-event tracking just opened up in a completely new way with the introduction of this new Trigger operator.
Instead of targeting Click ID or Form Class, you must now always provide an HTML element to the Trigger condition. So, you’ll need to use Click Element or Form Element (they’re the same thing) to pattern-match against your auto-event target element.
| Selector | Description |
|---|---|
| .thisclass | Matches if element has class “thisclass” |
| .thisclass.thatclass | Matches if element has class “thisclass” and class “thatclass” |
| #thisid | Matches if element has ID “thisid” |
| #main .navlink | Matches if element has class “navlink” and is a descendant of an element with the ID “main” |
| div#main > .navlink | Matches if element has class “navlink” and is the direct child of a DIV element with the ID “main” |
| :checked | Matches if element is checked (radio button or checkbox) |
| [data-title*="chairman mao”] | Matches if element has attribute “data-title” with the string “chairman mao” somewhere in its value |
| a[href$=”.pdf”] | Matches if element is a link (A) with a HREF attribute that ends with “.pdf” |
| .contactmail:only-child | Matches if element has class “contactmail” and is the only child of its parent |
As you can see, you can do pretty creative stuff with it. The most significant asset is, by far, the chance to see ancestral relationships. You can now check if the element that was clicked or submitted is the child or direct descendant of any given element. What an ingenious way to fire tags only on clicks under the main navigation, for example!
Remember that you can add multiple selectors just as with CSS by using a comma between the selectors:
Click Element - matches CSS selector - video,video *
This condition would match clicks on a HTML5 <video> element or any of its descendants.
You’re limited by CSS3, mainly. You can’t do descendant checks, so you can’t have a CSS selector which only matches an element if it has a specific element as its child. You’ll still need JavaScript for this, unfortunately.
Luckily, CSS4 is already pretty far in its draft stages. It brings a slew of amazing new features, which will only make this CSS selector Trigger even more powerful.
Technical details
Just to wrap this post up, here’s a technical description of the new operator (thanks Brian Kuhn!). There’s nothing revolutionary about it, proving how GTM still leverages well-founded practices rather than inventing the wheel again each time.
The operator uses the matches() method with variations depending on which browser you’re using. The matches() method lets you check if a given element matches against a CSS selector:
element.matches('.thisclass');
The code above would evaluate to true if the given element has the class “thisclass”.
matches() isn’t supported by all browsers, and e.g. Internet Explorer only supports it at version 9.0. For antiquated browsers, GTM falls back to checking each node that matches a given selector, and it returns true if the given element is among these nodes.