#GTMTips: Use Wildcard CSS selectors with all element triggers – News Couple

#GTMTips: Use Wildcard CSS selectors with all element triggers

When using a file all items In Google Tag Manager, it’s easy to overlook the fact that it captures them everyone Clicks on the page. It’s also very accurate – it captures clicks on a file exactly The item that was below the mouse button when a click occurred. This means that when working with the All Elements launcher, you have to be extra careful when selecting the correct element that 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 particular element, no matter what the surrounding HTML structure looks like. All of this requires a simple tweak to the CSS selector you’re using in the launcher.


Simmer . Newsletter

Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava right in your inbox!

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

The wildcard delimiter literally means Any descendant of the previous determinant. So I gave a delimiter like div#nav * It will match any nested elements to a file <div id="nav"> an item, but not the <div> the same item.

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>

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

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

  1. Click ID Equal logo

  2. Click an item Matches CSS selector div#logo

why not? Because clicking will not land on <div>. Instead, it will land on one of the nested elements, because they are block-level elements that already fill the shell <div> completely. Thus there is no region left in <div> itself that could They are clicked!

So, you need to instruct the launcher to track clicks on a file <div> itself (this is a good precaution if additional padding offers surface area to <div>, also) and Any of its overlapping elements. This is where the wildcard selector comes in handy.

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

Click an item Matches CSS selector div#logo, div#logo *

This literally means:

Track clicks to <div id="logo"> element or Which element is involved in this <div>.

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

The only edge cases I can think of are if you really want to track clicks on the bounds of the wrap element alone and not anything nested inside it, but I’m having trouble justifying this use case in a real world scenario. But in case you Act You want to specifically track clicks on a wrap element, just drop the wildcard delimiter and simply use it div#logo as the only determinant.

Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button