2017-07-27 52 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'); 

將返回 「沃特·柯本」