Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

KeeMac
Level 3
Level 3

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

1 Accepted Solution
ParitMittal
Correct answer by
Level 10
Level 10

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

View solution in original post

12 Replies
ParitMittal
Level 10
Level 10

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

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

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

ParitMittal
Level 10
Level 10

Hi, 

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

Thanks & Regards

Parit Mittal

ParitMittal
Level 10
Level 10

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

KeeMac
Level 3
Level 3

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

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

am sure am doing something wrong

ParitMittal
Correct answer by
Level 10
Level 10

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

View solution in original post