Цель-воронка Google Analytics с событиями. Часть 2

Для тех, кто не в теме, мы начали создавать цель-воронку в Google Analytics с событиями. В первой части статьи мы проделали всю работу в Google Analytics. Теперь пришла очередь настройки Google Tag Manager. Продублирую скриншот нашей воронки, созданной в прошлый раз — это будет служить шпаргалкой.

Как выглядит воронка в Google Analytics

Итак, переходим в Google Tag Manager. Естественно, не нужно говорить, что он уже должен быть установлен на сайте 🙂 Если у вас он еще не настроен, читайте инструкцию по установке здесь — установка GTM на сайт.
Если вы находитесь в GTM, не торопитесь создавать новый тег. Сначала перейдите в пункт меню «Переменные», а затем нажмите «Настроить», там увидите заголовок «Клики» и поставьте чекбоксы напротив Click Element и Click ID.

Включение переменной Click Element в GTM

Теперь переходиv к созданию тега. Поскольку первые два шага работают на основе действительных URL, на них теги создавать не нужно, поэтому мы создадим вызов виртуальной страницы на шаге №3 — нажатие кнопки «В корзину». Выбирайте тип тега «Пользовательский HTML». В верхнее поле добавляйте код <script>gtag('config', 'UA-XXXXXXXXX', {'page_path': '/add-to-cart'})</script>. Данный код дает команду передать вызов виртуальной страницы /add-to-cart счетчику номер UA-XXXXXXXXX (здесь, разумеется, вы должны подставить свой номер). Обратите внимание, что код /add-to-cart соответствует коду, указанному в шаге 3 на скриншоте в начале статьи.

Срабатывание виртуальной страницы в GTM

Теперь создадим триггер на нажатие заветной кнопки. Переходим на страницу карточки товара, отыскиваем эту кнопку, жмем правой кнопкой мыши — посмотреть код. Жмите правой кнопкой мыши уже по участку кода с открывающим тегом <button>, выбирайте Copy — > Copy Selector. Таким образом, вы скопировали селектор CSS кнопки. В Google Tag Manager это означает, что мы будем использовать триггер Click Element.

Копирование селектора CSS у кнопки

Возвращаемся в GTM, где нас ждет незаконченный тег. Кликайте на поле «Триггеры». Если вы ранее не создавали триггеры, вам предложат выбрать стандартный триггер All pages, но вы не соглашайтесь и жмите плюс в верхнем-правом углу. Дайте триггеру такое имя, чтобы оно поясняло его суть. Например, «Клик по кнопке В корзину». Кликайте на окно и выбирайте там заголовок Клик — > Все элементы. Теперь выставляйте вариант «Некоторые клики», в первом поле выбирайте «Click Element», во втором «Соответствует селектору CSS», а в третьем — тот селектор , который мы копировали у кнопки выше по тексту. В нашем случае это: #product-2428 > div.summary.entry-summary > form > div > div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled > button. Обратите внимание, что селектор начинается с #product-2428. По цифрам и названию можно догадаться, что этот id будет меняться на каждом продукте. Я проверил на другой карточке, и действительно, цифра меняется на каждому продукте. Если вы не хотите, чтобы этот шаг корзины отрабатывал только на одной карточке, нужно исправить селектор, убрав оттуда #product-2428 >. В итоге получится такой селектор: div.summary.entry-summary > form > div > div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-enabled > button
Жмем «Сохранить» несколько раз, пока не вернемся в окно тегов.

Создание нового триггера в GTMКлик - все элементы Google Tag ManagerУказание CSS селектора для кнопки В Корзину

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

Копируем селектор поля ФИОСоздаем триггер Клик по ФИОСоздаем триггер Клик по ФИО_1

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

Копируем селектор поля ТелефонКопируем селектор поля EmailКопируем селектор поля Адрес//sqooqa.ru/wp-content/uploads/2018/02/Копируем-селектор-кнопки-Подтвердить-заказ.jpg

И создаем тег для каждого нажатия.

Для поля «Телефон»

Тег на клик по полю ТелефонТриггер на клик по полю Телефон

Для поля «Email»

Тег на клик по полю EmailТриггер на клик по полю Email

Для поля «Адрес»

Тег на клик по полю АдресТриггер на клик по полю Адрес

Для кнопки «Подтвердить заказ»

Тег на клик по полю Подтвердить заказТриггер на клик по полю Подтвердить заказ

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

Успешное срабатывание цели-воронки в отчете Google Analytics

Если что-то не получилось, пишите в комментарии, будем разбираться вместе 🙂

Цель-воронка Google Analytics с событиями. Часть 2: 1 комментарий

Добавить комментарий

Ваш e-mail не будет опубликован.