Практические возможности работы с Google Tag Manager
1 like821 views
Доклад Алексея Данилина посвящен практическим возможностям использования Google Tag Manager для различных задач, включая A/B тестирование, обход кэширования, внедрение функционала и отслеживание событий на сайте. В документе рассмотрены ограничения реализации без привлечения разработчиков и предложены решения, которые позволили увеличить средний чек и улучшить анализ поведения пользователей. Также обсуждаются методы отслеживания целей и электронной торговли в Яндекс.Метрике и внедрение микроразметки для повышения видимости в поисковых системах.
Практические возможности работы с Google Tag Manager
- 1. Алексей Данилин Практические возможности работы с Google Tag Manager
- 2. План доклада 1. А/В тестирование. 3. Обход кэширования. 3. Быстрое внедрение дополнительного функционала специальных предложений для увеличения среднего чека. 4. Отслеживание отправки проблемных форм. 5. Внедрение микроразметки. 6. Отслеживание целей и электронной торговли в Яндекс.Метрике. 7. Работа с iframe.
- 3. А/В тестирование Задача: определить, нужна ли на сайте форма отзывов о компании для корпоративного сайта. Ограничение на реализацию: без привлечения разработчиков.
- 4. А/В тестирование Гипотеза: наличие данной формы увеличивает показатель отказов. Варианты решения: - стандартная реализация эксперимента в Google Analytics (не подходит из-за необходимости привлечения разработчиков); - Browser-only реализация с помощью Content Experiments JavaScript API и Google Tag Manager (предпочтительная реализация в данном случае даже с учетом всех ограничений)
- 5. А/В тестирование Реализация: - пользовательский HTML тег с кодом эксперимента (https: //developers.google.com/analytics/solutions/experiments-client-side? hl=ru#implement) и event для активации тега дополнительного хита в Universal Analytics; - тег Universal Analytics Event (Non-interaction) для отправки дополнительного хита.
- 6. А/В тестирование Результаты: Пришлось привлечь разработчиков, чтобы убрать форму.
- 7. Обход “злого кэширования” Задача: настроить отслеживание событий для анализа предстоящей рекламной кампании. Ограничения: 1) в течение одной сессии <head> постоянно копируется с предыдущей страницы; 2) цикл внедрения разработчиков превышает допустимые сроки реализации задачи.
- 8. Обход “злого кэширования” Варианты решения: - обычная настройка отслеживания событий Google Analytics через интерфейс Google Tag Manager (не подходит ввиду ограничения 1); - настройка событий с использованием dataLayer (не подходит ввиду ограничения 1); - использование пользовательских HTML тегов с кодом JavaScript, учитывающим логику активации/деактивации стандартных тегов (усложняет логику работы стандартных тегов, но является допустимым решением в данном случае).
- 9. Обход “злого кэширования” Реализация: - для каждого события в пользовательских HTML тегах создается JavaScript переменная (true/false), значение которой меняется в зависимости от необходимости активации/деакитивации тега события в данный момент; - в тех же тегах добавляются и удаляются из dataLayer event для активации тегов событий; - парсинг ClientID и добавление в Action некоторых событий для устранения дублей.
- 11. Обход “злого кэширования” Результат: в разработанном для клиента BI решении события фиксируются корректно, что позволяет проводить корректный анализ поведения пользователей во время проведения рекламной кампании.
- 12. Блок специальных предложений для увеличения среднего чека Задача: увеличить средний чек для онлайн-заказа пиццы. Ограничения: без привлечения разработчиков.
- 13. Блок специальных предложений для увеличения среднего чека Варианты решения: - внедрение дополнительного функционала для повышения среднего чека (не подходит из-за наложенного ограничения); - реализация блока через Google Tag Manager (оптимальный вариант с учетом всех ограничений).
- 14. Блок специальных предложений для увеличения среднего чека Реализация: - 2 пользовательских HTML тега - для активации в пустой и заполненной корзине + теги для отправки событий Universal Analytics
- 15. Блок специальных предложений для увеличения среднего чека Результаты: - увеличение среднего чека по всем источникам трафика на 15% у пользователей, взаимодействующих со скриптом, по сравнению с остальными пользователями; - 95% пользователей, взаимодействующих со скриптом, в итоге делают заказ.
- 16. Отслеживание отправки проблемных форм Задача: - настроить отслеживание отправки заявок через форму на сайте; - настроить отслеживание процесса заполнения формы. Ограничения: 1) без участия разработчиков; 2) форма сверстана не корректно (при отправке не фиксируется событие gtm.formSubmit).
- 17. Отслеживание отправки проблемных форм Варианты решения: - в Google Tag Manager использовать встроенные теги для отслеживания отправок форм (не подходит из-за ограничения 2); - реализовать отслеживание отправки формы через запись данных в dataLayer (не подходит из-за ограничения 1); - использовать скрипт для проверки правильности заполнения полей формы и если она заполнена правильно, то отправлять событие в Google Analytics + использовать виртуальные страницы для отслеживания процесса заполнения формы (оптимальное решение).
- 18. Отслеживание отправки проблемных форм Реализация: - использовать пользовательский HTML тег для проверки корректности заполнения формы, записи event в dataLayer для активации тега отслеживания события в Google Analytics и записи event на каждом шаге заполнения формы; - использовать стандартный тег Universal Analytics Event для отправки события в Google Analytics; - использовать стандартный тег Universal Analytics PageView для отправки просмотров виртуальных страниц в Google Analytics.
- 19. Отслеживание отправки проблемных форм Результаты: визуализация последовательности заполнения формы и возможность её анализа
- 20. Отслеживание целей и электронной торговли в Яндекс.Метрике Задача: настроить отслеживание целей и электронной торговли в Яндекс. Метрике Ограничения: без внедрения разработчиков
- 21. Отслеживание целей и электронной торговли в Яндекс.Метрике Варианты решения: - внедрить дополнительный код на сайт (не подходит из-за ограничения); - использовать Google Tag Manager для передачи данных электронной торговли в Яндекс.Метрику.
- 22. Отслеживание целей и электронной торговли в Яндекс.Метрике Реализация: - спарсить со страницы подтверждения заказа данные о заказе в массив yaParams; - на странице подтверждения заказа активировать пользовательский HTML тег с кодом отслеживания событий в Яндекс.Метрике с учетом yaParams (http://help.yandex. ru/metrika/content/e-commerce.xml); - в Яндекс.Метрике настроить цель для отслеживания события из предыдущего пункта.
- 23. Отслеживание целей и электронной торговли в Яндекс.Метрике Результат:
- 24. Отслеживание целей и электронной торговли в Яндекс.Метрике Для сравнения данные из Google Analytics за тот же период: У клиента есть возможность сравнивать данные из двух источников.
- 25. Микроразметка сайта Задача: добавить на сайт микроразметку для отображения в поисковой выдаче Google дополнительной строки поиска по сайту Ограничения: цикл внедрения доработок у клиента внесет слишком большие временные задержки в анализ результатов
- 26. Микроразметка сайта Варианты решения: - внедрить код микроразметки на сайт (не подходит из-за ограничения); - использовать Google Tag Manager для внедрения разметки через Json-LD (оптимальный вариант).
- 27. Микроразметка сайта Реализация: - пользовательский HTML тег на главной странице сайта со специальной разметкой (https://developers.google.com/structured- data/slsb-overview)
- 29. Микроразметка сайта Результат: - при повышении трафика из Google на 4,5% после появления строки в поиске использование внутреннего поиска по сайту упало на 3,5%; - CTR по запросам с поисковой строкой в результатах выдачи увеличился в среднем на 2%.
- 30. Варианты решения проблем с iframe Задача: настроить отслеживание взаимодействия пользователей с формой компании, её скриптами и страницами на сторонних сайтах для сбора статистики в личном кабинете клиентов Ограничения: - форма компании размещается на сторонних сайтах в iframe; - есть возможность размещать форму на отдельной странице стороннего сайта, к которой у заказчика есть доступ к редактированию; - переход к форме осуществляется после взаимодействия со скриптом, призывающим заполнить форму.
- 31. Варианты решения проблем с iframe Варианты решения: - добавить код отслеживания на страницу формы и передавать данные в личный кабинет по API (теряется часть взаимодействий пользователей со страницами, на которых размещен код формы, и со скриптом перехода к форме); - объединить все взаимодействия в одну цепочку и передавать данные в личный кабинет по API (решает основную задачу).
- 32. Варианты решения проблем с iframe
- 33. Варианты решения проблем с iframe Реализация: - в скрипт перехода к форме добавить парсинг Client ID и отправку просмотра страницы при клике по скрипту через Measurement Protocol в Universal Analytics; - на странице, содержащей форму, получить Client ID, отправить данные о просмотре страницы в Universal Analytics и перед загрузкой формы передать в неё через GET-параметры Client ID; - на странице формы получить из GET-параметров Client ID и передать данные о взаимодействии с формой в Universal Analytics c учетом полученного ID.
- 34. Варианты решения проблем с iframe Результат: - в личном кабинете у пользователя сервиса отображается полная цепочка взаимодействий от клика по скрипту до отправки формы в iframe; - пользователь может анализировать эффективность работы сервиса на каждом этапе; - у сервиса есть возможность анализировать взаимодействие с их элементами на страницах сторонних сайтов.
- 35. Узнайте больше об интернет-маркетинге