{"id":107433,"date":"2025-02-24T16:33:35","date_gmt":"2025-02-24T16:33:35","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/gtmtips-use-wildcard-css-selectors-with-all-elements-triggers\/"},"modified":"2025-02-24T16:33:35","modified_gmt":"2025-02-24T16:33:35","slug":"gtmtips-use-wildcard-css-selectors-with-all-elements-triggers","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=107433","title":{"rendered":"#GTMTips: Use Wildcard CSS Selectors With All Elements Triggers"},"content":{"rendered":"


\n<\/p>\n

\n

When using the All Elements<\/strong> trigger<\/a> in Google Tag Manager<\/a>, it\u2019s easy to overlook the fact that it captures all<\/strong> clicks on the page. It\u2019s also brutally accurate – it captures clicks on the exact<\/strong> 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<\/a> you actually want to track clicks on.<\/p>\n

In this short guide, I\u2019ll 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<\/a> you use in the trigger.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Tip 76: Use the wildcard CSS selector with All Elements triggers<\/h2>\n
\n

<\/p>\n

\"Use<\/p>\n

<\/a><\/p>\n<\/div>\n

The wildcard selector literally means any descendant of the preceding selector<\/strong>. So given a selector like div#nav *<\/code> would match any elements that are nested with a <\/p>\n

element, but not the <\/p>\n
element itself.<\/p>\n

Let me show you a useful example.<\/p>\n

\n
div id<\/span>=\"container\"<\/span>>\n  div id<\/span>=\"header\"<\/span>>\n    div id<\/span>=\"logo\"<\/span>>\n      img src<\/span>=\"\/images\/logo.png\"<\/span> \/>\n      span>Back homespan<\/span>>\n    a<\/span>>\n  div<\/span>>\ndiv<\/span>><\/code><\/pre>\n<\/div>\n
In this scenario, let\u2019s say you want to track clicks on <\/p>\n
, regardless of whether the click falls on the image element or the span<\/code>.<\/p>\n
If you try to do it with an All Elements trigger that has either of the following conditions, it won\u2019t work:<\/p>\n
    \n
  1. \n
    Click ID equals<\/strong> logo<\/code><\/p>\n<\/li>\n
  2. \n
    Click Element matches CSS selector<\/strong> div#logo<\/code><\/p>\n<\/li>\n<\/ol>\n
    Why not? Because the click will not land on the <\/p>\n
    . Rather, it will land on one of the nested elements, because they are block-level elements that actually fill the wrapping <\/p>\n
     completely. Thus there\u2019s no area left in the <\/p>\n
     itself that could<\/em> be clicked!<\/p>\n
    So, you need to instruct the trigger to track clicks on the <\/p>\n
     itself (this is a good precaution in case there\u2019s additional padding that does introduce surface area to the <\/p>\n
    , too) and any of its nested elements<\/strong>. This is where the wildcard selector comes in handy.<\/p>\n
    The selector you\u2019ll need to use looks like this:<\/p>\n
    Click Element matches CSS selector<\/strong> div#logo, div#logo *<\/code><\/p>\n
    This literally means:<\/p>\n
    \n
    Track clicks that land on a <\/p>\n
     element, or any element nested within this <\/p>\n
    .<\/p>\n
    I\u2019ll go so far as to say that whenever you use the All Elements trigger, always use this element, element *<\/code> syntax. That way you\u2019ll always be able to track clicks on the appropriate element, regardless of the nested HTML structure.<\/p>\n
    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\u2019m having trouble justifying this use case in a real-world scenario. But in case you do<\/strong> want to track clicks specifically on a wrapping element, just drop the wildcard selector and simply use div#logo<\/code> as the only selector.<\/p>\n<\/p><\/div>\n
              <\/code><\/strong><\/div>\n