Извлечение данных чекбоксов или радио-кнопок в GTM, не имеющих атрибутов

 

Такая задача возникает в тех случаях, когда чекбокс или радио-кнопка не имеют атрибутов, которые можно было бы легко передать в 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, и проверяем:

Если способ оплаты отображается, значит скрипт при клике на кнопку оформления заказа корректно передаст данные об этом шаге.

Поделиться ссылкой:

 

Читайте также