Отслеживание отправки формы Битрикс24 с помощью Google Tag Manager

Подробное руководство по установке на сайт форм Битрикс24 и отслеживания событий с помощью Google Tag Manager для Яндекс.Метрики, Universal Analytics и Google Analytics 4.

Обновление: я выпустил электронное руководство по Google Analytics 4. Бесплатно скачать его можно в формате .PDF по ссылке.

Создание формы в Б24

После того, как вы создали личный кабинет в Битрикс24, самое время перейти к созданию и установке формы Б24 на ваш сайте. Для этого перейдите в раздел CRM - Интеграции - Контакт-центр:

Из представленого списка выберите Форма на сайт и создайте ее:

В зависимости от типа вашего бизнеса и задач с помощью Битрикс24.Формы вы можете создать нужную CRM-форму с необходимым количеством полей. В качестве примера я буду использовать классический тип Контактные данные. Подробный процесс настройки таких форм описан в официальной документации Битрикс24.

Созданная форма будет доступна в разделе CRM - Интеграции - CRM -формы. Далее ее следует разместить на сайт. Для этого напротив формы нажмите Код на сайт.

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

Разместив форму на сайте, можно приступить к ее отслеживанию в Google Tag Manager.

Отслеживаемые события

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

• crm-form
• VirtualPageview

Событие crm-form

Если вы нажмете поочередно на каждое из них и посмотрите уровень данных (dataLayer), то обнаружите, что событие crm-form имеет несколько переменных уровня данных - eventCategory и eventAction:

В них передаются разные значения в зависимости от совершаемого на вашем сайте события с формой. Например, одним из первых событий, которое срабатывает в режиме отладки GTM, является событие crm-form со значениями в уровне данных:

• eventCategory: "Заполнение формы \"\", #9"
• eventAction: "Просмотр формы #9"

, где #9 - внутренний идентификатор формы в Битрикс24. Убедиться в этом можно просмотрев код, который вы или ваш программист добавил на сайт:

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

Событие VirtualPageview

Помимо crm-form разработчики добавили событие VirtualPageview, в dataLayer которого по умолчанию передается параметр virtualPageURL с предопределенным значением:

Это сделано для того, чтобы сайты, у которых контент на странице подгружается динамически (так называемые Single Page Application, SPA-сайты), тоже смогли отслеживать действия с формой и передавать просмотр данной формы как виртуальный просмотр страницы. Например, одним из первых событий, которое срабатывает в режиме отладки GTM, является событие VirtualPageview со значением в уровне данных:

• virtualPageURL: "B24_9_VIEW.html"

Условие, которое передается в этой переменной, может быть использовано для отслеживания просмотра страницы конкретной CRM-формы или всех стразу.

Давайте разбираться дальше.

Начало заполнение формы

Как только вы поставите курсор мыши в поле формы, будут снова активированы события crm-form и VirtualPageview, но уже с другими значениями уровня данных.

Для crm-form:

Для VirtualPageview:

Поскольку Битрикс24 посчитал, что пользователь начал заполнять CRM-форму, он автоматически подставил такие значения в eventCategory и eventAction. В eventAction сначала был Просмотр формы, теперь уже Начато заполнение формы. Аналогично с virtualPageURL - B24_9_VIEW.html сменилось на B24_9_START.html.

Ввод контактных данных

Для каждого поля, которое пользователь начнет заполнять в форме, будут также срабатывать два события crm-form и VirtualPageview. Например, уровни данных для поля Имя выглядят так:

crm-form

• eventCategory: "Заполнение формы \"\", #9"
• eventAction: "Заполнено поле \"Имя\", #9"

VirtualPageview

• virtualPageURL: "B24_9_CONTACT_NAME.html"

Для поля Фамилия уровень данных другой:

crm-form

• eventCategory: "Заполнение формы \"\", #9"
• eventAction: "Заполнено поле \"Фамилия\", #9"

VirtualPageview

• virtualPageURL: "B24_9_CONTACT_LAST_NAME.html"

Для поля Телефон dataLayer меняется на:

crm-form

• eventCategory: "Заполнение формы \"\", #9"
• eventAction: "Заполнено поле \"Телефон\", #9"

VirtualPageview

• virtualPageURL: "B24_9_CONTACT_PHONE.html"

Для поля E-mail dataLayer становится:

crm-form

• eventCategory: "Заполнение формы \"\", #9"
• eventAction: "Заполнено поле \"E-mail\", #9"

VirtualPageview

• virtualPageURL: "B24_9_CONTACT_EMAIL.html"

Благодаря такой реализации в Битрикс24, вы сможете построить воронку визуализации по заполнению каждого из полей формы, используя специальные события или отправку просмотра виртуальной страницы, а потом создать составную цель в Universal Analytics, чтобы увидеть итоговый результат и те шаги, на которых пользователи "отваливались" чаще всего (перестали заполнять форму). В моем блоге есть похожая статья на эту тему.

Отправка формы

Когда пользователь на вашем сайте заполнит форму и отправит ее, будут снова активированы события crm-form и VirtualPageview, но уже с другими значениями уровня данных.

Для crm-form:

Для VirtualPageview:

Теперь, когда пользователь отправил CRM-форму, в eventCategory и eventAction значения вновь изменились. В eventAction сначала был Просмотр формы, потом Начато заполнение формы, теперь Успешно заполнена форма. Аналогично с virtualPageURL - было B24_9_VIEW.html, потом B24_9_START.html, после отправки формы - B24_9_END.html.

Таким образом, для упрощения дальнейшей настройки мы можем свести все данные в общую таблицу, чтобы увидеть отличия в уровне данных для разных шагов отслеживания:

, где X - значение вашей CRM-формы в Битрикс24. Оно может быть другим.

Дополнительно передаются события для каждого поля формы. Но я не стал добавлять их в эту итоговую таблицу, поскольку количество полей в форме индивидуально от проекта к проекту. Следовательно, количество дополнительных событий и отслеживаний так же варьируется от сайта к сайту.

Отслеживание целей и событий без Google Tag Manager

Если вы на сайте не используете Google Tag Manager, и ваши счетчики установлены напрямую в код сайта, Битрикс24 сам будет регистрировать данные события без дополнительных настроек. Все эти значения прописаны в экспертном режиме при редактировании CRM-формы в интерфейсе Б24:

Открыв раздел Аналитика, в таблице отобразится перечень всех автоматически отслеживаемых событий для каждого из счетчиков аналитики:

Будьте внимательны - для Google Analytics названия событий отличаются:

Способы отслеживания

Ниже разберем два способа отслеживания отправки формы с помощью диспетчера тегов Google:

1. через теги специального события;
2. через отправку виртуальных страниц (для SPA-сайтов).

Для каждого из вариантов настроим соответствующие конверсии в Яндекс.Метрике, Universal Analytics и Google Analytics 4.

Настройка через теги специального события

Перейдите в раздел Переменные и создайте пользовательские переменные типа Переменная уровня данных. Одна будет иметь значение eventCategory, а другая eventAction. Обе с версией 2:

Сохраните переменные. Имена переменных должны быть точно такими же, как они отображаются на уровне данных (как на скриншоте). В эти переменные будут подставляться значения из события crm-form каждого шага.

Теперь добавьте триггер типа Специальное событие с названием события crm-form.

Если вы желаете отслеживать все события, которые совершаются с вашей CRM-формой, вы можете оставить условия активации триггера на все события. Однако в него будут попадать и события заполнения отдельных полей формы - имени, фамилия, телефона, e-mail и т.д. Если вы желаете отслеживать ТОЛЬКО факт отправки формы после ее заполнения, тогда в качестве условия активации триггера вам необходимо добавить дополнительный критерий:

Если конкретная форма, то:

• eventAction равно Успешно заполнена форма #9

Если для всех форм на сайте:

• eventAction содержит Успешно заполнена форма

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

Сохраните триггер. Его можно использовать при активации тегов для Яндекс.Метрики, Universal Analytics и Google Analytics 4.

Тег для Яндекс.Метрики

На последнем шаге настройки перейдите в раздел Теги и создайте их поочередно для каждой аналитической системы. Тег для Яндекс.Метрики будет выглядеть так:

Конструкцию ym(66673933,'reachGoal','form9') вы копируете из интерфейса Яндекс.Метрики при создании цели типа JavaScript-событие, задав для нее идентификатор:

В качестве триггера активации вы выбираете триггер специального события, созданный на предыдущем шаге. Для отслеживания всех форм действия аналогичны, просто не конкретизируйте в идентификаторе цели какая эта форма. Можете задать не form9, а просто form, а триггер будет не с равно, а содержит (см. выше).

Тег для Universal Analytics

Создайте тег Google Аналитика: Universal Analytics с типом отслеживания Событие и следующими настройками:

• Категория - Форма 9
• Действие - Отправка

Эти настройки вы можете задать самостоятельно, по желанию и в зависимости от вашей CRM-формы. Поскольку у меня форма имеет идентификатор 9, я решил конкретизировать. Если вы сделаете так же, при создании цели в интерфейсе Universal Analytics вы должны будете указать точно такие же настройки, как и в теге:

Тогда при тестировании отправки данных в Google Analytics в отчете В режиме реального времени вы увидите и событие, и достигнутую цель:

Для отслеживания всех форм действия аналогичны, просто не конкретизируйте в теге в поле Категория какая эта форма. Можете задать не Форма 9, а просто Форма, а триггер будет не с равно, а содержит (см. выше). И в настройках цели в интерфейсе Universal Analytics задайте:

• Категория - Форма
• Форма - Отправка

Тег для Google Analytics 4

Создайте тег Google Аналитика: событие GA4, предварительно установив сам счетчик GA4 через Google Tag Manager, со следующими данными:

• Тег конфигурации - ваш тег Google Analytics 4
• Название события - send_form9 (например)

Название события вы можете задать самостоятельно, по желанию и в зависимости от вашей CRM-формы. Поскольку у меня форма имеет идентификатор 9, я решил конкретизировать и отправить уникальное событие для данной формы.

В Google Analytics 4 все обращения фиксируются как события, и от момента совершения события до момента, когда вы увидите данные в отчетах GA4, может пройти до 24 часов. Но проверить передачу данных вы можете с помощью отчета В реальном времени или инструмента DebugView.

Чтобы создать из события конверсию, дождитесь ее появления в разделе Конфигурация - События и напротив нужного события отметьте его как конверсию:

Либо же перейдите в раздел Конфигурация - Конверсии и создайте конверсию вручную, задав ей точно такое же название события, которое вы ввели в теге GA4 в Google Tag Manager:

Для отслеживания всех форм действия аналогичны, просто не конкретизируйте в теге события название события, напишите send_form, а не send_form9. И триггер будет не с равно, а содержит (см. выше).

Бонус для Google Analytics 4

Вы можете создать дополнительную переменную, в которую будете излекать названия форм (если их на сайте несколько), а затем с параметром события передавать ее значение в Google Analytics 4.

Сделать это можно с помощью пользовательской переменной типа Таблица регулярных выражений. Задайте входную переменную eventAction, из которой вы будете забирать значение идентификатора формы, идущее после решетки #. В качестве шаблона укажите все идентификаторы форм, которые используются у вас на сайте. А в поле Результат введите значение, которое хотите, чтобы отображалось в удобочитаемом виде. Его мы и будем передавать в параметрах события вместе с отправкой формы.

Примечание: в Advanced Settings снимите две галочки напротив Только полное соответствие и Включите группы для извлечения подстроки и функцию замены.

Вместо forma_7, forma_8, forma_9 и т.д. вы можете задать свои собственные значения, удобные и наиболее привычные. Сохраните переменную.

После этого скорректируйте уже созданный тег события Google Analytics 4, добавив параметр события, например, form_id и вашу новую переменную:

Теперь при отправке формы Битрикс24 в Google Analytics 4 дополнительно будет отправляться параметр события с конкретной формой:

Не забудьте в интерфейсе Google Analytics 4 для параметра события создать специальный параметр, чтобы видеть эти данные в отчетах GA4 и Исследованиях.

Настройка через отправку виртуальных страниц

Для отслеживания целей и событий, связанных с SPA-сайтами (контент которых подгружается на странице динамически), рекомендуется использовать событие VirtualPageview.

Но перед тем, как создать триггер, еще нужно создать переменную уровня данных, которая передается в этом специальном событии. Перейдите в раздел Переменные и создайте пользовательскую переменную типа Переменная уровня данных с именем virtualPageURL и версией 2:

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

Теперь добавьте триггер типа Специальное событие с названием события VirtualPageview:

Если вы желаете отслеживать все виртуальные просмотры страниц, которые совершаются с вашей CRM-формой, вы можете оставить условия активации триггера на все события. Однако в него будут попадать и просмотры (шаги) заполнения отдельных полей формы - имени, фамилия, телефона, e-mail и т.д. Если вы желаете отслеживать ТОЛЬКО факт отправки формы после ее заполнения, тогда в качестве условия активации триггера вам необходимо добавить дополнительный критерий:

Если конкретная форма, то:

• virtualPageURL равно B24_9_END.html

Если для всех форм на сайте:

• virtualPageURL содержит END.html

В первом случае мы указываем условие равно и добавляем конструкцию с идентификатором формы, а во втором содержит и без идентификатора (с окончанием END.html), поскольку вы уже знаете, что это значение разное от формы к форме. И для отслеживания отправки всех форм нам достаточно общего правила для всех форм.

Сохраните триггер. Теперь его можно использовать при активации тегов для Яндекс.Метрики, Universal Analytics и Google Analytics 4 и отправки просмотра виртуальных страниц.

Тег для Яндекс.Метрики

На последнем шаге настройки перейдите в раздел Теги и создайте их поочередно для каждой аналитической системы. Для передачи в Яндекс.Метрику используется такая конструкция:

, где:

• XXXXXX - номер счетчика Яндекс.Метрики;
• /virtualpage - URL-адрес виртуальной страницы, который вы можете задать самостоятельно.

Поскольку Битрикс24 в dataLayer передает такой URL-адрес, проще всего используйте созданную на предыдущем шаге переменную уровня данных virtualPageURL.

Тогда тег для Яндекс.Метрики будет выглядеть так:

В данном случае, после отправки формы срабатывает триггер VirtualPageview, который активирует тег Яндекс.Метрики, и он передает виртуальный просмотр страницы с помощью метода hit и конструкции /{{virtualPageURL}}, куда подставляется значения текущей формы из уровня данных. А поскольку URL-адрес берется из переменной virtualPageURL динамически, вы можете отслеживать все CRM-формы на вашем сайте с помощью такого решения. И не нужно создавать множество триггеров и тегов для каждой формы.

Проверить корректность передачи данных можно с помощью расширения Yandex Metrica Debugger. После отправки формы на шкале событий должен появиться hit с URL-адресом страницы вашей CRM-формы.

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

Тег для Universal Analytics

Виртуальные страницы для Universal Analytics в Google Tag Manager отслеживаются с помощью условия активации и поля page, которое необходимо задать в дополнительных настройках тега. Поскольку триггер у нас уже создан, создайте тег Google Аналитика: Universal Analytics с типом отслеживания Просмотр страницы. В дополнительных настройках к тегу в поле Поля, которые необходимо задать следует указать page и адрес виртуальной страницы, который заполняется произвольно. Поскольку у нас уже есть готовая переменная уровня данных, в которую Битрикс24 подставляет идентификатор формы, мы воспользуемся такой конструкцией:

• page /{{virtualPageURL}}

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

Проверить корректность передачи данных можно с помощью отчета В режиме реального времени. После отправки формы в отчете Контент вы увидите URL-адрес отправленной формы (виртуальной страницы).

В завершение вы можете создать цель с типом Целевая страница, указав значение URL-адреса данной формы:

Статистику по просмотрам страниц в Universal Analytics можно посмотреть в разделе Поведение - Контент сайта - Все страницы.

Тег для Google Analytics 4

Поскольку в Google Analytics 4 все обращения - это события, то просмотр виртуальной страницы то же будет являться событием page_view. Для этого создайте тег Google Аналитика: событие GA4, предварительно установив сам счетчик GA4 через Google Tag Manager, со следующими данными:

• Тег конфигурации - ваш тег Google Analytics 4
• Название события - page_view

В параметрах события используйте page_location со значением /{{virtualPageURL}}:

Параметр page_location - автоматически регистрируемый параметр в Google Analytics 4, который фиксирует URL-адрес текущей страницы. Для передачи виртуального просмотра страницы в GA4 нам не нужно создавать какой-либо новый параметр, а можно воспользоваться этим.

После отправки формы в DebugView отобразится соответствующее событие page_view с переопределенным значением параметра события page_location:

Статистику по просмотрам страниц в Google Analytics 4 можно посмотреть в разделе Отчеты - Взаимодействие - Страницы и экраны или в Исследованиях.