Отслеживание целей Google Analytics, Яндекс метрика и событий Facebook, Вконтакте на WordPress сайте с помощью Google Tag Manager

Привет друзья! Давайте сразу так: обойдёмся без нудных клишированных вступлений вроде «в настоящее время отслеживание показателей очень важно бла-бла-бла». Ну, Come on, все знают зачем они пришли на эту страницу. Вам нужно настроить цели Google Analytics, Яндекс метрики, а также пробрасывать события для пикселей Facebook, Вконтакте и сделать это максимально просто, верно? Значит за дело!

Настройка целей — это не боль и страдание, а комплекс эффективных системных действий

Джейсон Стейтем

Итак, всё началось с того, что то руководство по настройке целей для конструктора Elementor, которое я записал, перестало работать и нужно было выкатить что-то более универсальное и отказоустойчивое. Покажу я весь процесс на примере меню WordPress и целевой страницы сделанной в конструкторе Elementor. Однако, это не означает, что инструкция применима только к этим инструментам. Благодаря ей вы поймёте общий принцип работы с Google Tag Manager и сможете настроить цели хоть на WordPress, хоть на Drupal с Joomla, хоть на чёрте лысом.

Содержание

Подготовка к настройке отслеживания событий в GTM

Важный момент, чтобы не путаться в дальнейшем. Для начала нужно посмотреть на нашу целевую страницу и наметить какие именно цели мы будем отслеживать. У меня получилось так:

  1. Номер телефона в хедере;
  2. Кнопка Заказать звонок в хедере;
  3. Основная лид-форма;
  4. Номер телефона в футере;
  5. Кнопка Заказать звонок в футере;
  6. Форма заказа звонка в попапе (всплывающем окне).

План целей в Excel или Google Spreadsheet

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

Человекопонятное название целиCSS селекторКатегория (Category)Действие (Action)Ярлык (Label)Идентификаторы целей метрики и событий FB/VK
Номер телефона в хедере#phone_headerCallLeadHeaderCall_Lead_Header
Кнопка Заказать звонок в хедере#getcall_headerButtonMediumHeaderButton_Medium_Header
Основная лид-форма#main_formFormLeadMainForm_Lead_Main
Номер телефона в футере#phone_footerCallLeadFooterCall_Lead_Footer
Кнопка Заказать звонок в футере#getcall_footerButtonMediumFooterButton_Medium_Footer
Форма заказа звонка в попапе#getcall_formFormLeadGetcallForm_Lead_Getcall

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

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

Что прописать в качестве идентификаторов целей?

Да что угодно и я серьёзно. Google Analytics нужно, чтобы было заполнено хотя бы одно поле любыми символами. Однако, в нашем случае более эффективно заполнить латинскими символами без пробелов, так как мы будем пробрасывать события не только в GA, но и в другие системы. Я заполнил английскими словами, мне так удобнее. Вы можете заполнять русской транслитерацией.

Вот какой логикой руководствовался я. У нас есть поле «Категория» и в данном случае я определил 3:

  1. Call — звонок. Предполагается, что при клике по номеру он и происходит;
  2. Form — форма. Тут всё понятно, заполняется какая-то форма;
  3. Button — кнопка. Нажатие кнопки.

Следующий столбец «Действие» я заполнил исходя из таких соображений:

  • Lead — это то, что приносит потенциальное касание с посетителем;
  • Medium — это то, что является неким промежуточным звеном. В моём случае кнопка не выполняет конечное целевое действие, а лишь открывает попап.

И последнее (но не самое) поле «Ярлык». Отвечает за уточнение двух предыдущих, чтобы как-то разделить похожие действия. Сюда я просто поместил местоположение элементов, а именно: Header, Main и Footer.

Таблица разметки целей в Google Spreadsheet

В итоге мы получили уникальные комбинации для дальнейшей настройки целей. Уникальные это важно, так как от этого зависит точность отслеживания.
И вот вопрос: «а что же в 5 столбце?» А в нём я сделал простую функцию Excel СЦЕПИТЬ и объединил значения столбцов в уникальные идентификаторы, которые мы будем использовать при создании целей в Яндекс Метрике и сегментации аудиторий в Facebook и Вконтакте. Посмотреть как делал и скачать можно в этой Google таблице.

Также, в таблице есть столбец для CSS-селекторов, но их мы заполним позже так как пока вы можете запутаться.

Вам нужен Google Chrome

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

Расширение Tag Assistant для Google Chrome

Google Chrome уже наготове? Тогда установите расширение Tag Assistant. Оно поможет с проверкой размещения тега Google Tag Manager.

Расширение Помощник по пикселю Facebook для Google Chrome

Если вы будете настраивать отслеживание для Facebook, то вам также понадобится установить расширение Facebook Pixel Helper. Он поможет с проверкой пикселя и событий Facebook.

Плагин для вставки кода

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

  1. Не нужно лезть в код темы раз за разом. Я достаточно хорошо в этом разбираюсь, но сниппет с кодом в админке создать всяко проще;
  2. Не нужно создавать дочернюю тему только ради вставки кода;
  3. Можно смело менять темы, а сниппеты всё-равно останутся;
  4. Можно экспортировать типовые сниппеты и импортировать на другие проекты.

В разное время я пользовался разными плагинами, пока мой друг не сделал удобное для меня решение Woody ad snippets. Качаем, ставим и идём дальше.

Блокировщики рекламы

Имейте в виду, что блокировщики рекламы могут препятствовать отслеживанию. Недавно я установил приложение AdGuard для Android, которое напрочь отрубает всё отслеживание и рекламу в браузерах. В итоге пару часов потребовалось, чтобы до меня дошло почему же не срабатывают цели при заходе со смартфона.

При этом, проблем с расширением AdBlock Plus замечено не было и на ПК все события прекрасно фиксируются.

Настройка и работа с Google Tag Manager (GTM)

Что такое Google Tag Manager

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

Как ещё лучше понять GTM?

Хочу привести метафору из реальной жизни, чтобы вам было проще понять принцип работы Google Tag Manager. Представим себе некого парня, который хочет познакомиться с девушкой. И вот наш герой пришёл в парк, сел на лавочку в проходном месте и вдруг понял, что никогда не знакомился, поэтому, чтобы немного освоиться начал просто наблюдать за всеми людьми, просто смотреть на них. Держите эту метафору в голове, дальше мы будем неоднократно к ней обращаться.

Регистрация в Google Tag Manager

Переходим на сайт Tag Manager. Вам понадобиться аккаунт Google. Авторизуйтесь или зарегистрируйте новый. После этого увидите панель диспетчера тегов. Для начала работы нужно нажать Создать аккаунт.

Главная панель Google Tag Manager

Далее нужно заполнить данные аккаунта и контейнера:

  • Создание аккаунта
    • Название аккаунта — пишите любое, главное чтобы было проще идентифицировать если их будет несколько;
    • Страна — выбирайте свою;
    • Анонимные данные можно не передавать;
  • Создание контейнера
    • Название контейнера — может быть любым, но я написал домен;
    • Целевая платформа — я выбрал сайт, так как настраиваю для сайта. То же самое нужно выбрать и для лендинга, блога, интернет-магазина (вдруг кто-то из новичков не знает, что это одно и то же).
Регистрация аккаунта и контейнера Google Tag Manager

Нажимаем Создать и подтверждаем условия соглашения.

Далее попадаем на главный экран, где видим наш аккаунт и контейнер.

Давайте разберём разницу между аккаунтом и контейнером:

  • Аккаунт — это глобальный набор, который может включать несколько контейнеров;
  • Контейнер — это то, что вставляется на сайт и вмещает в себя другие элементы, которые мы будем разбирать далее.

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

Размещение кода Google Tag Manager на сайт

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

Код для вставки тега GTM

Видим 2 кода:

Код gtm для вставки на сайт

Копируем первую часть и идём в Консоль > Woody snippets (должен быть установлен и активирован) > Добавить сниппет > Универсальный сниппет

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

  • Где можно выполнять код? — авторазмещение;
  • Место добавления — head.
Добавление первого кода диспетчера тегов

Нажимаем Опубликовать.

Копируем второй код и создаём сниппет по тому же принципу, только на этот раз выбираем Место добавления НЕ head, а Footer. Снова жмём опубликовать.

Добавление кода диспетчера тегов GTM Noscript

Вообще, правильно вставить второй код после открывающего тега , однако такое сложно реализовать в плагине ввиду разнообразия подходов авторов тем к их разработке. 100% правильно это можно сделать вставив второй код GTM в шаблон темы, но ради 0,2% людей с отключенным JavaScript оно того не стоит.

Проверка контейнера Google Tag Manager

Ранее мы установили расширение для браузера Tag Assistant. Перейдите на главную страницу вашего проекта, затем нажмите на иконку расширения в верхней панели, нажмите Enable и перезагрузите страницу.

После этого ваш контейнер должен выглядеть примерно следующим образом. Жёлтый он оттого, что в нем сейчас нет опубликованных тегов и скоро мы это исправим. Контейнер видно в ассистенте, а значит он установлен правильно.

Предварительный просмотр работы диспетчера тегов

Возвращаемся в Tag Manager и нажимаем на Предварительный просмотр.

Страница перезагрузится, а вверху появится сообщение «Предварительный просмотр рабочей области…» Теперь просто перейдите на ту страницу сайта где нужно настроить цели, если уже там, то перезагрузите её и увидите, что загрузился быстрый просмотр.

Нам пишут, что тегов пока нет и это правильно. Скоро мы это исправим.

Добавляем первые переменные

Для того, чтобы понимать что такое переменные достаточно вспомнить нашего парня, которого мы оставили в парке на скамейке. Сейчас он смотрит на всех людей и именно так работает диспетчер тегов, он всегда активен. Однако, сейчас он просто установлен и всё, без каких-либо конкретных действий.

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

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

В выдвигающейся панели найдём раздел Клики, проставим все галочки и можно закрывать эту панель.

Как видите, переменные из раздела Клики добавились в блок Встроенные переменные. Разберём каждую из них:

  • Click Element — возвращает значение любых HTML-элементов. Когда настроим триггеры, станет понятнее зачем он нужен;
  • Click Classes — возвращает содержимое атрибута class;
  • Click ID — аналогично классам, возвращает атрибут ID;
  • Click Target — возвращает содержимое атрибута target;
  • Click URL — возвращает значение атрибутов href или action;
  • Click Text — возвращает значение атрибутов textContent / innerText.

Понимаю, что пока может быть не понятно, но станет понятнее когда настроим триггеры.

Добавляем первые триггеры

Триггер — это спусковой крючок. Определённое действие пользователя, которое запускает некую цепочку процессов.

Что может быть триггером для действий нашего ловеласа? Девушка посмотрела в его сторону и проявила некоторые вербальные и невербальные сигналы: улыбнулась, поправила волосы, достала телефон и прихорошилась на селфи-камеру.

Настроим первый триггер. Переходим в Триггеры > Создать.

Нужно назвать триггер. Пока у меня это Клик по ссылкам. Далее кликаем по блоку настройка триггера.

В выдвигающемся блоке выберем Только ссылки. Так наш триггер будет срабатывать только при клике по ссылкам.

Дальше появится блок с настройками триггера. Пока выберем Все клики по ссылкам и нажмём Сохранить. Пока потому что хочу вам сначала показать как это работает, а уже после задавать условия.

Триггер клик по всем ссылкам

Закрываем всплывающий блок и нажимаем в правом верхнем углу рабочей области Предварительный просмотр. После переходим на сайт, перезагружаем страницу и после кликаем по любой ссылке. Только делайте это колесом мыши или с зажатым Ctrl/Cmd чтобы страница открылась на новой вкладке, иначе вы ничего не увидите.

А увидеть нужно вот что. В нашем окне предпросмотра диспетчера тегов появилось новое действие Link Click, но оно тоже пустое так как мы не определили ни одного тега. Это не хорошо и не плохо, я просто хотел вам показать что диспетчер тегов начал отслеживать клики по всем ссылкам, но пока никуда не передаёт так как мы это не настраивали. В переводе на метафору с нашим героем любовником это означает, что он начал подходить ко всем девицам, которые ему улыбнулись.

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

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

Соответствие переменных коду элемента

Отслеживаем клик по некоторым ссылкам

Вот мы и подошли к интересному. Наш ловелас подходил ко всем девушкам, которые ему улыбались, но понял, что хочет подходить только к брюнеткам. На языке GTM это означает, что нам нужно задать условия, кстати взятые из переменных, по которым будет срабатывать триггер.

Клик по кнопке-ссылке

Начнём с того, что кнопка может быть выполнена кнопкой, например через тег

Поделитесь статьёй с друзьями!
Напишите ваше мнение!