如何捕获按钮单击旁边的文本以获取事件标签

时间:2019-03-28 15:20:41

标签: google-analytics google-tag-manager

我正在使用标签管理器来跟踪某些资产下载。页面上有多个可下载资产,每个资产都有一个“下载资产”按钮。

我想在标签管理器中创建一个标签来覆盖所有这些下载,使用事件标签指定资产类型:例如“全幅图像”,“ facebook广告图像”等。

通常,我会为此使用'click text'或'click 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>

1 个答案:

答案 0 :(得分:0)

是的,有一种方法可以做到。它需要一些报废。

您可以创建一个新的自定义JavaScript变量并使用内置变量{{Click Element}}-然后将其获取为parent node,例如:

{{Click Element}}。parentNode

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

{{Click Element}}。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;
}