2017-07-27 53 views
0

我想从HTML图像元素中拉出Alt属性,并且有10个这样的具有img元素作为子元素的父级DIV元素。当前设置的问题是GTM iam在有人点击图像元素时无法获取专家的姓名。自定义Javascript变量的问题

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

基本上iam将点击事件附加到所有DIV元素,所以当用户点击任何DIV时,我使用当前目标并访问子元素来获取ATT。我已经在控制台中测试过,它工作,但作为一个自定义Javascript变量IAM变得未定义。

您能否请帮助。

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

回答

2

你的JavaScript函数返回什么。它只是将函数处理程序绑定到返回ALT值的DOM事件。当事件处理程序触发时,Javascript函数本身已经返回。

要做到这一点的正确方法是设置首先创建一个变量来保存点击时elemtn的alt文本。您将使用自动事件变量类型,并从类型中选择“事件属性”,并为该属性选择alt。 :

enter image description here

虽然你在那里还启用内置变量“点击元素”,你会用它下一个步骤。

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

enter image description here

现在只要您在元素上单击具有这种属性的标记会和变量将会对中高音的正确值。现在,您可以在标记中随意使用任何内容,例如作为eventAction传递到分析中。

+0

嗨爱德华多,非常感谢您的帮助,但这只能解决我的问题的一部分。正如你所看到的,图片标签被包含在锚标签内。我现在如何获得“href”? –

+0

@SrijithRamachandran你没有提到任何有关HREF的内容。我的解决方案解决了您所描述的问题。我会用新的问题要求开一个新的问题。 – Eduardo

+0

嘿,对不起,但我找到了出路。我所做的是将“a”标记的href复制到图像id属性,并使用Autoevent变量捕获图像的id :-)。这解决了我的两个问题。非常感谢您的帮助。 Iam致力于为我的客户实施GTM。 Iam肯定会有很多问题:)。 –

-1

在你的HTML,你可以指定ID和数据属性利用数据的img标签包含在alt标签和拉那而不是使用alt标签。虽然我不完全确定你的问题。

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

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

将返回 “沃特·柯本”