Как назначить строковое значение кнопкам при событии щелчка, используя пользовательскую переменную javascript GTM
У меня есть веб-сайт с тремя кнопками с одинаковым текстом кнопки, классом (.action-button) и т. д. URL-адреса клика: s разные, но они будут регулярно меняться, поэтому я думаю, что мне придется настроить таргетинг на них с помощью селектора CSS. Я хотел бы иметь возможность идентифицировать и присвоить каждой из этих кнопок строку в качестве значения при нажатии. Цель состоит в том, чтобы отправить значение в GA через тег события UA, но я не хочу его жестко кодировать.
Я не совсем понимаю, как к этому подойти (я новичок в js). Я написал сценарий, в который вставил пользовательскую переменную javascript. К сожалению, это не работает. Когда я пробую его в режиме отладки, переменная становится undefined как возвращаемый тип, так и значение. Кто-нибудь знает, что не так с моим сценарием? Или если бы я мог добиться того же результата другим, более простым способом?
Я установил триггеры для обычных кликов для каждой кнопки, используя .spotlight-coll-one-big-two-small-img-below .spotlight: nth-child (1, 2 или 3) .action-button, и они работают просто хорошо.
Использование document.querySelectorAll ('. Spotlight-coll-one-big-two-small-img-below .action-button') дает мне NodeList с тремя кнопками, на которые я хочу настроить таргетинг.
function() {
var theSpotlight = document.querySelectorAll('.spotlight-coll-one-big-two-small-img-below .action-button');
if (theSpotlight.length > 0) {
for (var i = 0; i < theSpotlight.length; i++) {
theSpotlight[i].addEventListener('click', function () {
if (theSpotlight[i] = 0) {
return 'Spotlight 1'
} else if (theSpotlight[i] = 1) {
return 'Spotlight 2'
} else if (theSpotlight[i] = 2) {
return 'Spotlight 3'
} else {
return 'n/a'
}
})
}
}
}
PS. На данный момент я не могу получить доступ к коду.
Большое спасибо, Даниэль
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Попробуйте вместо этого.
Добавить на страницу обработчик кликов JavaScript
Это должно быть добавлено на ваш сайт, а не как пользовательская переменная JS в GTM.
function() {
var theSpotlight = document.querySelectorAll('.spotlight-coll-one-big-two-small-img-below .action-button');
var spotLightLabels = ['Spotlight 1', 'Spotlight 2', 'Spotlight 3'];
if (theSpotlight.length > 0) {
for (var i = 0; i < theSpotlight.length; i++) {
theSpotlight[i].addEventListener('click', function () {
window.dataLayer.push({'spotlightLabel': spotlightLabels[i]});
});
}
}
}
В GTM
- Создайте переменную dataLayer, которая читает значение
spotlightLabel - Используйте эту переменную dataLayer везде, где вам нужна текстовая метка последней нажатой ссылки в центре внимания.
Вы можете попробовать добавить указанное выше как пользовательский тег HTML в GTM и установить приоритет активации тега как можно раньше.
Большое спасибо! Будет ли разумный обходной путь, если я не могу добавить код на веб-сайт прямо сейчас?