Начиная с 1 октября 2017 года все новые аккаунты созданные в сервисе Google Analytics работают через код отслеживания Global Site Tag (gtag.js). В связи с чем и изменился подход в настройке некоторых целей и событий, и в установке самого кода отслеживания.
Содержание :
- Добавление цели.
- Настройка цели отслеживания посещения страницы.
- Настройка цели-события клик по кнопке или по html элементу (тегу).
- Настройка цели-события отправка формы.
Если ранее код Google Analytics рекомендовалось ставить перед закрывающимся тегом </head>, то теперь код отслеживания Global Site Tag необходимо ставить в качестве первого элемента в разделе <head>
Добавление цели Global Site Tag - Google Analytics
Правильная настройка целей очень важна при продвижении сайтов и использовании поисковой рекламы, поскольку позволяет получать множество полезной информации для оптимизации трафика и увеличения прибыли.
Итак начнём. Для добавления целей, как и ранее, необходимо перейти в раздел “Администратор”, в представлении выбрать раздел “Цели” и нажать на кнопку добавления новой цели “+ Цель”.
Раздел “Установка цели”. Если нет шаблона, то в разделе установка целей ставим галочку “Собственная” и нажимаем “Далее”.
Раздел “Описание цели”. Название цели пишем в произвольном порядке, чтобы потом было понятно какая цель была достигнута, для примера “Посещение корзины” либо “Клик по кнопке купить”.
Тип цели выбираем в зависимости от того, что нам нужно. Мы рассмотрим три самых распространенных варианта:
- Отслеживание посещения страницы - данная цель чаще всего используется для страницы “Корзина”, однако не ограничивается ей.
- Отслеживание события: клик по кнопке либо клик по любому html тегу.
- Отслеживание события отправка формы.
Настройка цели отслеживания посещения страницы
Для настройки данной цели выбираем тип цели “Целевая страница” и нажимаем кнопку далее.
После этого необходимо:
1) Указать адрес страницы вашего сайта, которую вы хотите отследить, для примера https://site.com/cart.html (при условии, что страница корзины имеет статический URL и не имеет никаких дополнительных GET параметров в адресной строке). И в чекбоксе “Переход”, должен быть выбран пункт “Равно”. Кликаем “Сохранить” - цель создана.
2) Если к адресу страницы подтягиваются всегда разные GET параметры (Пример: https://site.com/cart.html?id=1&order=&37), тогда необходимо в чекбоксе “Переход” выбрать “Начинается с” и вставить адрес страницы без GET параметров. После этого сохраняем - новая цель создана.
Однако нужно понимать, если при обработке каких либо данных, вследствии действий пользователей, эта же страница выдает результат обработки и имеет тот же адрес но другие GET параметры, и этот результат необходимо отследить, то данный метод настройки цели не подойдёт.
Пример когда это может быть: когда в интернет магазине страница корзины с товарами имеет адрес https://site.com/cart.html?id=1&order=&37 и при успешном оформлении заказа URL будет иметь вид https://site.com/cart.html?id=1&order=&37&neworder=1, то есть к нему добавляются доп параметры либо изменяются текущие.
3) Когда страница имеет динамический URL и к странице могут добавляется дополнительные GET параметры, тогда необходимо настроить цель посещения страницы используя регулярное выражение (Пример https://site.com?page=12&order=32). Берём из урла часть которая присуща именно этой странице, это может быть цифровой идентификатор страницы либо отдельная переменная. Выбираем в чекбоксе “Переход” опцию “Регулярное выражение”, вписываем регулярку .*уникальная часть URL.* (в нашем примере .*page=12.*) и сохраняем.
Настройка цели-события клик по кнопке или по html элементу (тегу)
При настройке целей-событий уже есть изменения и старый код работать не будет. Не изменился подход к настройке цели-события в самой панели Google Analytics, изменилась структура кода, который необходимо дописывать к элементу.
Для тех кто ранее не настраивал цели-события в Google Analytics распишем путь по шагам.
Создаём новую цель (инструкция выше). В нашем примере будем отслеживать клик по кнопке вывода дополнительных телефонов. В разделе “Описание цели” выбираем “Событие” и кликаем далее.
В разделе “Подробные сведения” есть обязательные поля “Категория” и “Действие”, их можно заполнить в произвольной форме на латинице, дальше эти данные нам ещё пригодятся. Кликаем “Сохранить”, теперь наша цель создана в панеле Google Analytics, но ещё не работает.
Теперь необходимо установить на кнопку код отслеживания действия. Ранее такой код имел бы вид: onclick="ga('send', 'event', 'tel', 'click');"
Для тех у кого нет времени вникать в суть вопроса, теперь этот код выглядит так:
onclick="gtag('event', 'clickdopphone', { 'event_category': 'tel', 'event_action': 'click', });"
где:
- clickdopphone - произвольное наименование события;
- tel - значение поля “Категория”, которое мы внесли в панели Google Analytics;
- click - значение поля “Действие” которое также было внесено ранее в панели.
Для тех кто хочет вникнуть в суть новых возможностей и особенностей настройки новых целей-событий есть инструкция от Google, пока только на английском.
Настройка цели-события отправка формы
Цель-событие на отправку формы похожа по настройке на цель-событие взаимодействия с html элементом (кликом), но имеет одну особенность. В административной панели аналитики настраиваем по примеру выше, только меняем значение полей “Категория” и “Действие” на уникальные, а вот в коде, вместо onclick, используем onsubmit, код ставится не на кнопку формы, а на сам html тег form, плюс добавляем return true;
Итого имеем:
onsubmit="gtag('event', 'sendemail', { 'event_category': 'mail', 'event_action': 'send', });return true;"
В данном варианте цель будет срабатывать не при нажатии кнопки отправить, а именно при условии, что отправлен запрос на отправку формы. return true здесь необходим для того, чтобы цель срабатывала при успешной отправке формы, то есть, если используется валидация каких-либо полей (к примеру E-mail адреса), то без return true цель сработает даже если запрос на отправку формы будет отправлен но письмо не будет сформировано (по причине ошибки валидности поля, либо ошибки со стороны сервера).