Такая задача возникает в тех случаях, когда чекбокс или радио-кнопка не имеют атрибутов, которые можно было бы легко передать в Google Tag Manager.
Ранее на этом сайте был опубликованы посты, в которых описывались методы передачи чекбоксов с атрибутом id и радио-кнопок с атрибутом value.
В данной статье рассмотрим, как передать данные в GTM с использованием другого связанного элемента, то есть parentElement. В нашем случае этим элементом будет текстовое описание (наименование) чекбокса, которое располагается рядом с ним.
Первым делом необходимо подключить контейнер Google Tag Manager в исходный код сайта. Если это уже выполнено, идём дальше.
В качестве примера возьмём скрипт параметров покупки checkout_option (способ оплаты) расширенной электронной торговли Google Аналитики для внедрения его в Google Tag Manager. Для этого переходим в GTM в Переменные и создадим там Пользовательскую переменную. Назовём её cjs — checkout_option — step 2 и выберем тип Собственный код JavaScript, а в коде пропишем следующее:
function() {
var paymentType = document.querySelectorAll('input[name=payment]');
for (var i = 0; i < paymentType.length; i++){
if (paymentType[i].checked) {
return paymentType[i].parentElement.parentElement.innerText;
}
}
}
Количество parentElement, а также селектор будут у каждого — свои. Этот момент описан в этой статье.
Затем переходим в Триггеры и создадим триггер с названием Click — checkoutOption с типом Клик — Все элементы, где в условиях активации выберем Некоторые клики, и активируем клики при наступлении следующий событий:
| Click Classes | соответствует регулярному выражению | checkout-btn|default-btn|success |
| cjs — checkout_option — step 2 | не равно | undefined |
Click Classes могут быть у каждого свои, поэтому в исследовании нажимаемого элемента важно выяснить, каким классам CSS он принадлежит…
Затем переходим в Теги и создадим тег с названием ecommerce — checkoutOption, выберем тип Пользовательский HTML, и в код пропишем следующее:
<script>
dataLayer.push({
'event': 'checkoutOption',
'ecommerce': {
'checkout_option': {
'actionField': { 'step': 2, 'option': {{cjs - checkout_option - step 2}} }
}
}
});
</script>
и в качестве триггера выберем Click — checkoutOption
Затем возвращаемся в Триггеры и создадим триггер с названием checkoutOption типа Пользовательское событие, и в Имя события пропишем checkoutOption. В условиях активации выберем Некоторые специальные события, и активируем при наступлении следующих событий:
| Event | равно | checkoutOption |
Это необходимо для того, чтобы отправить событие в систему аналитики.
Сохраняем и опубликовываем контейнер.
Далее — переходим в режим предварительного просмотра — вкладка Variables, и проверяем:
Если способ оплаты отображается, значит скрипт при клике на кнопку оформления заказа корректно передаст данные об этом шаге.
Поделиться ссылкой:
