Отслеживание заявок с сайта в Google Analytics и Яндекс Метрике на примере ContactForm 7 для WordPress

Текстовый транскрипт видео:

В этом видео мы разберем, как отслеживать заявки сайта в Яндекс Метрике и Google Analytics на примере ContactForm7 для WordPress. Этот метод будет работать, даже если вы используете какие-то другие плагины на вашем сайте или вообще используете другую систему управления сайтом, как например «Joomla» или «Битрикс». Здесь важно в принципе понять алгоритм и схему работы.

Необходимость отслеживания заявок с сайта

Для начала, давайте вкратце определимся для чего нам отслеживать заявки? В основном, взаимодействие пользователей с нашими сайтами происходит, как правило, в форме отправления заявок или звонков по телефонам. В данном видео мы не будем рассматривать, как отслеживать звонки по телефону в аналитике – мы разберем, как отслеживать именно отправку формы. Формы, к примеру, могут быть:

• Большие, с большим количеством полей, вынесенных на отдельную страницу;
• Небольшие формы, состоящие всего из нескольких полей (как заявка непосредственно на главное странице или это могут быть всплывающие формы).

В любом из перечисленных случаев нас интересует отслеживание факта отправления формы в аналитике. Потому что, настроив это, мы сможем: оценивать эффективность источников трафика, какой канал приносит нам больше заявок (контекстная реклама или может быть SEO, или трафик из социальных сетей, или рефералы с какого-то конкретного сайта). Мы можем так же связать все воедино в аналитике и отслеживать эффективность до уровня отдельных ключевых слов. Какие ключевые слова действительно приносят нам клиентов? Имеет ли смысл продвигать данное ключевое слово, если оно вообще не приносит клиентов и заявок по нему никто не оставляет?

Поэтому отслеживание отправок форм/заявок с сайта в аналитике вещь крайне полезная и если вы этого не делаете – это обязательно нужно настроить.

Особенности кода Google Analytics

Чтобы не возникло путаницы, давайте рассмотрим некоторые особенности кода Google Analytics. Потому что в зависимости от того, какой код Google Analytics будет использоваться на вашем сайте, фрагменты кода, используемые для отслеживания отправки формы в ContactForm7, будут немного различаться.

1. Universal Google Analytics Code

Если вы собираетесь устанавливать Google Analytics или добавляете ее сейчас на сайт, то Google Analytics выдаст вам, так называемый Universal Google Analytics Code.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-XXXXXXX-1', 'auto');
  ga('send', 'pageview');
</script>

Определить, что это последняя версия кода Google Analytics можно посмотрев на используемую библиотеку.  Она выделена красным – это analytics.js. Чтобы определить какой код Google Analytics вы используете нам нужно посмотреть на два момента:

1. Используемая библиотека в нашем случае это analytics.js. Это говорит о том, что мы используем последнюю версию Universal Google Analytics
2. Смотрим на название функции. В данном случае – это ga.Такой код генерирует по умолчанию GoogleAnalytics для вставки на сайте.

Если вы вставляете код Google Analytics без изменений и не используете плагин для генерации кода Google аналитики, то в данном случае код для ContactForm7 будет выглядеть вот так:

Сниппет для ContactForm7 если стоит Universal Google Analytics

 on_sent_ok: "ga('send', 'event', 'Contact Form', 'submit');" 

Как это расшифровать? При отправке формы, ContactForm7 отправляет событие с категорией ‘Contact Form’ и действием ‘submit’. И в дальнейшем мы можем использовать эту информацию для настройки цели непосредственно в Google Analytics. На данном этапе, нам нужно понять, какой код мы используем, и какой фрагмент кода нужно использовать в настройках ContactForm7. Это был Universal Google Analytics Code.

2. Classic Google Analytics Code

Если сайт у вас стоит уже давно и аналитику вы подключали 2-3 или больше лет назад, то вполне возможно, что у вас используется Classic Google Analytics Code. Для того чтобы это определить, мы можем посмотреть в исходном коде страницы как выглядит наш код:

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);
  (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();</script>

То есть, он использует библиотеку ga.js. Если используется эта библиотека, то у вас Classic Google Analytics Code, и функция называется _gaq.push. Обратите внимание на эти две переменные, если у вас старая библиотека и название функции.

В данном случае код, используемый для отслеживания заявок в ContactForm7, который мы будем использовать – он выглядит вот так:

Сниппет для ContactForm7 если стоит Classic Google Analytics

on_sent_ok: "_gaq.push(['_trackPageview', '/goals/contact-us/']);"

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

Это мы используем,  когда у нас стоит классический код, до Universal Google Analytics Code, то есть старый код, если сайт у вас используется уже давно.

3. Analytics by MonsterInsights/Google Analytics by Yoast

И следующая особенность, если вы используете плагин. В частности, я использую плагин, раньше он назывался Google Analytics by Yoast. Сейчас они его переименовали, и он называется Google Analytics by MonsterInsights. По сути, это одно и то же, то есть один и тот же  разработчик его выпускает.

<script type="text/javascript">
(function(i,s,o,g,r,a,m)
{i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })
(window,document,'script','//www.google-analytics.com/analytics.js','__gaTracker');
__gaTracker('create', 'UA-XXXXXXX-20', 'auto');
__gaTracker('set', 'forceSSL', true);
__gaTracker('require', 'displayfeatures');
__gaTracker('require', 'linkid', 'linkid.js');
__gaTracker('send','pageview');
</script>

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

Например, в Google Analytics by MonsterInsights переименована функция ga. Они дала ей название __gaTracker. Мы опять же смотрим, что здесь используется новая библиотека analytics.js‘. То есть это значит, что мы используем последнюю версию Universal Google Analytics Code, но название функции здесь переименовано, стоит не то, которое генерируется по умолчанию, называется она __gaTracker.

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

Сниппет для ContactForm7 если стоит MonsterInsights

on_sent_ok: "__gaTracker('send', 'event', 'Contact Form', 'Online Order');"

То есть, мы берем название функции — __gaTracker , и отслеживаем нашу отправку формы как событие, категория у этого события ‘Contact Form’ и событие ‘Online Order’.

Итак, мы разобрались с особенностями кода Google Analytics и теперь вы можете определить, какой код используется у вас на сайте и, соответственно, какой сниппет кода для ContactForm7вам нужно использовать.

Снипеты кода и настройка ContactForm7 для отслеживания заявок

Теперь давайте разберем, как непосредственно все это прикрутить на сайте. Здесь мы заходим в консоль управления WordPress, переходим в формы  ContactForm7, где у нас будет список форм. Выбираем ту форму, для которой мы хотим настроить отслеживание отправки формы в Яндекс Метрике и Google Analytics.

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

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

on_sent_ok: "__gaTracker('send', 'event', 'Contact Form', 'Online Order');"
on_sent_ok: "yaCounterXXXXXXXX.reachGoal('Online Order');"

В данном случае у нас используется Google Analytics в качестве плагина. Плагин этот – Google Analytics by MonsterInsights, соответственно он использует переименованную функцию, и мы используем вот такой сниппет кода:

on_sent_ok: "__gaTracker('send', 'event', 'Contact Form', 'Online Order');"

Если у вас используется стандартный код Google Analytics, вы сюда вставляете соответствующий сниппет. Если у вас используется Classic Google Analytics Code, то вы сюда вставляете соответствующий сниппет для Google Analytics.

Здесь вы прописываете категорию события. То есть у нас отправка формы отслеживается как событие ‘event’, мы прописываем категорию этого события ‘Contact Form’ и прописываем совершаемое действие, которое мы будем отслеживать, которое передается в систему и называется оно — ‘Online Order’.

Теперь мы вставляем код для Яндекс Метрики. Здесь он просто используется как: yaCounter, номер нашего счетчика (как правило, это какой-то набор цифр – в снипете X нужно заменить на номер вашего счетчика в Яндекс Метрике ), reachGoal и уникальный идентификатор цели, в данном случае — ‘Online Order’.

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

Настройка цели в Яндекс Метрике

Чтобы настроить Яндекс Метрику, заходим в консоль управления метрикой. Здесь, кстати, показывается сразу номер счетчика (адрес сайта и набор цифр, которые идентифицируют данный счетчик, который вы используете на сайте). Переходим в настройки на вкладку цели. Здесь уже создана цель, и мы задаем название: онлайн заявка или отправка формы, или сообщение администратору, или обратный звонок. То есть создаете какое-то понятное вам название для этой цели, как правило, по целевому действию того, что происходит при отправке этой формы. Будь то обратный звонок или онлайн заказ, как вы это опишите.

Здесь как раз мы вставляем наш идентификатор цели, который мы указывали в сниппете для ContactForm7. Если мы писали там ‘Online Order’, то здесь указываем Online Order. Если мы писали там ‘Contact Form’, то здесь пишем Contact Form. Еще раз повторюсь, тот сниппет, который мы пишем внутри кавычек в скобочках, то есть — Online Order. Если вы здесь пишете что-то другое, например ‘Call Me Back’, то соответственно в настройках метрики в поле «идентификатор цели» пишите Call Me Back. Эти идентификаторы должны совпадать.

После этого нажимаем «ОК» и у нас создается цель, сохраняем ее. Соответственно, теперь относительно этой цели можно анализировать ключевые слова, каналы трафика и тд… Какие ключевые слова приносят нам заявки? Выбираем нужную цель, и метрика показывает нам целевые визиты. Мы видим, что по этим ключевым словам заходили люди, которые заполняли заявки.

Настройка цели в Google Analytics

Чтобы настроить Google Analytics заходим в консоль управления. Открываем нужный сайт и переходим на вкладку Admin (управление). Здесь нас интересуют настройки цели (Goals – цели по-русски). Здесь непосредственно цель уже создана, и мы ее можем отредактировать.

Задаем описание цели. Пишем название цели: онлайн заявка или обратный звонок,  или отправка формы. Потом выбираем, что тип цели у нас будет ‘event’. «Event» мы выбираем в том случае, если отслеживаем отправку формы как ‘event’. Если мы отслеживаем форму как просмотр виртуальной страницы – там будет немножко другая настройка. Я об этом позже расскажу.

Потом в настройках деталей цели (Goal Details) прописываем, что категория события ‘Contact Form’, и Action (действие) — ‘Online Order’. Это мы берем параметры из цели, которую мы указывали в сниппете ContactForm7:

on_sent_ok: "__gaTracker('send', 'event', 'Contact Form', 'Online Order');"

При желании, вы можете написать здесь разные события. Допустим, если у вас несколько форм. К примеру, у вас могут быть все категории ‘Contact Form’, но действия будут разные. Первая ‘Online Order’, вторая ‘Call Me Back’, третья ‘Admin’ и так далее, чтобы различать между этими формами. То есть, мы указываем категорию события, указываем Action (действие). После этого нажимаем кнопку «Сохранить» и цель у нас создается.

Настройка цели в Google Analytics при отслеживании заявки как просмотра виртуальной страницы

Если, к примеру, у нас стоит старый или классический код для Google Analytics, мы соответственно используем вот такой сниппет и отслеживаем отправку формы, как генерацию просмотра виртуальной страницы:

on_sent_ok: "_gaq.push(['_trackPageview', '/goals/contact-us/']);"

Тогда в настройках цели в  Google Analytics  нам нужно выбрать другой тип цели. То есть тип цели/Type у нас будет не «Event», а «Destination» (место назначения). Создаем имя для цели. Потом, если используем классический или старый код и отслеживаем отправку формы как генерацию виртуальной страницы, то выбираем тип «Destination». Здесь указываем, что «Destination» у нас — параметр ‘/goals/contact-us/‘. После этого, сохраняем цель, и она у нас уже будет отслеживаться.

После того как мы добавили соответствующие сниппеты для ContactForm7, создали соответствующие цели в Яндекс Метрике и Google Analytics и сделали все правильно, то примерно через 24 часа данные об отправках формы начнут показываться в аналитике, как в Google Analytics в блоке Conversions (конверсия). И можно будет посмотреть когда, что и сколько? То есть делать разрезы трафика относительно заданных целей. Откуда траффик лучше конвертируется? Какие ключевые слова? На каких страницах? Какие формы? После того как вы это сделаете, у Вас будет понимание того, что происходит на вашем сайте и как взаимодействует пользователь с этим сайтом.

Послесловие

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

Вам также может быть интересно:

Kwork — обзор магазина/биржи фриланс услуг Kwork – инструкции для покупателей/заказчиков ТопВизор — сервис проверки позиций сайта по ключевым словам в поисковиках (Мониторинг позиций сайта). Детальный обзор Как выбрать надежный WordPress хостинг без компьютерного образования Contact Form 7 — как настроить прикрепление и отправку файлов к письму в WordPress Кросспостинг в социальные сети из WordPress – подробные инструкции и примеры Повышение конверсии – 7 мгновенных способов увеличить конверсию сайта