Как назначить строковое значение кнопкам на событии щелчка, используя пользовательскую переменную javascript GTM

Question

У меня есть веб-сайт с тремя кнопками с одинаковым текстом кнопки, классом (.action-button) и т. Д. URL-адреса кликов отличаются, но они будут регулярно меняться, поэтому я думаю, что у меня будетнацелить их с помощью селектора CSS.Я хотел бы иметь возможность идентифицировать и дать каждой из этих кнопок строку в качестве значения при нажатии.Цель состоит в том, чтобы отправить значение в GA через тег события UA, но я не хочу жестко его кодировать.

Я не совсем уверен, как к этому подойти (я новичок в js).Я написал скрипт, который поместил в пользовательскую переменную javascript.К сожалению, это не работает.Когда я пробую это в режиме отладки, переменная получает «undefined» как тип возвращаемого значения, так и значение.Кто-нибудь знает, что не так с моим сценарием?Или если бы я мог добиться того же результата другим, более простым способом?

Я установил регулярные триггеры нажатия для каждой из кнопок, используя .spotlight-coll-one-big-two-small-img-ниже.spotlight: кнопка действия nth-child (1, 2 или 3), и они работают просто отлично.

Использование document.querySelectorAll ('. Spotlight-coll-one-big-two-small-img-under .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.На данный момент я не могу получить доступ к коду.

Большое спасибо, Даниэль

Answer 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 везде, где вам нужнонажата текстовая метка последней ссылки в центре внимания