{"id":99845,"date":"2025-02-20T17:30:55","date_gmt":"2025-02-20T17:30:55","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/css-selector-guide-for-google-tag-manager\/"},"modified":"2025-02-20T17:30:55","modified_gmt":"2025-02-20T17:30:55","slug":"css-selector-guide-for-google-tag-manager","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=99845","title":{"rendered":"CSS Selector Guide For Google Tag Manager"},"content":{"rendered":"


\n<\/p>\n

. Since it has the id<\/code> attribute, it\u2019s a reasonable expectation that it\u2019s the only<\/strong> such element on the page, thus even that short selector is very powerful.<\/p>\n

On the other hand, sometimes all you can do is use a really long, complex chain, because there are so few uniquely identifying features in the element itself or its closest ancestors. Thus, the selector might end up looking like this:<\/p>\n

#main > article > div.post-content.markdown > div > p:nth-child(12) > a:nth-child(2)<\/code><\/p>\n

It\u2019s not pretty, and it carries the additional weight that the longer and more complex the CSS selector is, the more fragile it becomes<\/strong>. The selector above will be invalidated when any one of the elements in the chain changes position or form.<\/p>\n

In other words, always strive to create a selector that is as simple as possible<\/strong> without compromising its accuracy to target the exact element you want<\/strong>.<\/p>\n

CSS selectors originated, surprise surprise, in Cascading Style Sheets (CSS). Style sheets are sets of rules and declarations that govern how HTML elements are displayed (and sometimes interacted with) on a web page. Here\u2019s what a typical style declaration might look like:<\/p>\n

\n
a<\/span>:hover<\/span>, a<\/span>:active<\/span> {\n    text-decoration<\/span>: none<\/span>;\n    font-weight<\/span>: bold<\/span>\n}<\/code><\/pre>\n<\/div>\n
The two items preceding the {<\/code> and separated by a comma are the selectors<\/strong>, and the two rows contained within the curly braces are the declarations<\/strong>. This is how you would read the rule:<\/p>\n
    \n
  1. Select all links (a<\/code>) that are currently being hovered over by the mouse (:hover<\/code>)<\/li>\n
  2. AND select all links (a<\/code>) that are currently being clicked by the mouse (:active<\/code>)<\/li>\n
  3. THEN remove all text decorations (e.g underline) from them<\/li>\n
  4. AND set their font weight to bold<\/strong><\/li>\n<\/ol>\n
    CSS is its own, wonderfully complex discipline in web design and development. There are so many weird and magnificent things you can do with it, from replacing JavaScript functionality<\/a> to running complex transitions using hardware acceleration<\/a>.<\/p>\n
    Well, in this guide we\u2019ll try to be a bit more modest and focus on how CSS selectors can be used with Google Tag Manager\u2019s JavaScript to make the most out of triggers, tags, and variables, where selecting, querying, or parsing the correct element<\/strong> is of utmost importance.<\/p>\n
    CSS selectors in JavaScript<\/h2>\n
    In JavaScript<\/strong>, you\u2019ll often run into CSS selectors in two scenarios:<\/p>\n
      \n
    1. \n
      You need to retrieve<\/strong> a specific element or elements from the page.<\/p>\n<\/li>\n
    2. \n
      You need to check if a given element matches<\/strong> a CSS selector.<\/p>\n<\/li>\n<\/ol>\n
      Both of these scenarios are very relevant in Google Tag Manager. Before we jump into how they work in GTM, let\u2019s take a look at JavaScript\u2019s handling of CSS selectors.<\/p>\n
      Using document.querySelector<\/code> and document.querySelectorAll<\/code><\/h3>\n
      The two JavaScript methods you\u2019ll most often use with CSS selectors are document.querySelector(selector)<\/code> and document.querySelectorAll(selector)<\/code>.<\/p>\n
      The first returns the first element on the page that matches the given selector<\/strong>.<\/p>\n
      The second returns a list of all the elements on the page that match the given selector<\/strong>.<\/p>\n
      \n
      \/\/ Get the first outbound link element on the page\n<\/span>var<\/span> firstOutbound = document<\/span>.querySelector('a:not([href=\"mydomain.com\"])'<\/span>);\n\n\/\/ Get all the checked checkbox and radio button elements on the page\n<\/span>var<\/span> allChecked = document<\/span>.querySelectorAll('input[type=\"checkbox\"]:checked,input[type=\"radio\"]:checked'<\/span>);\n<\/code><\/pre>\n<\/div>\n
      As you can see, the selector is passed as a string<\/strong> argument to the method.<\/p>\n
      Remember that HTML elements are essentially objects, and just capturing them makes often little sense. Instead, you\u2019ll want to do something with those objects, such as parse some property from them.<\/p>\n
      \n
      \/\/ Get the first outbound link element on the page\n<\/span>var<\/span> firstOutbound = document<\/span>.querySelector('a:not([href=\"mydomain.com\"])'<\/span>);\n\n\/\/ Push the URL of this outbound link into dataLayer\n<\/span>window<\/span>.dataLayer.push({\n  firstOutboundLinkURL: firstOutbound.getAttribute('href'<\/span>)\n});\n<\/code><\/pre>\n<\/div>\n
      In the example above, we use document.querySelector<\/code> to fetch the first outbound link (i.e. link that does NOT have mydomain.com<\/code> in its href<\/code>), and then we push it into dataLayer<\/code>.<\/p>\n
      One thing to remember is that document.querySelectorAll<\/code> doesn\u2019t return an array<\/strong> but rather a NodeList<\/code>. This means that you can\u2019t use regular array methods<\/strong> with whatever the method returns. You\u2019ll have to resort to some workarounds if you, for example, want to map()<\/code> all elements in the list to get a modified array as a result.<\/p>\n
      \n
      \/\/ Get ALL outbound links on the page\n<\/span>var<\/span> allOutbound = document<\/span>.querySelectorAll('a:not([href=\"mydomain.com\"])'<\/span>);\n\n\/\/ Create an array of all their href values\n<\/span>var<\/span> allHrefValues = Array<\/span>.prototype.map.call(allOutbound, function<\/span>(link) { return<\/span> link.href; });\n\n\/\/ Remove all duplicates\n<\/span>var<\/span> uniqueHrefValues = allHrefValues.filter(function<\/span>(href, index) { return<\/span> allHrefValues.indexOf(href) === index; });\n<\/code><\/pre>\n<\/div>\n
      As you can see, in order to run the map()<\/code> method against the list returned by document.querySelectorAll<\/code>, you need to invoke the method from the array prototype. It\u2019s a good thing to keep in mind if you ever find yourself working with document.querySelectorAll<\/code>.<\/p>\n
      Using element.matches<\/code><\/h3>\n
      If you want to check if any given element matches<\/strong> a specific CSS selector, you can use the matches()<\/code> method like this:<\/p>\n
      \n
      \/\/ Check if the clicked element is an outbound link\n<\/span>function<\/span> checkIfClickedElementIsOutbound() {\n  var<\/span> element = {{Click Element}};\n  if<\/span> (element.matches('a:not([href=\"mydomain.com\"])'<\/span>) {\n    return<\/span> true<\/span>;\n  } else<\/span> {\n    return<\/span> false<\/span>;\n  }\n}\n<\/code><\/pre>\n<\/div>\n
      You invoke the matches()<\/code> method on the element itself (the element has to be an HTML element), and like querySelector<\/code> \/ querySelectorAll<\/code>, you pass the selector as a string argument. The method returns true<\/code> for a match, and false<\/code> otherwise.<\/p>\n
      The thing about matches()<\/code> is that it didn\u2019t use to have stellar browser support<\/a>, so if you want to use these methods with Internet Explorer in mind, you might need to implement a polyfill<\/strong> to extend the support (see here<\/a> for inspiration).<\/p>\n
      Luckily, the matches()<\/code> method is abstracted in Google Tag Manager when using triggers, which is by far the most common use case. So let\u2019s dive right in!<\/p>\n
      CSS selectors in Google Tag Manager<\/h2>\n
      In Google Tag Manager<\/strong>, you\u2019ll find CSS selectors in a number of places.<\/p>\n
      You can use them as the selection method in the DOM Element variable:<\/p>\n
      \n
          <\/p>\n
          \"DOM<\/p>\n
          <\/a><\/p>\n<\/div>\n
      Using a CSS selector here lets you target specific elements that might not have the ID attribute (the only other selection method provided).<\/p>\n
      You can also find the same option in the Element Visibility<\/a> trigger:<\/p>\n
      \n
          <\/p>\n
          \"Element<\/p>\n
          <\/a><\/p>\n<\/div>\n
      Whereas the DOM Element variable only returns the first<\/strong> matching element (thus being similar to document.querySelector<\/code>), the Element Visibility trigger can be set to target all<\/strong> the matching elements, making CSS selectors super powerful in this particular trigger type.<\/p>\n
      The third, and by far the most useful scenario for CSS selectors in Google Tag Manager is the matches CSS selector predicate<\/a> when used together with the {{Click Element}}<\/strong> built-in variable.<\/p>\n
      The Click Element variable<\/h3>\n
      The Click Element<\/strong> variable is a Built-in variable<\/a> that you need to enable<\/strong> before you can use. The easiest way to enable it is to go to Variables<\/strong> via GTM\u2019s main navigation, and click the blue Configure<\/strong> button in the top corner of the content.<\/p>\n
      \n
          <\/p>\n
          \"Variables<\/p>\n
          <\/a><\/p>\n<\/div>\n
      In the overlay that opens, check the box next to Click Element<\/strong> and you\u2019re done. Now you can choose the Click Element variable in all the variable drop-downs of GTM.<\/p>\n
      Click Element<\/strong> returns the HTML element<\/strong> that was the target of the auto-event trigger action. In other words:<\/p>\n