Ищете более разумный способ пройти через список узлов querySelectorAll (в GTM)

Перепробовал множество решений (например, https://dev.to/dailydevtips1/javascript-loop-queryselectorall-results-j6), но не смог заставить цикл работать в GTM/Диспетчере тегов Google.

Мой рабочий сценарий - не очень хорош конечно

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;

  • Мой неудачный скрипт в GTM*
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;
}

да, действительно, на странице есть несколько элементов с этим классом, но этот тоже не работает

Mediamash 31.05.2024 15:22

Во втором (неудачном) сценарии helloUrl.href должно быть helloUrl[i].href, не так ли?

Heiko Theißen 31.05.2024 15:23
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
59
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Поскольку все ваши теги начинаются с «hellotracklink», вы можете просто использовать один запросSelectorAll, чтобы получить их все, а затем перебрать их с помощью цикла forEach или for.

базовый образец, например, ваш случай: https://jsfiddle.net/u6xaqyc8/

так что вы можете найти их как

    var helloLinks = document.querySelectorAll('a[id* = "hellotracklink"]');
var outputSpan = document.getElementById('output');

helloLinks.forEach(function(link) {
    outputSpan.innerHTML += link.textContent + "<br>";
});

Вы почти закончили с неудачным сценарием в GTM, но вам не хватает индексации для каждого отдельного элемента в NodeList, который вернул querySelectorAll. Используя helloUrl[i], вы должны получить доступ к каждому элементу внутри цикла. Вот обновленный скрипт:

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

for (var i = 0; i < helloUrls.length; i++) {
    var helloUrl = helloUrls[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;
}

При этом будут пройдены все элементы класса .hellotracklink и для каждого из них будут добавлены параметры запроса к атрибуту href, как и предполагалось.

Ответ принят как подходящий

попробуй, братан

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

Благодаря этим исправлениям ваш скрипт должен правильно перебирать все элементы с классом hellotracklink и обновлять их атрибуты href с соответствующими параметрами UTM.

Ответы, в которых говорится, что вам нужно выполнить цикл (итерацию) по узлам, верны, но вы можете внести еще одно изменение, которое сделает его более надежным.

Во-первых, нужно было бы структурировать ваши параметры utm.

const utmParameters = {
  utm_source,
  utm_medium,
  utm_campaign,
  utm_term,
  utm_content,
  lpUrl,
}

Затем вы можете установить их программно, чтобы избежать трудностей с отладкой проблем с шаблонами строк, вам не нужно беспокоиться о вопросительных знаках и &s, и вы можете сохранить другие параметры запроса. Это также легче позже провести рефакторинг и написать тесты.

  for (let i = 0; i < helloUrls.length; i++) {

    const helloUrl = new URL(helloUrls[i].href);
    let params = new URLSearchParams(url.search);

    for([key, value] of Object.entries(utmParameters)) {
      params.set(key, value)
    } ;
    helloUrl.search = params // javaScript figures out that you want the string automatically.
    helloUrls[i].href = helloUrl
  }

document.querySelectorAll('a').forEach(anchor => {
    // Run the snippet and then check out the links
    const url = new URL(anchor.href);
    let params = new URLSearchParams(url.search);
    for([key, value] of Object.entries({ testMyParam: '123', anotherParam: 'oh my'})) {
      params.set(key, value)
    } 
        url.search = params;
    anchor.href = url
})
<a href = "google.com">Google</a> <a href = "mozilla.org">Mozilla</a>

Другие вопросы по теме