Issues with Custom Javascript variable

Question

I am trying to pull the Alt attribute from the HTML image element and there are 10 such parent DIV element having img element as child. The problem with current setup is in GTM iam not able to get the Name of the Expert when someone clicks on the Image element.

to overcome this i am using the below java-script as a custom javascript variable in GTM to capture the Alt attribute but its coming as undefined.

basically iam attaching a click event to all the DIV elements so when a user clicks on any of the DIVs i use the currenttarget and access the child element to get the ATT. i had tested the same in the console and it worked but as a Custom Javascript variable iam getting undefined.

Can you please help.

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>

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

Eduardo · Accepted Answer · 2017-07-28 00:30:13Z

2

Your Javascript function returns nothing. It just binds function handlers to DOM Events that return the ALT value. The Javascript Function itself already returned by the time the event handlers fire.

The correct way to do this would be to setup first create a variable to hold the alt text of an elemtn when it's clicked. You would use the auto-event variable type and select Event Attribute from the type and alt for the attribute. :

While you are there also enable the Built-in Variable "Click Element", you'll use it on next step.

Next you need a tag that fires when you click on an element that has this attribute. Which means a tag with the following trigger that match the CSS Selector .card__media-overlapping__media img.

Now whenever you click on an element with this attribute the tag will fire and the Variable will have the correct value for the alt. Now you can do with it whatever you want in the tag like pass into analytics as an eventAction for instance.

answered Jul 28, 2017 at 0:30

Eduardo

22.8k11 gold badges80 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Srijith Ramachandran Over a year ago

Hi Eduardo, Many thanks for the help, However this only solves part of my problem. as you can see the image tag is enclosed inside anchor tag. how do I now get the "href"?

Eduardo Over a year ago

@SrijithRamachandran you didn't say anything about an HREF. My solution solves the problem you have described. I would open a new question with the new problem requirement.

Srijith Ramachandran Over a year ago

Hey sorry but I found a way out. What I did is copied the href of the "a" tag to the image id attribute and used the Autoevent variable to capture the id :-) of the Image. this solves my both the problem. many thanks for the help. Iam working on implementing the GTM for my client. Iam sure will have many questions :).

Jarrod · Accepted Answer · 2017-07-27 14:09:55Z

-1

In your HTML you could assign id and data attributes to your img tag utilizing the data contained in the alt tag and pull that out instead of using the alt tag. Although I'm not entirely sure what your asking.

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

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

would return "Wouter Koppen"

answered Jul 27, 2017 at 14:09

Jarrod

521 silver badge10 bronze badges

Collectives™ on Stack Overflow

Issues with Custom Javascript variable

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related