Связаться со мной

Настраиваем отслеживание цели на отправку Ajax-формы в Яндекс.Метрике и Google Analytics через Google Tag Manager

994
27 минут

Рассказываю, как настроить отслеживание целей-событий на отправку форм на Ajax jQuery для Яндекс.Метрики и Google Analytics без программистов. Такой сценарий используется для отслеживания отправки заявок на обратный звонок, подписку, покупку в 1 клик и похожие вариации, где после отправки страница не обновляется.

Статья будет полезна интернет-маркетологам, PPC и SEO-специалистам, владельцам бизнеса, которые самостоятельно занимаются интернет-маркетингом.

В этой статье я не буду рассказывать, что такое цели, какие они бывают, чем они отличаются в Яндекс.Метрике и Google Analytics. Уровень материала предполагает, что вы с этим знакомы и уже настраивали события ранее. Новичкам, прежде чем читать статью, рекомендую ознакомиться со справкой Яндекс и Google.

Полное содержание

  1. Виды форм и нюансы работы с ними
  2. 3 способа отслеживания отправки формы через Google Tag Manager
    1. Отслеживаем клик по кнопке «Подписаться»
    2. Отслеживаем появление нового DOM-элемента
    3. Отслеживаем событие отправки формы при помощи пользовательской функции Custom Timer
  3. Выводы

Виды форм и нюансы работы с ними

Существует два вида форм:

  1. Обычные c GET или POST запросом
  2. После отправки заявки пользователя переадресовывает на страницу «Спасибо». Например, «/thank-you.html». Этот вариант подходит для одностраничных сайтов, потому что если пользователь оставил заявку, значит лендинг выполнил свою цель и дальнейшей обработкой клиента займется оператор.

    Такой способ удобен для аналитики. Чтобы настроить цель на отправку формы, достаточно указать адрес страницы «Спасибо».

    Другой пример. Если сайт многостраничный, то возможна такая ситуация. Посетитель увлеченно читает статью, медленно скролит вниз и перед ним появляется всплывающее окно с предложением подписаться на рассылку. Материал его увлек, предложение заманчивое, он вписывает email, нажимает на кнопку «Подписаться» и вместо того, чтобы продолжить читать статью, его отправляют на страницу «Спасибо».

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

  3. Ajax
  4. После отправки появляется уведомление об успехе или ошибках без перезагрузки страницы и смены адреса. Посетитель может продолжить дальше изучать сайт.

    Пользователи в таких формах видят только преимущества — состояние экрана не меняется, уведомление отображается плавно. Однако маркетологи и web-мастера сталкиваются с проблемой фиксации целей для отслеживания конверсии, потому что после отправки не появляется URL за который можно «зацепиться».

Для фиксации таких целей в Яндекс.Метрике и Google Analytics существуют JavaScript-события, но для их настройки нужно привлечь разработчика, который внесет функции с идентификатором отслеживания в код сайта. Это за собой влечет такие проблемы:

  1. Трата времени на поиск фрилансера. Создать объявление, найти среди ботов живого человека, договориться, потом найти нового, потому что этот спустя время пропал. Ну, вы с этим сталкивались же 😉.
  2. Трата времени на ожидание. Надежный фрилансер-разработчик, с которым вы постоянно сотрудничаете, не сидит без работы, поэтому даже маленькая задачка встанет в список ожидания и будет выполнена, когда до нее дойдет очередь. Это же касается и IT-отдела компании, где вы работаете маркетологом.
  3. Трата бюджета. Задача по настройке событий несложная, но она требует времени на изучение технического задания и саму настройку. В зависимости от количества целей, к оплате будет посчитан минимум час работы разработчика, даже если это фактически займет 10 минут. К примеру, средняя стоимость часа разработки на Битрикс в агентстве — 20-25$.

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

  1. Съездить в Киев через Владивосток. Разобраться в структуре шаблонов популярных CMS, плагинов, на базовом уровне изучить PHP и JavaScript (полагаю, что HTML и CSS вы уже знаете), залезть в код сайта, внести изменения, что-то сломать, заплатить деньги разработчику, чтобы починил обратно, а потом однажды обнаружить, что настроенные события пропали, потому что обновился плагин.
  2. Освоить Google Tag Manager. Этот инструмент создали как раз для того, чтобы облегчить работу интернет-маркетологам, при этом не допуская посторонних в код сайта, ограничивая область работы контейнером, в котором можно настроить нужные скрипты.

3 способа отслеживания отправки формы через Google Tag Manager

В GTM существует три сущности:

  1. Переменные — место, где будем хранить значения;
  2. Триггеры — условия, при которых будем запускать события;
  3. Теги — события, которые будем выполнять при соблюдении условий.

Итак, рассмотрим варианты, как можно зафиксировать цель на примере формы подписки в этом блоге на WordPress, реализованной через плагин Contact Form 7.

Отслеживаем клик по кнопке «Подписаться»

Спойлер: Это не сработает.

Форма подписки на рассылку в моем блоге
Рисунок 1. Форма подписки, созданная в плагине Contact Form 7

Это же логично! Итак, делаем по шагам.

  1. Создаем триггер «Клик по кнопке подписаться», выбираем тип «Клик — все элементы», условие активации — «Некоторые клики», активируем при наступлении указанного на скриншоте события
  2. Конфигурация триггера типа Клик - все элементы
    Рисунок 2. Настройка Триггера типа «Клик — все элементы»

    На моей кнопке разработчик не указал ID, поэтому мы можем зацепиться за CSS-класс. Узнать его можно кликнув правой кнопкой мыши по элементу и выбрав «Посмотреть код».

    Определяем класс через Посмотреть код в Google Chrome
    Рисунок 3. Определяем class
  3. Создаем тег, который будет запускаться по триггеру и фиксировать событие. Пока не будем ничего отправлять в системы аналитики, а просто для наглядности создадим алерт.
  4. Код Alert
    Рисунок 4. Настройки пользовательского HTML тэга, который выведет уведомление во всплывающем окне
  5. Сохраняем, обновляем, включаем режим предварительного просмотра и тестируем
Alert появился
Рисунок 5. Alert появился
Alert появился
Рисунок 6. Тэг сработал

Успех! И все так просто? Как бы не так.

Пример ошибки, когда значение поля не прошло проверку
Рисунок 7. Пример ошибки, когда значение поля не прошло проверку

Клик по кнопке не означает, что форма отправится. Значения полей могут не пройти валидацию. В форме может использоваться подтверждение соглашения на рассылку или капча. Если не выполнятся условия проверки, то форма не отправится, но событие все равно засчитается, как успешное.

Такой вариант подойдет для фиксации событий, не требующих заполнения форм. Например, «Клик по звездочкам» для оценки рейтинга статьи или лайк.

Отслеживаем появление нового DOM-элемента

Спойлер: Это сработает, но не всегда.

Меняем тактику. После отправки формы Ajax выводит уведомление о статусе, вызывая новый DOM-элемент <div>. Это значит, что нам нужно его «словить» при помощи триггера типа «Доступность элемента», который срабатывает, когда в видимой на экране части страницы появляется подходящий условиям тег HTML.

Разберем по шагам.

  1. Создаем переменную «Сообщение в форме подписки», в которой будем хранить текст появляющегося уведомления
  2. Конфигурация переменной
    Рисунок 8. Селектор CSS «прослушиваем» через «Код страницы» в статусе «Спасибо за подписку!»
  3. Создаем триггер «Спасибо за подписку» типа «Доступность элемента» с приведенными настройками
  4. Конфигурация триггера доступность элемента
    Рисунок 9. Правила запуска триггера выбирайте в условиях частного случая. Для решения текущей задачи подходит «Один раз на страницу»
  5. По аналогии с первым методом создаем тег с алертом для фиксации события, где в качестве триггера выбираем «Спасибо за подписку»
  6. Сохраняем, обновляем, включаем режим предварительного просмотра и тестируем
Alert появился
Рисунок 10. Alert появился
Тег сработал
Рисунок 11. Тег сработал

Ну теперь точно успех! И снова как бы не так.

Этот способ работает, если на странице цель настраивается только на одну форму.

В моем случае есть еще цель «Связаться со мной» и из-за того, что у них одинаковый CSS-селектор, они конфликтуют. Проблемы можно избежать, если использовать метод выбора «Идентификатор», где «прослушивать» уникальный ID появившегося DOM-элемента, но в плагине Contact Form 7 по умолчанию для уведомлений такая настройка отсутствует. Вывод ID можно доработать в коде плагина, но это противоречит цели статьи. И даже несмотря на это, из-за особенности типа триггера «Доступность элемента», событие будет срабатывать каждый раз при открытии всплывающего окна. Вот с этим уже смириться нельзя.

Отслеживаем событие отправки формы при помощи пользовательской функции Custom Timer

В прошлом пункте был выбран верный путь — событие должно срабатывать в случае отображения статуса «Спасибо за подписку!». Для этого нужно решить такие задачи:

  1. Избежать конфликта форм «Подписаться» и «Обратная связь»;
  2. Обеспечить возможность фиксировать цели по каждой форме на одной странице без перезагрузки;
  3. Пресечь вероятность повторного ложного срабатывания событий.

Как я писал выше, конфликт между формами возникает из-за того, что у них одинаковый CSS-селектор. Решить проблему можно двумя способами: либо изменить селекторы, либо изменить метод выбора на «Индификатор». Первый вариант не соответствует цели статьи, а второй невозможно решить при помощи триггера типа «Доступность элемента», но в Contact Form 7 можно сделать «костыль».

Порядок действий такой.

  1. В настройках плагина модифицируем шаблон формы «Подписаться» — добавляем тэг [response], вызывающий вывод уведомлений в указанном месте, и оборачиваем в контейнер <div> с уникальным ID «subscribe-response». Аналогично поступаем с формой «Обратная связь», в которой присваиваем ID «send-response».
  2. Скриншот формы
    Рисунок 12. Для формы «Обратная связь» подчеркнутая строка выглядит так: <div id=»send-response»>[response]</div>

    Это не противоречит цели статьи, т.к. мы не лезем в код плагина, а меняем пользовательские настройки в админке.

  3. Настраиваем две переменные типа «Элемент DOM»: «Сообщение в форме подписки» и «Сообщение в форме связи», где в качестве метода выбора выбираем «Идентификатор».
  4. Конфигурация переменной сообщение в форме подписки
    Рисунок 13. Для переменной «Сообщение в форме подписки» индификатором элемента назначаем «subscribe-response»
    Конфигурация переменной сообщение в форме связи
    Рисунок 14. Для переменной «Сообщение в форме связи» индификатором элемента назначаем «send-response»
  5. В настройках плагина Contact Form 7 модифицируем шаблоны обеих форм — добавляем в тэги [submit] id «response-button» и «send-me-button» соответственно
  6. Модифицированный шаблон для формы подписаться
    Рисунок 15. Модифицированный шаблон для формы «Подписаться». Для «Обратная связь» нужно по аналогии указать ID «send-me-button»
  7. Создаем два триггера: «Клик по кнопке подписаться» и «Клик по кнопке отправить», где типом триггера выбираем «Клик — все элементы» с указанными на скриншоте настройками
  8. Настройки триггера клик по кнопке подписаться
    Рисунок 16. Настройки триггера «Клик по кнопке подписаться». Для «Клик по кнопке отправить» по аналогии в условие «Click ID» нужно указать «send-me-button»

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

    Пустая переменная сообщение в форме подписки
    Рисунок 17. Переменная «Сообщение в форме подписки» пустая

    После клика по кнопке Ajax выводит новый HTML-тег <div>, который ранее я обернул в <div> с ID «subscribe-response». Таким образом, из-за вложенности заполняется значение этого контейнера.

    Появилось значение
    Рисунок 18. В переменной «Сообщение в форме подписки» появилось значение «Спасибо за подписку!»
  9. Создаем пользовательские тэги Custom Timer
  10. Чтобы отправить событие сразу после успешного заполнения формы, нам нужно запустить таймер, который «прослушает» новое значение созданной пользовательской переменной. Так как таймер активируется спустя мгновение после нажатие на кнопку, пользователь физически не успеет совершить никаких действий, которые бы помешали корректно выполнить проверку.

    В GTM есть стандартный триггер «Таймер», который запускает отсчет времени сразу после обновления страницы, поэтому он для решения этой задачи не подходит. Нам нужен таймер, который запустится только после клика по кнопке в форме. Когда пользователь нажмет на кнопку «Подписаться» или «Отправить», сработает триггер, который запустит пользовательский HTML тег с кодом таймера. Другой триггер сравнит значение пользовательской переменной «Сообщение в форме подписки» и если оно будет «Спасибо за подписку!», то цель отправки формы будет достигнута.

    Код пользовательского таймера я взял в блоге web-аналитика Симо Ахавы.

    <script> (function() {
    // CHANGE THESE THREE:
    var eventName = 'custom.timer1'; // The event name that is pushed into dataLayer
    var interval = 5000; // The interval in milliseconds var limit = 1; // The number of times the timer fires // OTHER SETTINGS:
    var timerNumber = 1;
    var startTime = new Date().getTime();
    var fireTimer = function() {
    var timeNow = new Date().getTime(); window.dataLayer.push({
    'event' : eventName,
    'custom.timerCurrentTime' : timeNow,
    'custom.timerElapsedTime' : timeNow - startTime,
    'custom.timerStartTime' : startTime,
    'custom.timerEventNumber' : timerNumber,
    'custom.timerId' : timerId,
    'custom.timerInterval' : interval,
    'custom.timerLimit' : limit });
    timerNumber += 1;
    if (limit < timerNumber) {
    window.clearInterval(timerId); }
    };
    var timerId = window.setInterval(fireTimer, interval); })();
    </script>

    Чтобы избежать возможных конфликтов, для каждой формы рекомендую использовать свой таймер. Для текущей задачи переменные назовем «custom.timer1» и «custom.timer2».

  11. Создаем триггеры пользовательских событий «Спасибо за подписку» и «Сообщение отправлено»
  12. Создаем теги с алертами для проверки
  13. Отправка сообщения фиксируется
    Рисунок 20. Отправка сообщения фиксируется
    Подписка работает
    Рисунок 21. Подписка работает
  14. Обновляем данные, запускаем предварительный просмотр и тестируем
  15. Если поля формы не заполнены, то клик по кнопке вызывает таймер, но событие не сработает, т.к. условие не выполнено. Если поля заполнены корректно, то таймер снова запустится и событие сработает. Тэги не мешают друг другу — пользователь может совершить оба целевых действия без обновления страницы. Успех!

  16. Отправляем события в Google Analytics и Яндекс.Метрику

Для Google Analytics создайте тэг типа «Google Аналитика — Universal Analytics» и выберите тип отслеживания «Событие». Затем внесите отправляемые значения цели, задайте идентификатор отслеживания и выберите триггер.

Конфигурация тега для отправки данных в Google Analytics
Рисунок 22. Конфигурация тега для отправки данных в Google Analytics

В GTM нет интеграции с Яндекс.Метрикой, поэтому событие отправим через тег типа «Пользовательский HTML». Предварительно в Яндекс.Метрике нужно создать цель-событие и получить ее идентификатор отслеживания. В тело тега нужно добавить функцию:

<script>
ym(XXXXXX, 'reachGoal', 'TARGET_NAME') // для счетчиков, установленных после 6.12.2018
yaCounterXXXXXX.reachGoal('TARGET_NAME'); // для старых счетчиков
</script>

где:

  • XXXXXX — номер счетчика;
  • TARGET_NAME — идентификатор цели.
Конфигурация тега для отправки данных в Яндекс Метрику
Рисунок 23. Конфигурация тега для отправки данных в Яндекс Метрику

После обновления контейнера цели начнут фиксироваться. Задача выполнена — цели на форму в Яндекс.Метрике и Google Analytics отслеживаются, при этом я не вносил правок в код сайта, а использовал лишь пользовательский интерфейс Contact Form 7 и Google Tag Manager, не привлекал разработчиков.

Выводы

  1. Формы бывают двух видов: обычные и на Ajax jQuery. Обычные формы следует использовать на лендигах, Ajax — на многостраничных сайтах, где обновление или смена переадрессация ухудшит пользовательский опыт.
  2. Настроить отслеживание целей на отправку формы на Аяксе для Яндекс.Метрики и Google Analytics можно не привлекая разработчиков и не лазя в код CMS. Для этого нужно освоить Google Tag Manager.
  3. Клик по кнопке «Отправить» не гарантирует достижение цели. Поля могут не пройти валидацию или пользователь не отметит соглашение, не заполнит капчу. Фиксировать событие следует только по статусу успешной отправки.
  4. Задача легко решается через стандартный триггер типа «Доступность элемента», но есть нюансы, которые сужают возможность применения этого метода.
  5. Надежней решить задачу с использованием скрипта кастомного таймера, который предложил Симо Ахава
  6. В GTM нет 100%-го способа решения задачи, поэтому задействовать его нужно ситуативно. Предложенный способ сработает на WordPress с плагином Contact Form 7 с применением «костыля», но может не сработать в другой CMS из-за отсутствия элемента за который можно «зацепиться».
  7. Чтобы убедиться, что способ работает, отмотайте страницу вниз и подпишитесь на рассылку 🙂. Получите еще больше советов по аналитике, SEO и интернет-маркетингу. Ну и отправьте ссылку на статью вашим коллегам, если они столкнулись с такой проблемой.
Автор
Занимаюсь интернет-маркетингом, руковожу проектами, выстраиваю бизнес-процессы. Основная специализация - оптимизация сайтов под поисковые системы (SEO). Консультирую, делаю аудиты.