Перепробовал множество решений (например, 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;
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;
}
Во втором (неудачном) сценарии helloUrl.href должно быть helloUrl[i].href, не так ли?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Поскольку все ваши теги начинаются с «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>
да, действительно, на странице есть несколько элементов с этим классом, но этот тоже не работает