Друзья, всем привет.
Настройка цели по отправке форм — одна из самых частых задач, с которой сталкивается веб-аналитик.
В этом посте мы рассмотрим весь процесс — от создания аккаунта Google Tag Manager до непосредственного внедрения цели на сайт с CMS WordPress.
Создание аккаунта Google Tag Manager
Необходимо перейти на официальную страницу Google Tag Manager и войти в свой аккаунт Google.
Перед Вами откроется страница с со списком ранее созданных аккаунтов GTM.
Нажимаем кнопку «Создать аккаунт»:
В открывшемся окне необходимо заполнить все поля актуальными данными:
Далее, необходимо согласиться с условиями использования Диспетчера тегов Google (прокручиваем страницу до конца, ставим галочку и нажимаем кнопку «Да»).
На следующем шаге на экране появится код Google Tag Manager, не закрывайте эту вкладку, она пригодится нам далее.
Вставляем код Google tag manager на сайт
Быстро вставить код GTM на сайт можно с помощью плагина LuckyWp Scripts Control. Он бесплатный, компактный и имеет интуитивно понятный интерфейс.
Процесс установки плагина стандартный — в админке WP заходим в раздел «Плагины» — «Добавить новый»:
В строке поиска вводим название плагина — luckywp scripts control, в списке ниже нажимаем «Установить» и «Активировать».
Далее, в новой вкладке браузера переходим на страницу Google Tag Manager, раздел «Администрирование» — «Установить Google Manager тегов» (или просто откройте вкладку с кодом GTM, если следуете инструкции с первого шага):
Откроется окно с кодом GTM, его мы и будем копировать на свой сайт:
Возвращаемся в административную часть своего сайта и переходим в раздел «Настройки» — «Скрипты»:
Остается лишь нажать кнопку «Добавить код» и скопировать код GTM в соответствующий раздел head и body:
Рекомендую в настройках скрипта всегда указывать понятное название кода, для GTM это может быть, например GTM head и GTM body соответственно:
Теперь возвращаемся на вкладку с главной страницей Google Tag Manager и нажимаем кнопку «Отправить», чтобы передать информацию о внесенных изменениях на сервер Google:
В описании версии рекомендую указать «Публикация контейнера GTM» (название версии может быть любым) и нажать кнопку «Опубликовать»:
Таким образом можно прописать мета-тег или установить любой javascript-код на сайт WP без вмешательства в его код.
Поздравляю, Google tag manager корректно установлен на Ваш сайт, переходим к следующему пункту!
Contact form 7 — установка плагина и создание формы
Существует множество способов для создания форм на сайтах под управлением CMS WordPress, мы в своем примере используем один из популярнейших плагинов — Contact form 7.
В предыдущем пункте мы уже рассматривали процесс установки плагина, снова переходим в административную панель — пункт меню «Плагины» — «Добавить новый», в поиске вводим название — Contact Form 7, выбираем плагин из списка и нажимаем «Установить» и «Активировать»:
После активации плагина, в в левом меню административной панели сайта появился пункт «Contact form 7». Щелкаем по нему и переходим в раздел «Контактные формы»:
В следующем окне нас интересует шорткод — необходимо скопировать его
и вставить на ту страницу сайта, где планируется использование формы:
Не забывайте сохранить изменения. Переходим к следующему шагу!
Установка счетчика Яндекс метрики и настройка цели заполнения формы
Для создания счетчика необходимо войти в свою электронную почту и перейти на главную страницу Яндекс метрики.
После нажатия на кнопку «Добавить счётчик» перед нами откроется мастер создания нового счетчика. Необходимо указать имя (можно на русском языке), адрес сайта, выбрать часовой пояс, включить вебвизор с аналитикой форм и принять условия следующего соглашения.
Если счетчик планируется использовать только на одном домене, галочки в чекбоксах ставить необязательно. После нажатия на кнопку «Создать счётчик», перед нами откроется окно с кодом, который необходимо скопировать в буфер обмена:
Внизу нажимаем кнопку «Начать пользоваться»:
Для установки кода на сайт переходим в рабочую область Google Tag Manager, заходим в раздел «Теги» и нажимаем на кнопку «Создать»:
Далее указываем название тега, например «Счетчик Яндекс Метрики», и щелкаем в область конфигурации тега:
Выбираем тип тега «Пользовательский HTML»:
В секцию HTML вставляем код счетчика Яндекс Метрики:
Далее щелкаем по нижней секции:
и выбираем триггер «Все страницы» (или «All pages»):
Остается лишь сохранить тег и отправить данные на сервер.
Счетчик Яндекс метрики успешно установлен на Ваш сайт, продолжим.
Теперь необходимо создать цель на отслеживание заполнения форм во вновь созданном счетчике.
Заходим в сам счетчик с главной страницы Яндекс метрики и переходим в пункт меню «Настройка», раздел «Цели», нажимаем кнопку: «Добавить цель»:
Указываем название цели (например, form), тип условия — javascript-событие, идентификатор цели — form. Нажимаем «Скопировать код» и «Добавить цель»:
Готово. Переходим к финальному шагу настройки.
Google tag manager: настройка прослушивания форм и передача данных в Яндекс метрику
Прежде чем возвращаться в GTM, сохраним в текстовом файле код цели для сайта, скопированный в конце предыдущего шага. Позже мы возьмем оттуда номер нашего счетчика.
В GTM нам необходимо создать один пользовательский триггер и два тега.
Начнем с создания тега, фиксирующего взаимодействие пользователя с формой, созданной при помощи плагина contact form 7.
В рабочей области GTM переходим в пункт меню «Теги» — «Создать» — «Тип тега — пользовательский HTML».
Далее, копируем и вставляем в окно HTML следующий код:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "formSubmit",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>
В качестве триггера выбираем — «Все страницы». Название тега — любое:
Сохраняем и публикуем тег.
Следующий шаг — создание триггера, который будет срабатывать при заполнении формы. Переходим в пункт меню «Триггеры» — «Создать» — «Тип события — Пользовательское событие»:
В графе «Имя события» указываем formSubmit. Будьте внимательны — необходимо точно соблюдать синтаксис, иначе событие не сработает!
Название события — также рекомендую указать formSubmit или заполнение формы:
Сохраняем и опубликовываем изменения.
Мы почти у цели — осталось передать информацию о заполненной форме в наш счетчик Яндекс Метрики!
Для этого переходим в раздел «Теги» — «Создать» — «Тип тега — Пользовательский HTML» — и вставляем следующий код:
<script>
yaCounter123456.reachGoal('form');
</script>
123456 — замените на номер Вашего счетчика Яндекс Метрики. Взять его можете из файла с кодом, который мы создали в начале этого шага или со страницы настроек (пример):
В качестве триггера для тега указываем пользовательское событие formSubmit:
Сохраняем тег и публикуем изменения на сервере.
Все готово! Проверить работоспособность тегов можно при помощи режима отладки в Google Tag Manager или зайдя на сайт с другого браузера и заполнив форму на сайте.
О работе в режиме отладки (предварительнго просмотра) я расскажу в одном из следующих постов, поэтому сегодня можете использовать второй вариант.
Если у Вас остались вопросы — задавайте из в комментариях! Всем удачи и до скорых встреч.
