WordPress Google Tag Manager 父元素问题

huangapple go评论65阅读模式
英文:

WordPress Google Tag Manager issue on parent element

问题

我有一个使用GTM跟踪的WordPress网站,我使用WordPress插件来注入脚本。
事件和配置在Google标签管理器的预览模式下工作并触发。

我遇到的问题是,我使用Elementor而不是专业版,我有一个按钮,这是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>

在Elementor中,我在ID按钮内添加了 ga-works-with-us,您可以在<a>标签上看到它。
但是,ID从不与我的触发器匹配,在调试视图(GTM)中,我可以看到类是 &quot;elementor-button-text&quot;,如果我点击某处,我会看到 &quot;elementor-element elementor-element-4787000 e-con-boxed e-con&quot;

那么,如何正确设置我的事件并在每次单击此按钮时触发它呢?

我是JavaScript开发人员,所以我可以添加一些代码,但我更喜欢避免这样做并以正确的方式处理。

英文:

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:

&lt;div data-id=&quot;e2d2099&quot; data-element_type=&quot;widget&quot; class=&quot;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&quot; data-model-cid=&quot;c45&quot; id=&quot;&quot; data-widget_type=&quot;button.default&quot; draggable=&quot;true&quot;&gt;
  &lt;div class=&quot;elementor-element-overlay&quot;&gt;
    &lt;ul class=&quot;elementor-editor-element-settings elementor-editor-widget-settings&quot;&gt;
      &lt;li class=&quot;elementor-editor-element-setting elementor-editor-element-edit&quot; title=&quot;Modifier Bouton&quot;&gt;
        &lt;i class=&quot;eicon-edit&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;
        &lt;span class=&quot;elementor-screen-only&quot;&gt;Modifier Bouton&lt;/span&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class=&quot;elementor-widget-container&quot;&gt;
    &lt;div class=&quot;elementor-button-wrapper&quot;&gt;
      &lt;a href=&quot;#nos-offres&quot; class=&quot;elementor-button-link elementor-button elementor-size-xs&quot; role=&quot;button&quot; id=&quot;ga-works-with-us&quot;&gt;
        &lt;span class=&quot;elementor-button-content-wrapper&quot;&gt;
          &lt;span class=&quot;elementor-button-text&quot;&gt;Travailler avec nous&lt;/span&gt;
        &lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;ui-resizable-handle ui-resizable-e&quot; style=&quot;z-index: 90;&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

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

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.

答案1

得分: 0

我已找到触发所有子元素的方法,感谢这个人

您需要进入GTM中的触发器部分,选择触发器类型为“点击 - 所有元素”,然后在下面选择“某些点击”,在接下来的三个输入框中,您需要首先选择(或添加):

  1. 点击元素
  2. 匹配 CSS 选择器
  3. #parentId, #parentId *(在我的情况下是 #ga-works-with-us, #ga-works-with-us *

完成!这样,您需要在父元素上添加ID,所有父元素或所有子元素都将被触发 WordPress Google Tag Manager 父元素问题

英文:

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 WordPress Google Tag Manager 父元素问题

huangapple
  • 本文由 发表于 2023年5月29日 15:37:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76355470.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定