Отслеживание целей 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

Вообще, правильно вставить второй код после открывающего тега <body>, однако такое сложно реализовать в плагине ввиду разнообразия подходов авторов тем к их разработке. 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 это означает, что нам нужно задать условия, кстати взятые из переменных, по которым будет срабатывать триггер.

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

Начнём с того, что кнопка может быть выполнена кнопкой, например через тег <button> или ссылкой через тег <a>. У нас есть 2 кнопки Заказать звонок и чтобы понять как сделаны они, вновь прибегнем к инструменту разработчика нажав F12 и выделив кнопку стрелочкой.

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

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

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

Задаём ID кнопки в Elementor

Обязательно вносим CSS-селектор в нашу таблицу с указанием типа селектора. Знак # перед означает, что это ID, а знак . — класс. Сохраняем изменения и смотрим что изменилось в коде.

ID кнопки для отслеживания в коде

Идём в GTM и редактируем триггер, который создавали. Делаем это для того, чтобы не удалять тот триггер, что есть, а просто изменить его.
Переименовываем на «Кнопка Заказать звонок в хедере» (см. таблицу), кликаем по настройкам триггера и на этот раз выбираем Некоторые клики по ссылкам. Далее в полях выбираем:

  1. Click ID — означает, что клик будет засчитан только при наличии у элемента значения ID;
  2. Равно — тип соответствия условию. В нашем случае точное соответствие;
  3. В моём случае getcall_header, что является ID кнопки.

Этим мы сказали триггеру, чтобы он передавал только клики по ссылкам с ID getcall_header. Как вы понимаете этот ID должен быть уникальным если вы хотите отслеживать разные элементы. При этом, GTM так и будет смотреть на клики по всем ссылкам, но передавать дальше только те, что соответствуют ID. Чтобы это понять и увидеть нам нужно добавить несколько тегов и это будут: код отслеживания Google Analytics и передача события в GA. Сохраняем изменения, закрываем выпадающее окно где мы редактировали триггер.

Добавление Google Analytics в Google Tag Manager

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

Потом не говорите, что не предупреждал 😉

Как мы уже знаем, GTM это контейнер в который можно поместить всё, что угодно, в том числе и коды отслеживания систем аналитики. Для начала нужно зарегистрировать саму Google Analytics и я уверен, что вы справитесь с этим самостоятельно. Нам останется лишь подключить её в GTM.

Подключение Google Analytics через Google Tag Manager

Переходим в GA > Клик по шестерёнке в левом нижнем углу > Выбираем аккаунт > Выбираем ресурс > Настройка аккаунта.

В настройках ресурса копируем Идентификатор отслеживания.

Идём в GTM > Переменные > В блоке Пользовательские переменные нажимаем Создать. Называем переменную. В моём случае это «Идентификатор отслеживания GA».
Кликаем по блоку конфигурация переменной и во всплывающей панели выбираем Настройки Google Analytics.

Переменная GTM Настройки Google Analytics

Вставляем в поле Идентификатор отслеживания одноимённый уникальный код вида UA-XXXXXXXXX-X, который скопировали из Google Analytics. Поле Домен cookie оставляем по умолчанию auto. Сохраняем настройки.

Переменная GTM идентификатор GA

Google tag Manager теперь знает нашу аналитику, но пока не передаёт никаких данных. Чтобы это исправить идём в Теги > Создать.

В открывшемся окне пишем название тега, у меня это «Отправка данных в GA» и кликаем по блоку Конфигурация тега. Откроется боковая панель и в ней нужно выбрать Google Аналитика – Universal Analytics. Далее в блоке конфигурации нужно выбрать:

  • Тип отслеживания — просмотр страницы;
  • Настройки Google Analytics — выбираем только что созданную нами переменную «Идентификатор отслеживания GA».

Теперь нажимаем на блок Триггеры и в выезжающей панели выбираем All Pages. Так мы задействуем наш код отслеживания Google Analytics на всех страницах сайта.

Отслеживание всех страниц GTM

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

Сработал тег отслеживания GA

Сработал тег отправки данных в Google Analytics и если сейчас перейти в GA, нажать Отчёт в реальном времени, то в разделе общие вы увидите, что прямо сейчас на сайте некоторое количество посетителей отличное от нуля.

Вернёмся на сайт и в предварительном просмотре переключимся в раздел Page View. Далее нажмём на задействованный тег Отправка данных в GA.
Видим зелёную галочку. Она свидетельствует об успешной отправке данных. Ниже видим задействованные триггеры и среди них знакомый нам All pages, который мы и выбирали при создании тега в GTM для GA.

Предварительный просмотр All pages

Итак, данные поступают в Google Analytics, а значить можно отправлять в неё события. Тем более наша кнопка уже заждалась, когда мы к ней вернёмся.

Отправка событий из Google Tag Manager в Google Analytics

Есть кнопка и триггер по её ID, есть подключенная GA и мы готовы отправить в неё событие.
Теги > Создать. Название берём из таблицы «Кнопка Заказать звонок в хедере».
Нажимаем Конфигурация тега и выбираем Google Аналитика – Universal Analytics.

  • Тип отслеживания — Событие;
  • Параметры отслеживания событий (берём из таблицы):
    • Категория — Button;
    • Действие — Medium;
    • Ярлык — Header;
  • Не взаимодействие — False;
  • Настройки Google Analytics — выбираем переменную с кодом отслеживания GA.

Этими настройками мы дали задание GTM отправлять событие на наш идентификатор GA с определёнными параметрами. Теперь осталось выбрать триггер.
Клик по блоку Триггеры > выбираем Кнопка Заказать звонок в хедере. Выходит, что и триггер и тег называются одинаково, чтобы точно понимать какой триггер для какого тега.

Настройка передачи событий из GTM в GA с триггером

Снова Сохраняем, жмём Предварительный просмотр и обновляем страницу сайта. А теперь кликнем по ссылке для которой триггер НЕ задан и следом по нашей кнопке. В предварительном просмотре появилось 2 события Link Click. Если выберем первое, то увидим Tags Fired On This Event — None, ну а если второе, то видим, что тег сработал:

Тег GTM сработал по ID тригеру

Ну и самое главное. Заходим в Google Analytics > Отчёты в реальном времени > События и видим то самое событие с теми самыми идентификаторами. Это уже 80% успеха 🙂

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

Я не показываю как настраивал вторую кнопку в подвале так как это делается по тому же принципу. Разница лишь в CSS-ID и идентификаторах событий.

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

Казалось бы, всё должно быть просто, номер телефона — та же ссылка и настроить её можно было как и кнопку, но в моём случае к этой ссылке нельзя добавить ID. Перейдём в конструктор Elementor и взглянем на виджет.

У этого виджета есть только ID контейнера, а ID ссылки вставить невозможно. Взглянем на код:

Код кнопки Elementor

Добавленный мной ID сильно далеко от нашей ссылки. И тут вопрос: “с чего я взял, что клик происходит именно по ссылке?”. А вот с чего. Если кликнуть по номеру и обратиться к предварительному просмотру на вкладке Variables, то увидим, что в Click URL вернулось значение номера телефона с протоколом tel:

Определение ссылки в предпросмотре GTM

Отслеживаем ссылку на номер телефона или электронную почту по протоколу tel или mailto

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

GTM > Триггеры > Создать > Пишем название триггера и жмём на блок Настройка триггера. В боковой панели выбираем Только ссылки. Условия активации триггера — Некоторые ссылки.
Активировать триггер при наступлении события и выполнении всех этих условий:

  1. Click URL
  2. содержит
  3. tel:
Триггер клик по ссылке с tel

После создаём тег отправки события в GTM и целей как я покажу далее. Google tag Manager будет отправлять в это событие все клики по ссылкам с tel:

Кстати, аналогичным образом можно отслеживать и ссылки с протоколом mailto: для адресов электронной почты.

Отслеживание кликов в GTM по DOM селектору

Вернёмся к нашей ссылке, которой нельзя присвоить ID. Здесь нужно ввести такое понятие как DOM — Document Object Model. Каждый элемент в HTML документе является объектом. Некоторые объекты являются родительскими, а некоторые дочерними.
В нашем случае тег <a> является дочерним (вложенным) объектом родительского объекта с ID #phone_header. Модель DOM позволяет обратиться к родительскому элементу с ID через вложенный элемент. Сейчас станет более понятно как это.

Переходим на сайт, жмём F12 и смотрим код номера телефона. Выбираем ссылку и нажимаем правой кнопкой мыши > Copy > Copy selector. У меня получился такой селектор phone_header > div > div > a

Копирование селектора в инструментах разработчика

Переходим в GTM > Триггеры > Создать. Название — Номер телефона в хедере. Клик по Настройка триггера > выбираем Только ссылки.
Условия активации триггера — Некоторые клики по ссылкам. Условия:

  1. Click Element
  2. соответствует селектору CSS
  3. #phone_header > div > div > a
Создание триггера клик по css селектору

Нажимаем сохранить и идём делать тег. Делаем его по аналогии с кнопкой. Скрины приводить не буду, напишу алгоритм:

  1. Теги > Создать;
  2. Название тега — Номер телефона в хедере;
  3. Конфигурация тега > Тип тега Google Аналитика – Universal Analytics;
  4. Тип отслеживания — Событие;
  5. Параметры отслеживания событий (берём из таблицы):
    1. Категория — Call;
    2. Действие — Lead;
    3. Ярлык — Header;
  6. Не взаимодействие — False;
  7. Настройки Google Analytics — выбираем переменную с кодом отслеживания GA;
  8. В качестве триггера выбираем одноимённый тегу Номер телефона в хедере;
  9. Сохраняем тег;
  10. Жмём предварительный просмотр и перезагружаем страницу на сайте.

Клик по ссылке и видим, что тег отработал как часы.

Проверка тега при клике по css-селектору

А в Google Аналитике появилось новое событие:

Событие GA при нажатии на номер телефона

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

Отслеживание в GTM кликов по произвольным объектам

Немного отступим от нашей первоначальной структуры лендинга и разберём пример, когда вам нужно отследить клик по объекту, который ссылкой не является. Например, изображение или абзац с текстом. Некоторые кнопки также могут быть сделаны не ссылкой, а тегом <button>. В этом случае она тоже является объектом.
Настройка происходит аналогично за исключением лишь одного нюанса — при создании триггера нужно выбрать не Только ссылки, а Все элементы. Приступим!

Триггеры > Создать. Называем, к примеру, «Клик по картинке». Нажимаем на настройку триггера и в боковой панели выбираем Все элементы.

Триггер клик по всем элементам

Вновь видим знакомые опции: Все клики и Некоторые клики. Я выбрал некоторые клики. Далее задал ID custom_element в настройках Elementor как и показывал ранее в случае с DOM-объектами. Снова скопировал селектор, получился такой custom_element > div > div > img. Вставил селектор в поле соответствия. Ничего нового, всё как ранее.

Триггер клик по объекту через css селектор

Тег вы уже вполне можете создать самостоятельно, мы это уже делали. Я лишь покажу, что у меня получилось.

Тег для клика по объекту

Разумеется после этого нажимаем Предварительный просмотр и идём перезагружать страницу сайта. Теперь, если кликнуть в любом месте GTM фиксирует эти клики, но никуда не отправляет. ровно аналогичная ситуация с ссылками.

GTM фиксирует клики по всем объектам

Однако, стоит кликнуть по картинке и мы увидим, что GTM отследил событие и отправил его в Аналитику.

Клик по объекту и отправка в аналитику

Как видите, всё просто и аналогично тому, что мы делали с ссылками. Разница лишь в том, что мы выбрали в триггерах.

Отслеживание заполнения форм в Google Tag Manager

У нас остались 2 формы: основная по центру и в попапе. Настраиваются они аналогично, поэтому разберём только основную.

В настройках формы того же Elementor Pro есть поле для ввода ID. Заполнять нужно без #.

ID для формы Elementor Pro

После этого идём в GTM > Переменные и добавим стандартные переменные для форм. В блоке Встроенные переменные нажимаем Настроить, в боковой панели ищем раздел Формы и прокликиваем всё пункты.

Переменные для отслеживания форм

По старой традиции идём создавать триггер. Название — Основная лид-форма, как и написано в таблице. Кликаем по блоку Настройка триггера и выбираем Отправка форм.

Триггер GTM отправка формы

Далее, по аналогии с кнопками-ссылками заполняем условия активации триггера. Выбираем Некоторые формы и задаём:

  1. Form ID — означает, что заполнение формы будет засчитано только при наличии у формы указанного ID;
  2. Равно — тип соответствия условию. В нашем случае точное соответствие;
  3. В моём случае main_form, что является ID кнопки.
Условный триггер GTM для отправки формы

Традиционно создаём Тег, называем как в таблице «Основная лид-форма». Нажимаем Конфигурация тега и выбираем Google Аналитика – Universal Analytics.

  • Тип отслеживания — Событие;
  • Параметры отслеживания событий (берём из таблицы):
    • Категория — Form;
    • Действие — Lead;
    • Ярлык — Main;
  • Не взаимодействие — False;
  • Настройки Google Analytics — выбираем переменную с кодом отслеживания GA.

Клик по блоку Триггеры > выбираем Основная лид-форма.

Тег отслеживания форм GTM

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

Отслеживание заполнения форм предпросмотр GTM

Ну и доказательство из Google Analytics:

Отслеживание заполнения форм события в Google Analytics

Примечательно то, что данные улетают в GA только после успешной отправке, что исключает ложные срабатывания. Отправка данных работает даже если вы настроили переадресацию после отправки. Единственное, вы вы не сможете увидеть событие в предпросмотре, но увидите событие в Googlе Аналитике.

Отслеживание форм в попапе Elementor

Хочется отдельно упомянуть то, что отслеживание форм описанное выше, работает и во всплывающих окнах Elementor Pro. Знаю у пользователей были с этим проблемы и Google Tag Manager их решает. Главное всё правильно настроить и задать ID формы в попапе. В моём случае это #getcall_form.

Я всё проверю и создам цель фоном, чтобы не тратить время. Покажу вам лишь результат в предпросмотре:

Отправка данных заполнения формы в попапе

И Google Аналитике:

События по заполнению формы в попапе Elementor

Отслеживание форм Contact Form 7

Предвижу вопросы касательно отслеживания заполнения форм, сделанных плагином Contact Form 7.

  • Плохая новость — этом руководстве этого не будет;
  • Хорошая новость — будет в отдельном руководстве, а здесь я размещу на него ссылку.

Отслеживание кликов по пунктам меню WordPress

Формы, ссылки это конечно хорошо, но порой нужно отслеживать клик по пункту меню WordPress. Это может понадобиться, к примеру, для построения воронки действий пользователя от клика по пункту меню до заказа. Также, по пункту меню может открываться попап и можно тоже строить воронку на его открытие и целевое действие уже внутри всплывающего окна. На самом деле, всё что угодно можно отслеживать. Тут, как говорится: «был бы кейс, а применение найдётся».

Как и в случае с номером телефона сделанным в Elementor, пункт меню тоже не имеет отдельного ID/класса и задать его весьма проблематично. Здесь на помощь приходят переменные Click Text и Click URL. Мы привяжемся к тексту пункта меню и ссылке на которую он ведёт.

Для начала перезагрузим страницу и кликнем по любому пункту меню. У меня это Каталог. Нужно кликать с зажатым Ctrl/Cmd или по колесу мыши, чтобы ссылка открылась на новой вкладке.
Обратимся к предпросмотру, кликнем по событию Link Click и перейдём на вкладку Variables. В моём случае видим, что:

  • Click Text = Каталог;
  • Click URL = http://test.wplovers.pw/katalog/.

К этим данным и привяжемся. Идём в триггеры, создаём новый, называем, выбираем тип Клик только ссылки и Некоторые ссылки. Заполняем условия:

  1. Click Text – Содержит – Каталог;
  2. Click URL – Содержит – katalog.
Условия триггера клик по пункту меню WordPress

Второе условие добавил нажав на клик по иконке +.
Зачем 2 условия? Дело в том, что пункты меню больше всего подвержены переменам и два условия для подстраховки. Имейте в виду, что если пункт меню и слаг (содержание ссылки) целевой страницы изменятся, то событие перестанет улетать в GA.

Кстати о ней. Давайте делать Тег для отправки кликов по пунктам меню в Google Analytics. Алгоритм аналогичен ссылкам и вы уже справитесь сами, а я лишь покажу как получилось у меня:

Думаю, доказательства того, что всё улетает в GA больше не нужны 😄

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

Внешняя ссылка — это любая ссылка, адрес которой не равен адресу нашего сайта. Чтобы понимать по каким внешним ссылкам кликают больше можно создать событие и затем анализировать его через Google Analytics. Что с этим делать потом — ваше дело, но я бы использовал так:

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

Это уже стало рутиной, но что ж поделаешь надо закончить. Идём в Триггеры > Создать. Назовём его «Клики по внешним ссылкам». Тип триггера — Клик-Только ссылки. И условия клика по некоторым ссылкам такие:

  1. Click URL — переменная в которую подставляется ссылка по которой кликнули;
  2. не содержит — условие, которое необходимо чтобы отсеять все клики по внутренним ссылкам;
  3. test.wplovers.pw — домен, который не нужно отслеживать (у вас будет свой);
Триггер GTM клик по внешним ссылкам

Бывают случаи когда у вас есть несколько сайтов и вы не хотите отслеживать переходы и на них тоже. В этом случае нужно использовать регулярные выражения и тогда если я хочу исключить из внешних ссылок test.wplovers.pw и wplovers.pw, необходимо задать следующие условия:

  1. Click URL;
  2. не соответствует регулярному выражению;
  3. test.wplovers\.pw|wplovers\.pw.
Триггер GTM клик по внешним ссылкам с регулярным выражением

Создадим Тег типа Событие и в Параметры отслеживания событий напишем:

  • Категория — Click;
  • Действие — Клик по исходящей ссылке;
  • Ярлык — {{Click URL}}.

На последнем я бы остановился подробнее. Тут всё просто — это переменная в которую подставится адрес ссылки по которой будет произведён клик и эта ссылка будет передаваться в Google Analytics. Вот, что получилось в моём теге:

Тег GTM клик по внешним ссылкам передача в GA

Естественно сохранил Тег и Предварительный просмотр. На сайт создал небольшой текст куда добавил 3 ссылки:

  1. test.wplovers.pw
  2. wplovers.pw
  3. google.com

Перезагрузил страницу, кликнул по всем ссылкам, но отработалась только внешняя на google.com

Предпросмотр клик по внешним ссылкам передача в GA

В итоге в отчётах Google Аналитики это выглядит так:

Клик по внешним ссылкам отчет в GA

Внешние ссылки отправляются в GA и теперь осталось настроить отчёты в ней или для более визуального представления — в Googole Data Studio.

Подключение и отслеживание сторонних сервисов

Далее рассмотрим подключение сервисов, которые не относятся к Google, а именно: Яндекс Метрика, Facebook и Вконтакте.

Важное замечание!
В этом блоке я покажу как отслеживать цели и события сторонних сервисов в том случае, если вам НЕ нужна Google Analytics. Если вы используете все сервисы сразу, то из этого блока вам понадобится лишь то, как подключать коды отслеживания и пиксели. Как передавать данные во все системы одновременно, есть отдельный блок ниже.

Договорились? Тогда идём дальше!

Подключение Яндекс Метрики через Google Tag Manager

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

Копируем код в настройках счётчика Яндекс Метрики:

Код Яндекс Метрики

Идём в GTM > Теги > Создать. пишем понятное название. Я сделаю «Отправка данных в ЯМ» по аналогии с Google Analytics. Жмём на блок Конфигурация тега и в боковой панели выбираем Пользовательский HTML.

Тип триггера GTM Пользовательйский HTML

Вставляем код метрики в большое поле

Код метрики в GTM

Кликаем по блоку триггеры и выбираем уже знакомый нам All Pages.

Триггер All pages

Сохраняем Тег и вот тут внимание. Поскольку Яндекс Метрика является сторонним сервисом, просто нажать Предварительный просмотр недостаточно.

Принцип сохранения изменений в рабочей области Google Tag Manager

Дело в том, что до этого все изменения, которые мы делали, хранились в виде предпросмотра. Считайте это черновиком. Этот предпросмотр доступен только при условии, что мы входим на сайт в том же браузере и мы с вами наблюдали его работу в панели предпросмотра. То же самое касается Google Analytics. Поскольку мы делаем всё в рамках одного Google-аккаунта данные без проблем долетают и до GA. Однако, сторонние сервисы не увидят никаких изменений пока мы не опубликуем их. На этот раз нужно нажать Отправить в правом верхнем углу рабочей области GTM.

Функция отправить в GMT

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

К слову, в повседневной практике я стараюсь выполнять и публиковать действия смысловыми группами, чтобы проще было ориентироваться и вспомнить, «что же я делал вчера?..» 🤔 В данном же руководстве я публиковал всем скопом и то только когда припекло. Просто имейте это в виду и выработайте в этом плане свою систему.

Итак, нажали Отправить и появилось окно где нам предложили назвать версию, добавить более полное описание и показали состав версии. Я написал лишь название и нажал Опубликовать.

Отправка версии рабочей области GTM

Увидим приблизительно такую картину и чтобы вернуться в рабочую область нажмём на ссылку вверху.

Информация о опубликованной версии GTM

Ах да! Яндекс метрика же… 😅Проверяем работу счётчика Метрики. Переходим в Счётчики > Мои счетчики и нажимаем на значок обновить возле счётчика. У вас он скорее всего будет красным или оранжевым, но после обновления должен позеленеть. Если это произошло, то попробуйте перезагрузить страницу и повторить проверку. Если всё равно не зеленеет, то вы сделали что-то не так либо на этапе установки кода GTM, либо счётчика Метрики.

Проверка счётчика Яндекс Метрика

Счётчик готов, переходим к настройке отправки событий в Яндекс Метрику.

Отправка событий из Google Tag Manager в Яндекс Метрику

Принцип отправки событий очень похож с тем, что мы делали для Google Analytics. Если вы используете только Яндекс Метрику, то имейте в виду, что у вас также должны быть настроены Переменные и Триггеры, так как это основные условия работы GTM. Благо мы это уже делали выше и теперь лишь осталось создать Теги GTM для каждого целевого действия на сайте. Я создам лишь некоторые, остальные делаются аналогично.

Триггеры > Создать. Называем триггер так, чтобы было понятно. У меня будет «ЯМ – Номер телефона в хедере». Конфигурация тега > Специальные > Пользовательский HTML. В поле нужно вставить специальный код. Я взял его из справки Яндекса, чтобы вы понимали.

<script>
	ym(XXXXXX, 'reachGoal', 'TARGET_NAME');
</script>
  • XXXXXX — идентификатор вашего счётчика. Найдёте в таблице ваших счётчиков рядом с названием;
  • TARGET_NAME — идентификатор цели. Берём из нашей таблицы то самое значение после сцепки: Call_Lead_Header.

Кликаем по блоку триггеров и выбираем триггер, соответствующий действию. У меня это «Номер телефона в хедере». Должно получиться так:

Настройка отправки события в Яндекс метрику

Имейте в виду, что приведённый выше код работает как для ссылок так и для форм, поскольку Яндекс Метрике по сути без разницы, что вы отслеживаете. Ей важно, что прилетело какое-то событие и на это событие создана цель (созданием целей Метрики мы займёмся в отдельном блоке ниже). Захватом событий разного типа, как вы помните, у нас занимается GTM за счёт Переменных и Триггеров. После, через настройку тега мы передаём эти события дальше.
Отправка остальных событий делается по аналогии. Я создам события для кнопки в хедере и формы в попапе уже без вашего участия и конечно же нажму Отправить, чтобы новые настройки улетели в чистовик и Метрика их увидела.

Перезагружаем страницу и проверяем события. Покажу только клик по номеру в шапке:

Отработка тегов GTM

Видим, что отработались 3 тега:

  1. Клик по внешним ссылкам, так как номер телефона считается внешней ссылкой, ибо не добавлен в исключения триггера;
  2. Номер телефона в хедере — улетело в GA;
  3. ЯМ – Номер телефона в хедере — улетело в ЯМ.

Имейте в виду, что изменения в Метрике вы увидите только после создания целей. Самые нетерпеливые могут перейти в раздел статьи, создать цель и проверить её. Ну, а мы пока займёмся Фейсбуком.

Подключение пикселя Facebook через Google Tag Manager

До того как подключить пиксель Facebook через Google Tag Manager у вас должен быть создан рекламный аккаунт. После этого переходите в Events Manager, увидите примерно такое:

Менеджер событий Facebook

Жмём на кнопку, выбираем «Добавление кода пикселя на сайт вручную». Копируем код, но окно пока не закрываем.

Код пикселя Facebook

Идём в GTM и по аналогии с Яндекс Метрикой создаём Тег, называем «Пиксель Facebook» и в качестве конфигурации выбираем Пользовательский HTML. Вставляем код пикселя Facebook в основное поле.
Раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на страницу (это важно!).
Нажимаем на блок триггеры и выбираем знакомый All Pages.

Добавление тега GTM для пикселя Facebook

Сохраняем тег и нажимаем Отправить в правом верхнем углу. Называем и публикуем версию и идём обратно на Facebook.

Отправить тестовый трафик Facebook

А на Фейсбуке у нас открытое окно с кодом. Нужно прокрутить вниз, вставить ссылку на сайт в поле для проверки пикселя и нажать Отправить тестовый трафик. Откроется страница и во первых, в Предварительном просмотре отобразится событие с пикселем Facebook, а во-вторых — в окошке на Фейсбуке появится надпись Активен.

Проверка пикселя Facebook

Дальше нам предложат настроить события, но мы будем отправлять свои, а Facebook подхватит их автоматически, поэтому на этом шаге нажимаем Отмена.

Отправка событий из Google Tag Manager в Facebook

Пора отправить наши события в Фейсбук. Для этого в GTM нужно снова создать тег. Я назову его по аналогии с Метрикой — «FB – Номер телефона в хедере». В качестве конфигурации вновь выбираем Пользовательский HTML. Вставляем этот код в основное поле, ID события меняем на своё из таблицы.

<script>
  fbq('trackCustom', 'ID события');
</script>

В данном случае, тип события trackCustom применяется поскольку мы используем свои, неизвестные Фейсбуку идентификаторы событий.

Раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на событие (это важно!). Открываем ещё один спойлер Порядок активации тегов, ставим галочку перед Активировать тег перед тегом… , нажимаем Выбрать тег и в боковой панели выбираем наш тег с Пикселем Facebook.
Это необходимо для того, чтобы тег отслеживания активировался только после полной загрузке пикселя.

Нажимаем на блок триггеры и выбираем тот триггер, для которого мы отправляем событие. В моём случае «Номер телефона в хедере». В итоге получится так:

trackCustom в Facebook через GTM

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

Событие в Facebook ушло

Данные в Facebook улетели и чтобы точно в этом удостоверится, воспользуемся помощником по пикселю. Клик по иконке в панели браузера покажет такое:

Помощник по пикселю Facebook

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

Статистика по пикселю Facebook

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

Подключение пикселя Вконтакте через Google Tag Manager

Здесь всё аналогично Фейсбуку, лишь интерфейсы другие. Перейдите в раздел Ретаргетинг рекламного кабинета Вконтакте. Если вы не собирали аудитории, то у вас там будет пусто, но нам сейчас нужно перейти в раздел Пиксели.

Просмотр аудиторий ретаргетинга Вконтакте

Далее нажимаем Создать

Список пикселей Вконтакте

Во всплывающем окне вводим название, вставляем домен где будет работать пиксель без протокола http/https, выбираем тематику сайта и нажимаем Создать.

Создание пикселя Вконтакте

В появившемся окне копируем код и идём в GTM > Теги > Создать. Называем «Пиксель Вконтакте», и в качестве конфигурации выбираем Пользовательский HTML. Вставляем код пикселя VK в основное поле.
Раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на страницу (это важно!).
Нажимаем на блок триггеры и выбираем знакомый All Pages.

Добавление пикселя Вконтакте в GTM

Сохраняем тег и нажимаем Отправить в правом верхнем углу. Называем и публикуем версию, идём обратно в Вконтакте и закрываем всплывающее окно.
В таблице должен появиться наш пиксель, но какое-то время он будет со статусом неактивен. Нужно подождать пока статус изменится на работает.

Статус пикселя Вконтакте

Кстати, пока проверяется пиксель Вконтакте, можно настроить отправку событий из GTM в VK.

Отправка событий из Google Tag Manager в Вконтакте

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

Асинхронное подключение JS API ВКонтакте и инициализация кода пикселя ретаргетинга

Идём в GTM и нужно снова создать тег. Я назову его — «JS API ВКонтакте». В качестве конфигурации вновь выбираем Пользовательский HTML. Вставляем этот код в основное поле:

<div id="vk_api_transport"></div>
<script>
  var pixel;

  window.vkAsyncInit = function() {
    pixel = new VK.Pixel('VK-XXXX-XXXXX-XXXXXXX');
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?159";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

где VK-XXXX-XXXXX-XXXXXXX — это уникальный код пикселя ретаргетинга и вот где его взять.

Кликните по названию пикселя в таблице и нажмите редактировать.

Редактировать пиксель Вконтакте

Откроется окно редактирования пикселя. Нам нужен уникальный код пикселя.

Уникальный код пикселя

Копируем и вставляем его в наш код. У меня получилось так:

<div id="vk_api_transport"></div>
<script>
  var pixel;

  window.vkAsyncInit = function() {
    pixel = new VK.Pixel('VK-RTRG-402045-1QhpY');
  };

  setTimeout(function() {
    var el = document.createElement("script");
    el.type = "text/javascript";
    el.src = "https://vk.com/js/api/openapi.js?159";
    el.async = true;
    document.getElementById("vk_api_transport").appendChild(el);
  }, 0);
</script>

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

Нажимаем на блок триггеры и выбираем уже набивший оскомину All Pages. И вот, что должно получиться:

Подключение JS API и инициализация пикселя Вконтакте

Сохраняем тег и идём дальше.

Отправка событий в ВК, наконец-таки

Тут всё аналогично Фейсбуку, поэтому покажу быстро. GTM > Cоздать тег. Назову его — «ВК – Номер телефона в хедере». В качестве конфигурации вновь выбираем Пользовательский HTML. Вставляем этот код в основное поле, ID события меняем на своё из таблицы.

<script> 
    VK.Retargeting.Event('ID события'); 
</script>

Для перестраховки раскрываем спойлер Расширенные настройки и в списке Настройки активации тега выбираем Один раз на событие (это важно!). Открываем ещё один спойлер Порядок активации тегов, ставим галочку перед Активировать тег перед тегом… , нажимаем Выбрать тег и в боковой панели выбираем наш тег с JS API.

Нажимаем на блок триггеры и выбираем тот триггер, для которого мы отправляем событие. В моём случае «Номер телефона в хедере». В итоге получится так:

Создание тега отправки событий из GTM в VK

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

События на сайте после добавления пикселя ВК

Видим отработанные события при открытии сайта. Теперь выполняем целевое действие.

Cобытия по клику GTM

Видим, что Google Tag Manager успешно отработал события, но передал ли в ВК?

Как ещё проверить улетает ли событие в Вконтакте?

К сожалению, но для Вконтакте нет инструментов проверки таких как для GTM и Facebook, однако, можно проверить событие с помощью Инструмента разработчика. Вызываем его по F12, переходим на вкладку Network, перезагружаем страницу и выполняем целевое действие. В окне появилась куча событий и чтобы отфильтровать вводим в окно поиска vk. В итоге должно остаться несколько событий. Часть из них относятся к событию просмотра страницы, а часть — к целевому действию. На скриншоте видно, что в запросе присутствует ID пикселя и ID события, а также Status Code: 200 с зелёным шариком, что свидетельствует о том, что событие успешно передано.

Проверка передачи событий в инструменте вебмастеров

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

Настройка MyTarget через Google Tag Manager

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

Если от вас будет много просьб, тогда дополню этот раздел подробной инструкцией. А пока идём настраивать цели, конверсии и аудитории.

Цели, конверсии, аудитории

Итак, события успешно «улетают» во все основные системы, и мы готовы настроить цели и аудитории в соответствии с полученными данными. Начнём в том же порядке — с целей Google Analytics.

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

Помните как мы настраивали события GTM и отправляли их в Google Аналитику? Так вот, цели должны настроиться с теми же идентификаторами и тогда это уже будут не просто события, а цели.

Идём в настройки Google Analytics и в блоке Все данные по веб-сайту выбираем Цели.

Настройки цели GA

Кликаем добавить цель.

Добавить цель GA

В мастере создания цели выбираем следующее:

  1. шаг. Установка цели — Вместо шаблона выбираем Собственная (в самом низу) > Далее;
  2. шаг. Описание цели — пишем название из нашей таблицы, Тип выбираем Событие > Далее;
  3. Подробные сведения о цели:
    1. Категория — Call;
    2. Действие — Lead;
    3. Ярлык — Header.

Вот, что должно получиться. На последнем шаге нужно нажать сохранить.

Создание цели в Google Analytics

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

Отчет в реальном времени GA конверсии

Остальные цели создаются по тому же принципу и просто имейте в виду, что если вы удачно передали событие в GA на одном из предыдущих шагов, то это уже 80% успеха. Останется лишь сопоставить События с Целями и дело в шляпе.

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

Настроим цели Метрики. Для этого в списке счётчиков нажимаем шестерёнку:

Переход в настройки Яндекс Метрики

Из настроек идём в цели метрики

Переход к целям Метрики

Нажимаем Добавить цель и во всплывающем окне пишем название из таблицы. Если вы настраиваете цель для последующей настройки ретаргетинга в Яндекс Директ, то поставьте соответствующую галочку, это упростит настройку. Тип условия выбираем JavaScript-событие и вписываем идентификатор из таблицы.

Добавление цели Яндекс Метрики по событию

Входим на сайт в режиме инкогнито либо в том браузере, где вы не авторизованы в Яндексе. Это важно так как иначе цель не будет засчитана. Кликаем по номеру телефона или что вы там настраиваете и спустя некоторое время (иногда нужно подождать минут 10-15) видим, что конверсия сработала. Смотреть нужно в Метрике > Отчёты > Стандартные отчёты > Конверсии.

Отчёт конверсии в Яндекс Метрике

Составная цель в Яндекс Метрике

Я неспроста сделал клик по кнопке промежуточным событием так как сам клик не является конверсионным действием. В Яндекс Метрике есть составные цели, которые позволяют выстроить воронку движения посетителя до целевого действия. Создаём!

Также идём в Настройка > Цели > Добавить цель. Название у меня будет «Заказ звонка в попапе – кнопка в хэдере», ретаргетинг вновь на ваше усмотрение, а вот Тип условия как раз Составная цель.

  • Шаг 1
    • Название — Кнопка Заказать звонок в хедере;
    • Условие — событие: идентификатор цели;
    • Значение поля — Button_Medium_Header.
  • Шаг 2
    • Название — Форма заказа звонка в попапе;
    • Условие — событие: идентификатор цели;
    • Значение поля — Form_Lead_Getcall.
Составная цель Яндекс Метрики

Снова смотрим сайт в режиме инкогнито, кликаем по кнопке, заполняем форму и в отчётах видим:

Отчёт о конверсиях по составным целям Яндекс Метрики

У меня вышло 2 заполнения формы так как Метрика долго обновляла статистику и пришлось перепроверить. Кнопку кликнул 3 раза, чтобы показать как выглядит отчёт если попап открыл, а форму не заполнил. Как это использовать?

  • Тестировать разное оформление попапов;
  • Настраивать ретаргетинг на тех, кто открыл попап, но не заказал звонок и исключать тех, кто дошёл до цели.

Яндекс Метрика — всё. На очереди Facebook.

Что делать с событиями Facebook

Мы отправляем данные в Facebook по нескольким причинам:

  1. Сбор аудитории для ретаргетированной рекламы в Facebook;
  2. Поиск похожей аудитории для рекламы на основе собранной, чтобы повысить охват;
  3. Анализ посещаемости;
  4. Отслеживание конверсий и эффективности рекламы.

Да-да, сейчас аналитическая система Facebook — это некий аналог Google Analytics. Итак, что же можно сделать после того как события отправлены.

Создание конверсий Facebook

Как и в случае с Google Аналитикой, в Фейсбук прилетают события, он их фиксируют, но они аморфны и нужно решить что это будет. Тем более, что мы использовали не стандартные события от Фейсбук, а произвольные. Поэтому нужно создать конверсии сопоставив им события, чтобы и мы и Facebook понимали, что это за действие.

На главном экране Events Manager нужно нажать создать конверсию.

Создание конверсии в Events Manager Facebook

В открывшемся окне, в выпадающем списке нужно выбрать одно из зафиксированных событий.

Выбор события конверсии Facebook
  • Название — берём из нашей таблицы;
  • Категория — выбираем подходящую нашему событию;
  • Ценность — заполняем по потребности.
Заполнение данных конверсии Facebook

После того как нажимаем создать, выйдет окно с оповещением о том, что конверсия создана и её можно использовать в рекламном аккаунте. Реклама в Facebook — отдельная песня и здесь мы её разучивать не будем.

Теперь в отчёте по специально настроенным конверсиям появились только что созданные и уже пошла статистика.

Отчет по специально настроенным конверсиям Facebook

Создание аудиторий Facebook на основе событий

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

  • Из общей массы посетителей всего сайта или конкретной страницы вычесть тех, кто заказал звонок или заполнил форму заявки. Тем кто остался показать рекламу;
  • Показывать рекламу товара если он не был заказан, а имеено: не был пройден путь от товара к корзине, оформлению заказа;
  • Напомнить про брошенную корзину, если заказ не был завершён;
  • Реклама дополнительного продукта для тех, кто совершил конверсию.

Кликаем в панели Events Manager Создать аудиторию > Пользовательская аудитория.

Создание пользовательской аудитории Facebook

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

Связать пиксель с рекламным аккаунтом Facebook

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

Связь рекламы с пикселем Facebook
Связь рекламы с пикселем Facebook 2

Также нужно разрешить пользователю управлять пикселем

Связь пользователя с пикселем Facebook
Разрешение пользователю управлять пикселем Facebook

После этого добавление аудиторий должно заработать и вы увидите такое окно. Выберите в нём рекламный аккаунт и нажмите Далее.

Выбор рекламного аккаунта Facebook

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

Создание аудитории Facebook

Введите количество дней за которое нужно собрать аудиторию (максимум 180), назоваите аудиторию, у меня будет «Клик по номеру в шапке» и нажмите создать аудиторию.

В следующем окне вам предложат создать рекламу или найти похожую аудиторию, но можно просто нажать готово.

Аудитория Facebook создана успешно

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

Создание аудиторий Вконтакте на основе событий

Смысл событий Вконтакте лишь в одном — сбор аудиторий для дальнейшего использования в рекламе.
В разделе ретаргетинг нажимаем создать аудиторию.

Создание аудитории Вконтакте

Я заполнил так:

  • Название — я написал «Заказали звонок на сайте»;
  • Источник — Получить с помощью пикселя и выбираем пиксель, который создавали выше;
  • Правило — Пользователи, посещавшие определённые страницы;
  • Время — выбираете на своё усмотрение;
  • Параметры — в списке выбираем Событие совпадает и вставляем ID события из нашей таблицы.
Создание аудитории вконтакте по событию

При желании можно добавить дополнительные параметры вроде определённых страниц, но это уже совсем другая история про ретаргетинг Вконтакте, а не про WordPress.

Теперь в списке отображается наша аудитория, а через некоторое время появится количество попавших в неё пользователей.

Список аудиторий ретаргетинга Вконтакте

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

Автоматическая отправка событий во все системы

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

  1. Настроили прослушивание событий в Google Tag Manager;
  2. Научили его различать только те, что нам нужны;
  3. Подключили другие системы через диспетчер тегов;
  4. Настроили отправку событий в другие системы.

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

Важное замечание!
Перед тем как мы продолжим нужно удалить все теги передачи событий во все системы кроме Google Analytics. Теги подключения кодов отслеживания, API и пикселей не троньте!

Потом не говорите, что не предупреждал 😉

Список тегов после зачистки

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

Минутка благодарности

Инструкция этого блока не появилась у меня в голове. За основу я взял эту статью и видео. По мне они не особо понятные широким массам. Автор объясняет довольно сбивчиво и на скорую руку, поэтому я решил приложить к этому свою гениальность объяснять сложные вещи с любовью и на понятном языке и про свою скромность тоже не забыл 🤓. Тем не менее, я благодарен автору за материал.

Изучаем события Google Analytics

Итак, GTM смотрит на то, что происходит на сайте подобно нашему пикаперу из метафоры выше. В тот момент, когда посетитель выполняет целевое действие, в Google Analytics передаётся закодированная строка события.

Зайдите на свой сайт, нажмите F12, в открывшемся инструменте разработчика перейдите на вкладку Network и перезагрузите страницу. А теперь выполните целевое действие. Помните, мы это уже делали когда проверяли отправку событий в ВК? В окне появится куча всяких событий и чтобы отсеять лишнее нам нужно ввести в окно поиска слово analytics. Останется всего несколько событий одно из которых — наше целевое действие.

Запрос который улетел в Google Analytics
https://www.google-analytics.com/collect?v=1&_v=j79&a=1571421060&t=event&ni=0&_s=1&dl=http%3A%2F%2Ftest.wplovers.pw%2Ftest-analitiki%2F&ul=ru-ru&de=UTF-8&dt=%D0%A2%D0%B5%D1%81%D1%82%20%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA%D0%B8%20-%20Journez&sd=24-bit&sr=1680x1050&vp=1665x435&je=0&ec=Call&ea=Lead&el=Header&_u=SACAAEAB~&jid=&gjid=&cid=904356779.1563671363&tid=UA-113475200-2&_gid=1654345249.1567170863&gtm=2wg8l2PKRQPNK&z=1568218448

Значение Request URL это и есть наш запрос в GA. Как я понял, что это именно то, что нам нужно? Легко! Прокручиваем ниже до раздела Query String Parameter (параметр строки запроса). Это то же самое, что мы видели выше, только там это было записано в одну строку, а здесь разложено в формате ключ:значение, а значит в более читаемом виде.

Параметры строки запроса в Google Analytics
v: 1
_v: j79
a: 1571421060
t: event
ni: 0
_s: 1
dl: http://test.wplovers.pw/test-analitiki/
ul: ru-ru
de: UTF-8
dt: Тест аналитики - Journez
sd: 24-bit
sr: 1680x1050
vp: 1665x435
je: 0
ec: Call
ea: Lead
el: Header
_u: SACAAEAB~
jid: 
gjid: 
cid: 904356779.1563671363
tid: UA-113475200-2
_gid: 1654345249.1567170863
gtm: 2wg8l2PKRQPNK
z: 1568218448

Видите что-то знакомое? Да-да, это наши параметры отслеживания, которые мы прописывали, когда создавали Теги отправки событий в GA. Паззл сложился!

Что нам это даёт? А то, что мы можем взять нужные параметры из этой строки запроса, сделать из них переменную GTM и использовать в Триггерах. Конкретно, нам нужны следующие ключи и их значения:

  • ec (Event Category) — Категория;
  • ea (Event Action) — Действие;
  • el (Event Label) — Ярлык.

Создание переменной для передачи параметров в DataLayer

Для начала пару слов о DataLayer или иначе Уровне данных в Google tag Manager. Это некий буфер, который выполняет запрограммированные операции на вашем сайте, результат которых передаётся в GTM, а тот в свою очередь распределяет дальше. DataLayer это отдельная большая тема и пишу об этом просто как гиперссылку, чтобы вы могли найти информацию если интересно. Мы же просто поработаем с ним без погружения в детали.

Переходим в GTM > Переменные и в блоке пользовательские переменные нажимаем Создать. Называем нашу переменную customTask (именно так, иначе не сработает). Жмём по блоку Конфигурация переменной и боковой панели выбираем Собственный код JavaScript. В поле вставляем этот код:

function () {
  return function(tracker) {
    var originalSendHitTask = tracker.get('sendHitTask');
    tracker.set('sendHitTask', function(model) {
      originalSendHitTask(model);
      var hitPayload = model.get('hitPayload'); // получаем все улетающие параметры в виде строки
      console.log(hitPayload); // выведем в консоли, чтобы посмотреть какой формат
      var GaEventVars = {}; // все параметры из строки закинем в объект
      hitPayload.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
          GaEventVars[decodeURIComponent(key)] = decodeURIComponent(value);
      }); 
      // и этот объект передадим в DataLayer в переменную 'GaEventParams' и создадим gtm-событие GaEvent
      window.dataLayer.push({'event':'GaEvent', 'GaEventParams': GaEventVars});
      
    });
  }
}
Добавление переменной customTask в GTM

Из комментариев в коде видно, что скрипт собирает данные и передаёт переменную GaEventParams, а также создаёт новое событие GaEvent, которое будет отображаться в предпросмотре GTM.

Подключение customTask к счётчику Google Analytics

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

Открываем ранее созданную переменную, которую мы назвали «Идентификатор отслеживания GA» и в спойлере дополнительные настройки выбираем Поля, которые необходимо задать, нажимаем + Поле и в Название поля пишем customTask, а в Значение нажимаем + и в боковой панели выбираем нашу переменную customTask. В это поле должен вставиться такой текст {{customTask}}.

Подключение customTask к счётчику Google Analytics

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

События GaEvent

Почему в моём случае их 3? Давайте считать!

  1. При загрузке страницы у нас срабатывает отслеживание Google Analytics;
  2. При клике по номеру телефона срабатывает событие клик по номеру, которое также передаётся в GA;
  3. При том же клике срабатывает триггер на внешние ссылки и это событие также улетает в GA.

При этом, если переключиться на вкладку Data Layer, то мы увидим в нём содержимое нашей строки запроса. То есть, наш скрипт из customTask отработал успешно.

Просмотр содержимого Data Layer

Получение переменной GaEventParams из Data Layer

Теперь нам нужно вытащить виртуальную переменную GaEventParams, созданную в Data Layer, и поместить в обычную переменную Google Tag Manager. Если этого не сделать GTM будет ругаться на то, что в Data Layer переменная есть, но он её не знает. Так познакомим их! 🙂
Для этого идём в GTM > Переменные > Пользовательские переменные > Создать. Название пишем «GaEventParams». Клик по блоку Конфигурация переменной, выбираем из списка Переменная уровня данных.

  • Имя переменной уровня данных — GaEventParams (прям так и только так);
  • Версия уровня данных — версия 2.

Сохраняем переменную, обновляем предпросмотр, перезагружаем страницу сайта и видим, что данные из Data Layer переданы в переменную GaEventParams.

Данные переданы из Data Layer в переменные

Триггер на событие GaEvent

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

Идём в Триггеры и создаём новый с названием «GaEvent». Клик по блоку Настройка триггера и в боковом меню выбираем Пользовательское событие.

  • Имя события — GaEvent. Именно так называется событие создаваемое триггером, который мы сделали на предыдущем шаге;
  • Условия активации триггера — Все специальные события.
Триггер на пользовательское событие GaEvent

То есть, мы дали задание триггеру обрабатывать все пользовательские события с идентификатором GaEvent.

Отправляем события во все системы одновременно

НУ вот и настал момент истины. Теперь нам нужно создать Тег, который будет отправлять данные во все системы.

GTM > Теги > Создать. Назову «Отправка событий во все системы». Клик по блоку Конфигурация тега, выбираем тип Пользовательский HTML и добавим в основное окно этот код:

<script>
(function(){
  var gaEventParams = {{GaEventParams}};
   console.log(gaEventParams);
  
    // нас интересуют только События
   if(gaEventParams.t == "event") {
      
      // определяем название (объединяем ec,ea,el в одно значение)
      var event_name = gaEventParams.ec + '_' + gaEventParams.ea + '_' + gaEventParams.el;
      
      // отправляем в Яндекс Метрику
      try {
        	ym(XXXXXX, 'reachGoal', event_name);
        } catch (e) {}
      
      // отправляем в Facebook
      try {
              fbq('trackCustom', event_name); 
        } catch (e) {}
      
      // отправляем в VK
      try {
              VK.Retargeting.Event(event_name); 
        } catch (e) {}
  }
    
})();
</script>

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

  1. Смотрит содержимое события GaEvent;
  2. Проверяет условие, чтобы это было именно событие event, а не что-то другое, например pageview(просмотр страницы);
  3. Помним, что в ec, ea, el ключах строки запроса хранятся данные наших событий. На этом шаге, скрипт берёт значения этих ключей и соединяет их в одну строку разделяя знаками _;
  4. Далее происходит отправка во все системы по очереди, а вместо переменной event_name подставляется строка, получившаяся на шаге 3.

Помните последнюю графу в нашей таблице? Именно для этого мы соединяли элементы цели и разделяли _, чтобы сделать идентификаторы целей более универсальными.

После вставки кода нужно нажать на блок Триггеры, выбрать из списка созданный ранее GaEvent и затем сохранить тег.

Тег отправка событий во все системы

Фильтрация внешних ссылок

Помните мы создавали триггер для клика по внешним ссылкам? Так вот, это тоже является событием и оно мешает отправке данных во все системы. Каким образом?

  • Во-первых, вместо события клика по номеру, в системы улетает событие клика по исходящим ссылкам;
  • Во-вторых, при клике по внешним ссылкам срабатывает триггер и присылает не нужные нам события. Например, в тот же Facebook прилетело событие с идентификатором Click_Клик по исходящей ссылке_https://www.google.com/

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

Если вы используете отслеживание кликов по внешним ссылкам, то рекомендую выполнить инструкцию ниже.

Фильтрация на уровне триггера

Открываем наш триггер с названием «Клики по внешним ссылкам», нажимаем на Настройки триггера и добавляем ещё одно условие:

  1. Click URL;
  2. не соответствует регулярному выражению;
  3. tel\:|mailto\:

Теперь триггер не будет срабатывать если ссылка содержит указанные ранее домены и протоколы в адресе.

Добавление дополнительного фильтра для номеров и email
Фильтрация отправки событий на уровне кода

Чтобы в системы не поступали лишние события, нужно добавить дополнительное условие в код. При выполнении скрипт будет смотреть не выполняется ли условие и если выполняется, то будет останавливать отправку. Секрет прост. Нужно добавить в код отправки событий во все системы вот такое условие:
&& gaEventParams.ea != "Клик по исходящей ссылке"
где Клик по исходящей ссылке — это значение поля Действие в Теге для отправки кликов по внешним ссылкам (выше про это было).
В итоге код для Отправки событий во все системы будет таким:

<script>
(function(){
  var gaEventParams = {{GaEventParams}};
   console.log(gaEventParams);
  
    // нас интересуют только События
   if (gaEventParams.t == "event" && gaEventParams.ea != "Клик по исходящей ссылке") {
   
      
      // определяем название (объединяем ec,ea,el в одно значение)
      var event_name = gaEventParams.ec + '_' + gaEventParams.ea + '_' + gaEventParams.el;
      
      // отправляем в Яндекс Метрику
      try {
        	ym(XXXXXX, 'reachGoal', event_name);
        } catch (e) {}
      
      // отправляем в Facebook
      try {
              fbq('trackCustom', event_name); 
        } catch (e) {}
      
      // отправляем в VK
      try {
              VK.Retargeting.Event(event_name); 
        } catch (e) {}
  }
    
})();
</script>

Проверка работы связки

Заходим на сайт в режиме инкогнито. Открываем инструмент для вебмастеров нажав на клавишу F12, переходим на вкладку Network и нажимаем очистить.

Очистка событий инструментов для вебмастеров

После этого выполняем целевое действие. Имейте в виду, если у вас включен вебвизор в Яндекс Метрике, то при перемещении курсора будут появляться новые события. Ничего страшного, сейчас мы отфильтруем запросы и всё встанет на места.

Вводим в поле поиска часть идентификатора цели и изучаем то, что осталось:

Запросы на вкладке Network инструмента разработчиков

А осталось всего 4 события. У меня первая Метрика. Если в правой части прокрутить вниз, то увидим, что в разделе Query String Parameters улетел запрос с нашим идентификатором цели:

Проверка запросов в Яндекс Метрику

Следующий на очереди Google Analytics и с ним тоже всё хорошо. Ещё бы, он ведь у нас интегрирован без всяких кодов, но мало ли, вдруг что-то мешает.

Проверка отправки событий в Google Analytics

Следующий Facebook и его строка запроса выглядит так:

Проверка запросов в Facebook

Ну и замыкает всё это дело событие Вконтакте

Проверка отправки событий в Вконтакте

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

В справке Яндекс Метрики предложено проверять цели с добавлением специального параметра ?_ym_debug=1 в конце ссылки. Выглядеть это будет так:
http://yoursite.com/?_ym_debug=1

После того как вы перешли на сайт по такой ссылке, нужно снова открыть инструмент разработчика, перейти на вкладку Console и выполнить целевое действие (важно чтобы оно не перезагружало страницу иначе ничего не увидите).

Проверка целей яндекса через _ym_debug=1

Как видите, Метрика успешно зафиксировала цель.

Проверка событий Facebook помощником по пикселю

Это мы уже проходили, поэтому просто напомню, что так тоже можно. Выполняем целевое действие на странице и видим примерно такую картину:

Проверка целевых событий Facebook

Что если вам нужно отправлять события в MyTarget

Раз уж выше я упоминал про MyTarget, то вероятно вам понадобится отправлять события и в него. В этом случае просто добавляется кусок кода, который на 98% соответствует их документации. И тогда полный код отправки во все системы будет таким:

<script>
(function(){
  var gaEventParams = {{GaEventParams}};
   console.log(gaEventParams);
  
    // нас интересуют только События
   if(gaEventParams.t == "event") {
      
      // определяем название (объединяем ec,ea,el в одно значение)
      var event_name = gaEventParams.ec + '_' + gaEventParams.ea + '_' + gaEventParams.el;
      
      // отправляем в Яндекс Метрику
      try {
          ym(XXXXXX, 'reachGoal', event_name);
        } catch (e) {}
      
      // отправляем в Facebook
      try {
              fbq('trackCustom', event_name); 
        } catch (e) {}
      
      // отправляем в VK
      try {
              VK.Retargeting.Event(event_name); 
        } catch (e) {}
        
      // отправляем в MyTarget (Mail.ru)
      try {
            var _tmr = window._tmr || (window._tmr = []);
			_tmr.push({ id: ID-счётчика, type: 'reachGoal', goal: event_name });
        } catch (e) {}
    
  }
    
})();
</script>

Вместо ID-счётчика нужно написать тот, что получили при регистрации в Рейтинге. Имейте в виду, что этот код без фильтрации кликов по внешним ссылкам.

Краткое резюме того, что сделали

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

  1. Вывели запрос, адресованный GA в DataLayer GTM за счёт переменной customTask;
  2. Подключили customTask к переменной счётчика Google Analytics, чтобы при его срабатывании активировалось наше задание. Кроме того, создали новую переменную GaEvent;
  3. Получили GaEventParams из Data Layer, чтобы можно было на него настроить Триггер;
  4. Сделали триггер, который срабатывает при активации события GaEvent;
  5. Создали Тег, который на основе всего предыдущего отправляет события во все системы.

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

Заключительные штрихи и выводы

Ну, вот и пора закругляться, но в заключении последний штрих (Да успокойте его кто-нибудь уже! 😂🔨 )

Исключите себя из статистики

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

  • Показывать если;
  • Роль;
  • Не равно;
  • Administrator.
Настройки логики Woody Snippets

То же самое нужно проделать и со вторым кодом Google Tag Manager.

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

Это точно всё…

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

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

Единственное о чём прошу, не нужно писать очевидные функции GTM вроде импорта и экспорта контейнеров. Пишите только интересные приёмы.

Слова напутствия

Наверное тут надо подбодрить что у вас всё получится и похвалить тех у кого получилось. Так вот, из-за большого объёма может показаться, что всё это сложно. Просто наберитесь терпения, вникните один раз, проделайте 2-3 и на четвёртый уже будете это дело как орехи щёлкать. Имейте в виду, что Google Tag Manager — это не страшный зверь от «корпорации добра», а лишь работяга, который выполняет наши поручения по сбору данных на сайте и отправке их в разные системы. Помните, не боги горшки обжигают и всё у вас получится.

С любовью, WPlovers.

Поделитесь статьёй с друзьями!
Поделиться в facebook
Facebook
Поделиться в vk
Вконтакте
Поделиться в twitter
Twitter
Поделиться в telegram
Telegram
Поделиться в whatsapp
WhatsApp
Поделиться в skype
Skype
Поделиться в email
Почта
Напишите ваше мнение!
Пролистать наверх