通过 GTM Custom JavaScript 变量获取元素文本

Question

我有两组 link 都具有相同的 class 名称，唯一的区别是 . 我需要获取点击的 link 的文本并通过 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();
  });
}

但是 bleep 没有像我预期的那样工作（或根本没有）。它returns "undefined".

非常感谢任何帮助。

Answer 1

也许你不是capturing/storing函数中的return $(this).closest('.item-set').find('header').text();？

例如，当您立即调用函数并单击 div 时，<header> 的文本将记录到控制台。

(function() {
    $('section.products div.list').click(function(e) {
        e.preventDefault(); // to prevent the default action of the click
        console.log($(this).closest('.item-set').find('header').text());
        return $(this).closest('.item-set').find('header').text();
    });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

你不应该在 JS 变量中绑定到 click 事件。您应该在 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}}

通过 GTM Custom JavaScript 变量获取元素文本

Get element text through GTM Custom JavaScript Variable

javascript

google-tag-manager