自定义 Javascript 变量的问题

Question

我正在尝试从 HTML 图像元素中提取 Alt 属性，并且有 10 个这样的父 DIV 元素具有 img 元素作为子元素。当前设置的问题是在 GTM 中，当有人单击图像元素时，iam 无法获取专家的姓名。

为了克服这个问题，我使用下面的 java-脚本作为 GTM 中的自定义 java 脚本变量来捕获 Alt 属性，但它未定义。

基本上我将点击事件附加到所有 DIV 元素，因此当用户点击任何 DIV 时，我使用当前目标并访问子元素以获取 ATT。我在控制台中测试了相同的内容并且它有效但是作为自定义 Javascript 变量我变得未定义。

你能帮忙吗

HTML代码

<div class="card__media-overlapping__media">
<a href="https://capgemini.aws.hmn.md/experts/testing/wouter-koppen/">
<img src="https://placehold.it/617x347" alt="Wouter Koppen">
</a></div>

GTM 中的自定义 Javascript 变量

function(){

try{

var divHead= document.getElementsByClassName('card__media-overlapping__media');



var eventhandlerdoc = function(event){

    var imgALT=event.currentTarget.firstElementChild.firstElementChild.getAttribute('alt');

return imgALT;

}

for(var index=0; index < divHead.length; index++){

divHead[index].addEventListener('click',eventhandlerdoc,true);}
}

catch(e){
return "n/a"
}
}

Answer 1

在您的 HTML 中，您可以使用 alt 标签中包含的数据将 id 和 data 属性分配给您的 img 标签，然后将其拉出而不是使用 alt 标签。虽然我不完全确定你在问什么。

<img
id="alt"
data-alt="Wouter Koppen"

var altImg = document.getElementById('alt');

会return"Wouter Koppen"

Answer 2

您的 Javascript 函数 return 什么都没有。它只是将函数处理程序绑定到 DOM 事件 return ALT 值。 Javascript 函数本身在事件处理程序触发时已经 return 编辑。

执行此操作的正确方法是首先创建一个变量来保存元素被单击时的 alt 文本。您将使用自动事件变量类型和类型中的 select 事件属性以及属性中的 alt。 :

同时您还启用了内置变量 "Click Element"，您将在下一步中使用它。

接下来您需要一个在您单击具有此属性的元素时触发的代码。这意味着具有以下触发器的标签与 CSS 选择器 .card__media-overlapping__media img 相匹配。

现在，只要您单击具有此属性的元素，标签就会触发，并且变量将具有正确的 alt 值。现在您可以在标签中随心所欲地使用它，例如作为 eventAction 传递到分析中。

自定义 Javascript 变量的问题

Issues with Custom Javascript variable

javascript

google-analytics

google-tag-manager