Отслеживание форм на сайте через Google Tag Manager

В начале прошлого века нобелевский лауреат, физиолог Иван Петрович Павлов читал лекции о русской ментальности. Спустя сто лет мы не особо продвинулись в этом направлении, но кое-что добавить все-таки удалось. Сегодня поговорим об отслеживании данных, которые пользователи вводят на вашем сайте.

Зачем отслеживать формы?

  • Во-первых, поймем, какие поля вызывают затруднения.
  • Во-вторых, получим ввод даже без сабмита формы.
  • В-третьих, соберем в аналитике все данные, по которым потом можно сегментировать юзеров или крутить им персональную рекламу через динамический ремаркетинг.
  • Потому что можем!

 

Не забудьте на стороне аналитики вырезать все персональные данные!
Брин предупреждает

Как отслеживать формы?

Для этого повесим обработчик на все input и select,  который будет отслеживать изменения и передавать их в Google Analytics. Вот, что у вас должно быть в теге Пользовательский HTML:

 1 2 3 4 5 6 7 8 910111213141516171819202122232425262728293031323334353637383940414243
<script>
  // отправляем событие в GA
  function sendEventGA(element, value) {
    dataLayer.push({
      'event': 'inputBD',
      'eventAction': element.id, // передаем id поля в Действие
      'eventLabel': value // новое значение в Ярлык
    });
  }

  // расширяем addEventListener для нескольких типов событий
  function listenEvents(element, eventNames, handler) {
    var events = eventNames.split(' ');
    for (var i = 0;  i < events.length; i++) {
      element.addEventListener(events[i], handler, false);
    }
  }

  // обрабатываем предполагаемое изменение
  function handleInput() {
    if(this.value != this.getAttribute('data-previous-value'))
    {
      sendEventGA(this, this.value);
      this.setAttribute('data-previous-value', this.value);
    }
    if(this.checked.toString() != this.getAttribute('data-previous-checked'))
    {
      sendEventGA(this, this.checked);
      this.setAttribute('data-previous-checked', this.checked);
    }
  };

  // ищем все поля
  var fields = document.querySelectorAll('input, select');

  // навешиваем обработчик изменяющих событий
  for (var i = 0; i < fields.length; i++) {
    fields[i].setAttribute('data-previous-value', fields[i].value); //сохраняем старое значение
    fields[i].setAttribute('data-previous-checked', fields[i].getAttribute('checked')); // сохраняем состояние чекбокса
    listenEvents(fields[i], 'propertychange change click keyup input paste', handleInput);
  }

</script>

  Триггером Модель DOM готова для нужной страницы:

Отслеживание форм на сайте через Google Tag Manager

  Теперь при изменении поля в dataLayer будет отправлено событие inputBD, у которого действием указан id этого поля, а ярлыком новое значение. Осталось только добавить его в словарь, чтобы правильно передать событие в Google Analytics.

comments powered by Disqus