通过 GTM 自定义 JavaScript 变量获取元素文本

Question

我有两组链接都具有相同的类名，唯一的区别是 . 我需要获取点击链接的文本并通过 GTM 将其传递给 GA。

<div class="item-set">
  <header>Section Title One</header>
  <section class="products">
    <div class="list">
      <a href="/Product/60216935"><img src="/ProductImages1.jpg"></a>
    </div>
    <div class="list">
      <a href="/Product/6021693x"><img src="/ProductImages2.jpg"></a>
    </div>
    <div class="list">
      <a href="/Product/6021693y"><img src="/ProductImages3.jpg"></a>
    </div>
  </section>
</div>
<div class="item-set">
  <header>Section Title Two</header>
  <section class="products">
    <div class="list">
      <a href="/Product/60216935"><img src="/ProductImages1.jpg"></a>
    </div>
    <div class="list">
      <a href="/Product/6021693x"><img src="/ProductImages2.jpg"></a>
    </div>
    <div class="list">
      <a href="/Product/6021693y"><img src="/ProductImages3.jpg"></a>
    </div>
  </section>
</div>

我创建了一个自定义的 javascript 变量

function() {
  $('section.products div.list').click(function() {
    return $(this).closest('.item-set').find('header').text();
  });
}

但是哔哔声并没有像我预期的那样工作（或根本没有）。它返回“未定义”。

非常感谢任何帮助。

Answer 1

你不应该绑定到clickJS 变量中的事件。您应该仅在 GTM 中使用 JS 变量来接收值

实现目标的正确方法是：

1）启用内置变量Click Element（如果你已经有了，可以跳过这一步）

2）创建触发器，当您点击链接时会触发 屏幕截图上的 CSS 选择器是 .item-set .list a

3）创建JS变量 代码为：function() { return $({{Click Element}}.closest('.item-set')).find('header').text(); } 3）创建一个标签，将数据发送给GA 在这里您可以使用您的变量形式步骤 3 {{Click List Header}}