В начале прошлого века нобелевский лауреат, физиолог Иван Петрович Павлов читал лекции о русской ментальности. Спустя сто лет мы не особо продвинулись в этом направлении, но кое-что добавить все-таки удалось. Сегодня поговорим об отслеживании данных, которые пользователи вводят на вашем сайте.
Зачем отслеживать формы?
- Во-первых, поймем, какие поля вызывают затруднения.
- Во-вторых, получим ввод даже без сабмита формы.
- В-третьих, соберем в аналитике все данные, по которым потом можно сегментировать юзеров или крутить им персональную рекламу через динамический ремаркетинг.
- Потому что можем!
Не забудьте на стороне аналитики вырезать все персональные данные!
-- Брин предупреждает
Как отслеживать формы?
Для этого повесим обработчик на все input и select, который будет отслеживать изменения и передавать их в Google Analytics. Вот, что у вас должно быть в теге Пользовательский HTML:
<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 готова для нужной страницы:
Теперь при изменении поля в dataLayer будет отправлено событие inputBD, у которого действием указан id этого поля, а ярлыком новое значение. Осталось только добавить его в словарь, чтобы
правильно передать событие в Google Analytics.