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

您不应该绑定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}}

Answer 2

也许你没有从函数中捕获/存储return $(this).closest('.item-set').find('header').text();？

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

＆＃13;

(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();
    });
})();

＆＃13;

<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>

＆＃13;

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

2 个答案: