时间戳

首页 > 解决方案 > 如何捕获按钮单击事件标签附近的文本

google-analytics - 如何捕获按钮单击事件标签附近的文本

问题描述

我正在使用跟踪代码管理器跟踪一些资产下载。页面上有多个可下载的资产，每个都有一个“下载资产”按钮。

我想在标签管理器中创建一个标签来涵盖所有这些下载，使用事件标签来指定资产类型：例如“全出血图片”、“Facebook 广告图片”等。

通常，我会为此使用“点击文本”或“点击 URL”变量，但这次我不能。所有下载按钮都具有相同的文本（显然，这无法更改），并且 URL 仅包含 CMS 生成的资产编号，而不是描述性 URL。

但是，每个按钮上方都有一个 h4，其中包含资产名称：

有什么方法可以在标签管理器中创建一个变量，当它被点击时，它会在按钮上方刮掉 h4 的内容？

我为 h4 创建了一个变量，但它只捕获页面上第一个 h4 的内容（而不是最接近按钮单击的那个）。

<div class="content">
     <h4>Full Bleed</h4>
     <div class="copy">
          <p>Perfect for social media.</p>
     </div>
     <div class="btn-container">
          <a href="URL?assetNo=17232568" class="btn" >Download assets 
          </a>
     </div>
</div>

标签： google-analyticsgoogle-tag-manager

解决方案

是的，有办法做到这一点。它需要一些刮擦。

您可以创建一个新的自定义 JavaScript 变量并使用内置变量 {{Click Element}} - 然后获取它的父节点，例如：

{{点击元素}}.parentNode

这应该返回整个<div class="content">元素。然后只需在该元素内搜索<h4>如下：

{{点击元素}}.parentNode.getElementsByTagName("h4")[0]

  • 这是您的“全出血”元素。请记住，这会返回一个数组，即 [0]。

需要注意的一件事是，当您单击元素时：

<div class="btn-container">
      <a href="URL?assetNo=17232568" class="btn" >Download assets 
      </a>
</div>

根据您点击的具体位置，{{Click Element}} 有时会是<div>元素，有时会<a>在其中。这有时会破坏“.parentNode”功能，因此您需要进行一些检查。下面我写了一些伪代码（未经测试，乱七八糟）：

自定义 JavaScript 变量：

function(){
  var parent = {{Click Element}}.parentNode;
  var value = "";
  if(parent.className === "content"){
    value = parent.getElementsByTagName("h4")[0]
  }else{
    value = parent.parentNode.getElementsByTagName("h4")[0]; // you need to go one level above
  }
  
  return value.innerText;
}

推荐阅读