Probleme mit benutzerdefinierten Javascript-Variablen

Ich versuche, das Alt-Attribut aus dem HTML-Bildelement zu ziehen, und es gibt 10 solche Eltern DIV-Element mit Img-Element als Kind. Das Problem mit der aktuellen Einrichtung ist in GTM iam nicht in der Lage, den Namen des Experten zu erhalten, wenn jemand auf das Image-Element klickt.Probleme mit benutzerdefinierten Javascript-Variablen

Um dies zu überwinden, verwende ich das folgende Java-Skript als benutzerdefinierte Javascript-Variable in GTM, um das Alt-Attribut zu erfassen, aber es kommt als undefiniert.

Grundsätzlich IAM Anhängen eines Click-Ereignisses an alle DIV-Elemente, so wenn ein Benutzer auf einen der DIVs klicke ich benutze das aktuelle Ziel und Zugriff auf das Kind-Element, um den ATT zu bekommen. Ich hatte das gleiche in der Konsole getestet und es funktionierte aber als eine benutzerdefinierte Javascript-Variable iam undefined.

Können Sie bitte helfen.

HTML-Code

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

Individuelle Javascript Variable in GTM

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

Quelle

2017-07-27 Srijith Ramachandran

Ihre Javascript-Funktion nichts zurückgibt. Es bindet nur Funktionshandler an DOM-Ereignisse, die den ALT-Wert zurückgeben. Die JavaScript-Funktion selbst ist bereits zu dem Zeitpunkt zurück, zu dem die Event-Handler ausgelöst werden.

Der richtige Weg, um dies zu tun wäre, um zuerst eine Variable zu erstellen, um den alt Text eines Elements zu halten, wenn es geklickt wird. Sie würden den Variablentyp auto-event verwenden und das Ereignisattribut vom Typ und alt für das Attribut auswählen. :

Während Sie sind es ermöglichen, auch die integrierte Variable „Click Element“, werden sie auf den nächsten Schritt verwendet werden.

Als Nächstes benötigen Sie ein Tag, das beim Klicken auf ein Element mit diesem Attribut ausgelöst wird. Was bedeutet ein Tag mit dem folgenden Trigger, der dem CSS-Selektor .card__media-overlapping__media img entspricht.

Nun, wenn Sie mit diesem auf ein Element klicken Sie auf das Tag-Attribut wird ausgelöst, und die Variable wird den richtigen Wert für den Alt haben. Jetzt können Sie damit machen, was Sie wollen in dem Tag wie in analytics als eventAction zum Beispiel übergeben.

Quelle

2017-07-28 00:30:13 Eduardo

Hallo Eduardo, vielen Dank für die Hilfe, aber das löst nur einen Teil meines Problems. Wie Sie sehen können, ist das Image-Tag im Anker-Tag eingeschlossen. Wie bekomme ich jetzt das "href"? –

@SrijithRamachandran Sie haben nichts über eine HREF gesagt. Meine Lösung löst das von Ihnen beschriebene Problem. Ich würde eine neue Frage mit der neuen Problemanforderung öffnen. – Eduardo

Es tut mir leid, aber ich habe einen Ausweg gefunden. Was ich getan habe, ist die href des "a" -Tags in das Bild-ID-Attribut kopiert und die Variable Autoevent verwendet, um die ID :-) des Bildes zu erfassen. Das löst sowohl das Problem als auch das Problem. vielen dank für die hilfe. Ich arbeite an der Implementierung des GTM für meinen Kunden. Ich werde sicher viele Fragen haben :). –

-1

in Ihrem HTML Sie ID und Datenattribute zu Ihrem img-Tag unter Verwendung der Daten, die in dem Alt-Tag zuweisen konnte, und ziehen Sie, dass aus, anstatt das alt-Tag zu verwenden. Obwohl ich nicht ganz sicher bin, was du fragst.

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

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

zurückkehren würde "Wouter Koppen"

Quelle

2017-07-27 14:09:55

Probleme mit benutzerdefinierten Javascript-Variablen

Antwort

Verwandte Themen