Search code examples
javascriptjquerygoogle-tag-manager

Get title of accordion with GTM / JQuery

My HTML:

<div class="children-group paragraph paragraph--type--services-child-accordion">
          
    <div class="accordion-tab">
        <h3>Body</h3>
        <img class="icon-angle-down" src="">
        <img class="icon-close" src="">
    </div>

    <div class="stuff-inside-accordion">...</div>

</div>

My custom variable in GTM:

function(){
    var title = {{Click Element}}.closest('.paragraph--type--services-child-accordion').find('h3').text();
    return title;
}

I'm trying to pull in the text in the on a click event. However, I'm getting undefined back on my custom variable. Unfortunately, I can't just use the {{Click Text}} variable because the h3 only occupies a small portion of the clickable area. Clicking anywhere inside div.accordion-tab triggers the accordion to open. For example, if you click between the h3 text and the arrow img icon, the {{Click Element}} registers as div.accordion-tab. If you click directly on the h3, the {{Click Element}} registers as the h3, as you'd expect. Regardless of where I click within the clickable area, I want to return the text value of the h3.

Solution

  • I tried using another technique, and was able to get it to work. Here's the code I used:

    function(){
  return google_tag_manager["GTM-XXXXXX"].dataLayer.get("gtm.element").parentElement.parentElement.querySelector("div.accordion-tab > h3").innerText
}

    This method is recommended by MeasureSchool: https://www.youtube.com/watch?v=26JfSV_LUzA