27 июн 2019

Как настроить свои переменные для проверки форм в Google Tag Manager?

В Google Tag Manager есть возможность создать собственные переменные. Но для чего это нужно? Самый яркий пример применения таких переменных - это проверка валидации формы.

Давайте разберем несколько примеров.

Проверка заполненности поля

Это нужно для того, чтобы триггер активировался только тогда, когда все необходимые поля были заполнены. Без данных переменных триггер активировался бы при каждом нажатии кнопки "Отправить"
1. Создаем собственную переменную

Переходим во вкладку переменные -> создать "Пользовательские переменные"

2. Выбираем тип переменной «Собственный код JavaScript»

3. Вставляем собственный JavaScript код

Необходимо вставить JS код в поле переменной (для удобства можете скопировать код)

function() {
return document.getElementsByName("fio")[0].value
}

Вместо "fio" необходимо вставить свой индификатор поля.

Через режим "исследования" в браузере (необходимо нажать правой кнопкой мыши) смотрим какой name у поля.

4. Так делаем для каждого поля, которое мы хотим проверить на заполненность, перед активацией триггера.

5. Создаем триггер (если забыли как создать триггер смотрите статью "Google Tag Manager Часть 2")

При создании триггер – выбираем созданную переменную (поэтому заранее, желательно, дать понятное имя новой переменной. Например, указать что за форма + какое поле проверяем.)

В настройках переменной выбираем: «не соответствует регулярному выражению» - ^$

Повторяем для каждой созданной переменной. Теперь триггер активируется только при условие того, что поля будут непустыми.

Проверка длины телефона

Парой заполненность полей не гарантирует качество отправляемой формы. Поэтому мы можем сделать условия проверки на кол-во символов, вводимых в поле. Это актуально особенно  для поля с Телефоном, где есть стандартное кол-во символов в диапазоне 11-18 символов.

Создаем собственную переменную «Собственный код JavaScript», но вводим уже другой JS код

function() {

return document.getElementsByName('phone')[1].value.length;

}

Не забываем поменять "phone" на собственное значение name в поле.

При создании триггера выбираем наши переменные и указываем диапазон символов (пример на скрине)

Проверка корректности символов в поле телефон, почта

Формы обратной связи могут быть на сайте достаточно объемными, поэтому для удобства настройки валидности формы мы можем создать единую собственную переменную, где будем проверять:

  • Заполненность полей формы
  • Проверять корректность вводимого номера телефона
  • Корректность написания почты

1. Создаем собственную переменную «Собственный код JavaScript»

2. Вставляем в поле переменной код

function(){

var name = jQuery('input[name="p14"]').val();
var tel = jQuery('input[name="p15"]').val();
var email= jQuery('input[name="p16"]').val();

var telReg = /^\+?[0-9()\- ]{10,20}$/;
var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

if(name.length > 0 && emailReg.test(email) && telReg.test(tel)) {

return true;

} else {

return false;

}

}

Вместо p14, p15, p16 вставляем свои значения name.

2. Создаем триггер 

В настройках активации триггера выбираем созданную переменную и в настройках переменной прописываем: "равно" -> true.

Теперь триггер будет активироваться только при корректном вводимом телефоне и почте, и не пустым полем Имя.

Мини-итог

Не забываем проверять корректность настройки активации триггеров через режим "предварительного просмотра"!

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

Оставить свой комментарий

}
Задать вопрос Вверх