Search code examples
javascriptwordpressgoogle-tag-managertracking

Wordpress Google Tag Manager issue on parent element


I have a wordpress website with GTM tracking, i use the wordpress plugins to inject the script. The event & config works and triggered in the preview mode on google tag manager.

The issue i have, i use elementor and not the pro version, i have a button, there is the HTML:

<div data-id="e2d2099" data-element_type="widget" class="elementor-element elementor-element-edit-mode elementor-element-e2d2099 elementor-element--toggle-edit-tools elementor-widget elementor-widget-button elementor-align-left btn-animation-full-to-border btn-attention-scale-x ui-resizable elementor-element-editable" data-model-cid="c45" id="" data-widget_type="button.default" draggable="true">
  <div class="elementor-element-overlay">
    <ul class="elementor-editor-element-settings elementor-editor-widget-settings">
      <li class="elementor-editor-element-setting elementor-editor-element-edit" title="Modifier Bouton">
        <i class="eicon-edit" aria-hidden="true"></i>
        <span class="elementor-screen-only">Modifier Bouton</span>
      </li>
    </ul>
  </div>
  <div class="elementor-widget-container">
    <div class="elementor-button-wrapper">
      <a href="#nos-offres" class="elementor-button-link elementor-button elementor-size-xs" role="button" id="ga-works-with-us">
        <span class="elementor-button-content-wrapper">
          <span class="elementor-button-text">Travailler avec nous</span>
        </span>
      </a>
    </div>
  </div>
  <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
</div>

On elementor inside the ID button i add ga-works-with-us, you can see it on the balise . But, the id never match my trigger, on the debug view (GTM) i can see the class is "elementor-button-text", want if i click somewhere i have "elementor-element elementor-element-4787000 e-con-boxed e-con".

So, who can i do correctly have my event setup and trigger every time this button is clicked?

I'm JS developer so i can add some code, but i prefer to avoid it and do it the correct way.


Solution

  • I have found the way to trigger all child on a parent, thanks to this guy

    You need to go inside the trigger section in GTM, choose the trigger type "Click - All element", below chosse "Some Clicks", in the three folowing input you need in first to select (or add):

    1. Click Element
    2. macthes CSS selector
    3. #parentId, #parentId * (in my case #ga-works-with-us, #ga-works-with-us *)

    Done! With this you need to add the ID on the parent element, on all event on the parent or all child will be trigger :)