Select all class's with getElementsByClassName and click does not fire in dtm

[KeeMac]

Hi,

I have a carousel with 6 links on the homepage and am trying to capture each link click. I have set up a data element using css selector to capture the classname i.e. [class=navname]

I also created an event based rule with condition rule set to _satellite.setVar('Navigation' this.text) and added  an evar,prop and events . Issue is that this only works on the first click, and not the others. I need this to click on all the other links.

I tried changing the rule to document.getElementsByClassName{'navname').click(); return true and it still only captures the 1st click and when i clicked on the others i get the link name for the first item returned for all the links.

How do i get this to click on all of the classes named 'navname' and return the correct navigation title? I thought maybe i need to declare a variable or something in the code editor.

please I need help as am just getting familiar with DTM

[ParitMittal]

Hi Kee,

The getElementsByClassName() method returns a collection of all elements in the document with the specified class name, as a NodeList object. Hence it's not possible to fetch text of the element of the class clicked using text method . Let's say that if you have 3 divs like  below then the document.getElementsByClassName("example")[1].innerHTML will give text value of second div. 

<div class="example">
A div element with class="example"
</div>

<div class="example">
Another div element with class="example"
</div>

<p class="example">A p element with class="example"</p>

<p>Click the button to find out how many elements with class "example" there are in this document.</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> The getElementsByClassName() method is not supported in Internet Explorer 8 and earlier versions.</p>

<p id="demo"></p>

<script>
function myFunction() {
    alert(document.getElementsByClassName("example")[1].innerHTML);
   
}
</script>

</body>
</html>

I would recommend you to work with your developer to assign name attribute  to your Links and then in your Event Based rule link name can be retrieved using  $(this).attr("linkname") . 

Please do let me know if you have any more questions or queries.

Thanks & Regards

Parit Mittal

[KeeMac]

Thanks Parit.. This is really driving me crazy now. Question is how do I track my carousel link please. A step by step instruction would be great.

In the absence of an attribute name, can i still use CSS Selector for my Data element or use a custom script?   I even added the code below to my aa code page to listen for each link clicked and it just kept returning the value of the 1st element

var navclick= document.getElementsByClassName(
    "navname","span",document.getElementById("nav")
);

for (var i=0; i < navclick.length; i++) {
  navclick[i].onclick = function(){alert("document.getElementsByClassName('navclick')[i].innerText");
}

Help.

[ParitMittal]

Hi , 

I need to understand the css structure of your website before any suggestions .Can you please share the URL of website as well your DTM account details in a private message

Thanks & Regards

Parit Mittal

[KeeMac]

Thanks

[KeeMac]

i have dm'ed you the website

[ParitMittal]

Hi, 

Thanks for providing the link. I am looking into the query and will get back to you ASAP.

Thanks & Regards

Parit Mittal

[ParitMittal]

Hi Kee ,

As per our understanding , you want to track the the following Navigation link  marked Red on the carousel for the URL : https://uk.rimmellondon.com/ 

Hence , Please create an Event based rule with the following settings as per the CSS structure of the website :

Hence , To fetch the name of the Navigation Link clicked in a Data Element . Please use the following code:

var a= this.getElementsByTagName("span")[1].getElementsByTagName("span")[0].innerHTML; _satellite.setVar("Navigation",a ); return true;

Thanks & Regards

Parit Mittal

2.png ‏62 KB

1.png ‏464 KB

[KeeMac]

Hi Parit,

Thanks very much for this. I just tried this and it doesn't seem to be working for me. When you say "To fetch the name of the navigation..." Does that mean I need to create a data element named "Navigation" and add the code as a custom script ?

Getting really confused now..:(

[KeeMac]

when I entered the code below into my console i get this  Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '[object Window]' is not a valid selector.(…) error message

1. var a= $(this)[0].getElementsByTagName("span")[1].getElementsByTagName("span")[0].innerHTML;

[KeeMac]

am sure am doing something wrong

[ParitMittal · Accepted solution]

Hi Kee, 

Please use the following code . We have tested it our end and it is working . 

var a= this.getElementsByTagName("span")[0].innerHTML).split("</span>");; var b= this.getElementsByTagName("span")[1].innerHTML; _satellite.setVar("Navigation",a[1].replace(/(\r\n|\n|\r)/gm,"") + "-" +b ); // This statement creates a Data Element  "Navigation" and stores the Name of the link in it console.log(a); console.log(b); return true;

Thanks & Regards

Parit Mittal

[KeeMac]

Thanks Parit