GTM: using ‘matches CSS selector’

Google Tag Manager is relatively straightforward. You define Triggers that fire Tags that say create events. Your Trigger definition is usually easy too. ‘I want to fire a Tag when a link is clicked on, and the link text is unique like ‘View more blue widgets”.

But what if it’s more complex? If the only thing you can identify an element isn’t part of that link? This was the problem I had. I wanted to define a Trigger event for a click to a link but the perfect way to identify that link click was the class of a¬†paragraph the element was inside.

In other words, I can’t define the Trigger using specific Click Text or Click Class, I have to use instead the Click Element where it matches an element above the link; in my case it was a paragraph Class which wrapped the link.

So here’s the HTML/CSS:

<p class=”moreJobs”><a href=”/search?q=quantity+surveyor&amp;loc=Whitehaven” class=”view-more-jobs” title=”View more jobs”>View more jobs</a></p>

and here’s the Trigger in GTM:

trigger1

Note that we’re matching not just the paragraph Class ‘moreJobs’ but specifically the link element within it – it wouldn’t work otherwise!

For more ways to use Matches CSS Selectors, read this: https://www.simoahava.com/gtm-tips/10-useful-css-selectors/