#GTMTips: Use Wildcard CSS Selectors With All Elements Triggers

When using the All Elements trigger in Google Tag Manager, it’s easy to overlook the fact that it captures all clicks on the page. It’s also brutally accurate - it captures clicks on the exact element that was below the mouse button when a click happened. This means that when working with the All Elements trigger, you need to be more careful when identifying the correct element you actually want to track clicks on.

In this short guide, I’ll show you a simple trick to make sure you always capture clicks on a given element, regardless of what the surrounding HTML structure looks like. All this requires is a simple tweak to the CSS selector you use in the trigger.

Tip 76: Use the wildcard CSS selector with All Elements triggers

The wildcard selector literally means any descendant of the preceding selector. So given a selector like div#nav * would match any elements that are nested with a <div id="nav"> element, but not the <div> element itself.

Let me show you a useful example.

<div id="container">
  <div id="header">
    <div id="logo">
      <img src="/images/logo.png" />
      <span>Back home</span>
    </a>
  </div>
</div>

In this scenario, let’s say you want to track clicks on <div id="logo">, regardless of whether the click falls on the image element or the span.

If you try to do it with an All Elements trigger that has either of the following conditions, it won’t work:

1. Click ID equals logo

2. Click Element matches CSS selector div#logo

Why not? Because the click will not land on the <div>. Rather, it will land on one of the nested elements, because they are block-level elements that actually fill the wrapping <div> completely. Thus there’s no area left in the <div> itself that could be clicked!

So, you need to instruct the trigger to track clicks on the <div> itself (this is a good precaution in case there’s additional padding that does introduce surface area to the <div>, too) and any of its nested elements. This is where the wildcard selector comes in handy.

The selector you’ll need to use looks like this:

Click Element matches CSS selector div#logo, div#logo *

This literally means:

Track clicks that land on a <div id="logo"> element, or any element nested within this <div>.

I’ll go so far as to say that whenever you use the All Elements trigger, always use this element, element * syntax. That way you’ll always be able to track clicks on the appropriate element, regardless of the nested HTML structure.

The only edge cases I can think of is if you really want to track clicks on the borders of the wrapping element alone and not anything nested within, but I’m having trouble justifying this use case in a real-world scenario. But in case you do want to track clicks specifically on a wrapping element, just drop the wildcard selector and simply use div#logo as the only selector.