javascriptgoogle-tag-managerselectors-api

looking for a smarter way to go though querySelectorAll nodelist (in GTM)


Tried a lot of solutions (like these https://dev.to/dailydevtips1/javascript-loop-queryselectorall-results-j6) but can't get the loop to work in GTM/Google Tag Manager.

My working script - not very good of course

var helloUrl = document.querySelectorAll('a[id*="hellotracklink"]')[0];


helloUrl.href = helloUrl.href + '?utm_source=' + utm_source + '&utm_medium=' + utm_medium +  '&utm_campaign=' + utm_campaign + '&utm_term=' + utm_term + '&utm_content=' + utm_content + '&lpurl=' + lpUrl;
  
var helloUrl = document.querySelectorAll('a[id*="hellotracklink"]')[1];

helloUrl.href = helloUrl.href + '?utm_source=' + utm_source + '&utm_medium=' + utm_medium +  '&utm_campaign=' + utm_campaign + '&utm_term=' + utm_term + '&utm_content=' + utm_content + '&lpurl=' + lpUrl;
  
var helloUrl = document.querySelectorAll('a[id*="hellotracklink"]')[2];

helloUrl.href = helloUrl.href + '?utm_source=' + utm_source + '&utm_medium=' + utm_medium +  '&utm_campaign=' + utm_campaign + '&utm_term=' + utm_term + '&utm_content=' + utm_content + '&lpurl=' + lpUrl;
  
var helloUrl = document.querySelectorAll('a[id*="hellotracklink"]')[3];

helloUrl.href = helloUrl.href + '?utm_source=' + utm_source + '&utm_medium=' + utm_medium +  '&utm_campaign=' + utm_campaign + '&utm_term=' + utm_term + '&utm_content=' + utm_content + '&lpurl=' + lpUrl;

var helloUrl = document.querySelectorAll('.hellotracklink');

  
  for (var i = 0; i < helloUrl.length; i++) {
  helloUrl.href = helloUrl.href + '?utm_source=' + utm_source + '&utm_medium=' + utm_medium + '&utm_campaign=' + utm_campaign + '&utm_term=' + utm_term + '&utm_content=' + utm_content + '&lpurl=' + lpUrl;
}

Solution

  • try it bro

       var helloUrls = document.querySelectorAll('.hellotracklink');
    
       for (var i = 0; i < helloUrls.length; i++) {
           var helloUrl = helloUrls[i];
           helloUrl.href += '?utm_source=' + utm_source + '&utm_medium=' + 
           utm_medium + '&utm_campaign=' + utm_campaign + '&utm_term=' + utm_term 
           + '&utm_content=' + utm_content + '&lpurl=' + lpUrl;
          }
    
    

    By implementing these corrections, your script should correctly loop through all elements with the class hellotracklink and update their href attributes with the appropriate UTM parameters.