Эдгард Гомез (Starcom Mediavest Group) - "Другая сторона Google Tag Manager"
Download as PPS, PDF0 likes425 views
Документ описывает использование Google Tag Manager (GTM) для оптимизации пользовательского интерфейса и повышения эффективности ремаркетинга через индивидуализированные формы и контент. В нем обсуждаются методы создания и отслеживания форм, улучшение взаимодействия с целевыми посетителями, а также использование аналитики для A/B тестирования и отслеживания offline-конверсий. Основное внимание уделяется новым подходам к сбору и использованию данных для повышения конверсий и улучшения пользовательского опыта.
Эдгард Гомез (Starcom Mediavest Group) - "Другая сторона Google Tag Manager"
- 1. Другая сторона GTM Как «отойти» от установки счетчиков
- 2. Пользовательский HTML Что позволяет делать HTML CSS JS Добавляем свой код Элементы верстки, пиксели, iframe Меняем на лету Изменяем код, выполняем сценарии Меняем стили отображения Цвета, размеры, положение элементов
- 3. Примеры использования Подмена контента на сайте Подмена стандартных форм на сайте на кастомные Popup окно Окно с промокодом для улучшения ремаркетинга Целевой посетитель Определяем качественного посетителя для успешной оптимизации РК Advanced ремаркетинг Сегментируем листы ремаркетинга на основе поведенческих показателей x 5555 Скидка 15% Offline трекинг Промокод, трекинг и передача данных в Google Analytics AB тестирование Custom Dimensions и GTM – все что нужно A / B
- 4. Подмена контента (Favorit Motors) Было: 1) Страшно 2) Форма уводила пользователя с целевой страницы и открывалась в новом окне 3) Было 80% ненужных полей 4) Платформа импортера – несколько итераций для получения данных дилером
- 5. Платформа импортера У всех одинаковые сайты. В вебе конкурентного преимущества нет, выделиться невозможно. Закрытая система Нельзя ничего менять. Из-за закрытости системы, единственное что можно делать – статьи (и то с ограничениями). Есть формы записи Но они явно не оптимизированы и не соответствуют современным требованиям. Есть GTM А это как раз все, что нам нужно, чтобы оторваться по полной и сделать все красиво и современно. Подмена контента (Favorit Motors) Вводные данные
- 6. Подмена контента (Favorit Motors) Создаем формы На своем сервере создаем новые и красивые формы. Стилизуем их и добавляем функционал.01 02 03 Есть GTM Вот тут-то мы и оторвемся. Он поможет нам выделиться и сделать все тип-топ.04 Что делаем JS – Подмена кнопок Пишем код подменяющий HREF кнопок, т.е. чтобы по клику старые формы более не открывались. HTML - Iframe Пишем код для отображения наших форм в iframe на страницах сайта (display:none;)
- 7. Подмена контента (Favorit Motors) 1) Отличный дизайн 2) Сокращено количество полей 3) Форма находится на нашем сервере, а значит данные отправляются прямиком в нашу CRM Что стало?
- 8. Бонус: аналитика форм Мы создали красивую форму, данные, по которой хотелось бы измерить более подробно. Нужно что-то вроде аналитики форм, но только для Google Analytics. Цель: отследить заполнение / не заполнение полей форм Принцип: отслеживаем открытие формы, а далее при выходе с input полей отправляем virtual pageview типа imya-zapolneno-da (+проверка на то, были ли эти поля заполнены или нет)
- 9. Создаем формы На своем сервере создаем новые и красивые формы. Стилизуем их и добавляем функционал.01 02 03 GTM – Виртуальные просмотры Отправляем события в Google Analytics на основе данных в datalayer04 Что делаем Определяем поля Какие поля мы вообще собираемся считать. Подготовим их к работе со скриптом. JS – Отслеживаем заполнение Используя blur отслеживаем «выходы» с полей формы, проверяем было ли поле заполнено и, в зависимости от результата, отправляем соответствующий datalayer Бонус: аналитика форм
- 10. Промокоды или улучшаем ремаркетинг Мы только что научились добавлять контент на сайт Как бы нам еще это использовать, чтобы применить, собственно, для рекламы. Цель: максимизация эффекта от ремаркетинговых кампаний Принцип: при посещении сайта с ремаркетинговой кампании, человеку будет показываться промокод или иной бонус
- 11. HTML + CSS - Pop-up окно с промокодом Iframe нам не понадобится, обойдемся средствами html и CSS и сдизайним сам окошко (position: absolute; display: none;)01 JS – Работаем с Query String Считываем значение меток, на основе которых мы будем показывать наше окно02 JS – Работаем с самим окном Добавляем функции открытия и закрытия окна. «Оживляем» его. Мы в конце пути Ж)03 JS – Закрыть и не мешать Добавляем badge внизу экрана: появляется при закрытии окошка, нужен чтобы не «потерять» код при серфинге04 Что делаем Промокоды или улучшаем ремаркетинг JS – Используем куки Не открываем окно везде, показали раз – свернули в badge. Если посетитель вернется -> проверяем куки -> был -> badge.05
- 12. Промокоды или улучшаем ремаркетинг Что стало? utm_term=remarketing
- 13. «Целевой посетитель» Данных по конверсиям не всегда хватает для эффективного анализа и оптимизации рекламных кампаний (т.б. на уровне КС). Bounce rate, глубина просмотра, время на сайте – не всегда подходят, не всегда достаточны. Может быть трудно анализировать: как учесть все три, какой вес выдать… Цель: ввести понятие «целевой посетитель» для облегчения анализа и оптимизации Принцип: мы будем отслеживать комплекс поведенческих показателей прямо на сайте и на основе достижения комплекса показателей отрабатывать событие в Google Analytics.
- 14. Уверен, что и многое другое И т.д. Сколько времени человек провел на сайте, на одной странице или нескольких или на конкретных страницах Время на сайте Сколько пикселей посетитель проехал мышкой по экрану Километраж Мы можем отследить клики по меню, элементам управления, слайдеру, картинкам и т.д. Клики Копирование контент, поиск на сайте Нажатия клавиш Наведение мышкой на элементы сайта. По сути именно это используется для так называемых heatmaps Hover Просмотр страниц, определенных разделов или комбинации страниц сайта (главная + товар + адрес) Просмотр страниц Прокрутка экрана попроцентно, попиксельно, до конца и т.д. Особенно полезно для длиннолендингов Скроллинг «Целевой посетитель» Google Analytics Event
- 15. JS – Отслеживаем действия После выработки метрик и ТЗ, создаем JS код, который поможет нам отследить их выполнение01 JS – Определяем критерии Отслеживать мы научились, но теперь необходимо выработать критерии «целевого» посетителя02 JS – Проверяем условия Дорабатываем проверку выполнения условий 03 GTM – Событие Отправляем событие в Google Analytics 04 Что делаем «Целевой посетитель»
- 16. Что стало «Целевой посетитель» 1) В Google Analytics стали поступать нужные события 2) Достаточное количество данных для анализа 3) Оптимизатор конверсий etc 4) Profit!1 Пример: окно на основе показателей (привет cbh)
- 17. Сегментирование списков ремаркетинга Как мы еще можем использовать технологию «целевого» посетителя для нашей рекламы. Не секрет, что не все пользователи одинаковы и, возможно, нам следует рассегментировать наши списки ремаркетинга, чтобы разным пользователям показывать разный message. Цель: сбор сегментированных списков ремаркетинга на основе поведенческих метрик Принцип: логическое продолжение предыдущего примера, с той лишь разницей, что вместо событий мы будем подгружать ремаркетинговые пиксели.
- 18. JS – Отслеживаем действия После выработки метрик и ТЗ, создаем JS код, который поможет нам отследить их выполнение01 JS – Определяем критерии Отслеживать мы научились, но теперь необходимо выработать критерии «целевого» посетителя02 JS – Проверяем условия Дорабатываем проверку выполнения условий 03 JS – Грузим пиксель Загружаем пиксель «крутого» листа, если условия выполнены. Возможна более глубокая сегментация. Вычитание листов.04 Что делаем Сегментирование списков ремаркетинга
- 19. Ремаркетинг Сегментирование списков ремаркетинга Все пользователи Вообще все или верхний уровень вашего списка, т.е. тот, который мы будем сегментировать Сегмент №1 Группа посетителей выделенных по первичному признаку сегментирования Сегмент №2 Самые горячие посетители. Готовы купить, ищут много, много смотря.
- 20. Отслеживание offline конверсий Нам часто звонят и мы знаем, что звонят после посещения сайта, но мы не знаем источник данного звонка. Цель: определение источника звонков и последующая передача данных обратно в Google Analytics для последующего использования в целях оптимизации Принцип: показываем уникальный код (по нему мы и будем идентифицировать звонившего), передаем код в Custom Dimension, передаем Client ID в Custom Dimension (по нему мы будем отправлять данные обратно), автоматизируем процесс отправки.
- 21. JS – Генерация уникального кода Генерируем рандомное число (набор чисел и букв) для показа посетителю сайта01 JS – Записываем кода в Cookie Это нужно чтобы код «запоминался» и посетителю не выписывался новый при серфинге сайта02 HTML + JS – Показываем код Где-то внизу, как в примере с pop-up, либо любым другим удобным для нас способом03 GTM + JS – Передаем в GA Client ID + код Создаем non-interaction псевдо-событие для передачи с ним 2х пользовательских параметров: Client ID и сгенерированный код04 Что делаем Отслеживание offline конверсий Google Spreadsheets fun Тянем колонки с Client ID и Кодом из Google Analytics плагином, лист с Кодами из CRM (спросил менеджер), VLOOKUP, urlFetchApp – чтобы не отправлять все ручками.05
- 22. A/B тестирование Штатного функционала Google Analytics не хватает, да и доступа к исходному коду у нас нет. VWO и Optimizely не подходят по той же причине. Цель: провести A/B тестирование используя лишь «подручные» средства Принцип: на основе рандомного числа от 0 до 1 показываем посетителю тот или иной вариант тестирования, при этом «запоминаем» вариант, чтобы не нарушить эксперимент и отправляем Custom Dimension в Google Analytics
- 23. JS – Генератор случайных чисел Получаем число от 0 до 1. Чтобы впоследствии на его основе выдавать посетителям варианты тестирования01 JS – Записываем Cookie Из мы будем использовать для того, чтобы показывать впоследствии изначально выданный вариант тестирования02 JS + HTML - Вариант Делаем код вносящий изменения в дизайн страницы. Это и будет вариантом B нашего тестирования03 GTM – Отправляем данные С просмотром или псевдо-событием отправляем данные с Custom Dimension, в котором указан выданный вариант04 Что делаем A/B тестирование
- 24. Заключение Идеи Есть проблема Есть идея Учитесь Stackoverflow – тут есть ответ на любой вопрос по javascript Поисковые фразы Показывать поисковые фразы на сайте Mobile or not Проверка мобильный ли посетитель или нет Решайте проблемы Эффективно и быстро, используя накопленный опыт Развивайте идеи Одну и ту же идеи можно рассмотреть под другим углом Работаем с API Дизайн на основе погоды, времени года, курсы валют Думайте нестандартно Или будете ставить счетчики до «посинения» Не стойте на месте Тестируйте и пробуйте, что-то новое Facebook, Twitter юзер Стимулируем вступления в группу за счет определения залогинен ли пользователь в соц. сетях MindsetOutcome
- 25. Спасибо! Edgard Gomes Vivaki Russia 2015.
Editor's Notes
- #2: Добрый день! Как Вы знаете у меня есть всего порядка 20 минут чтобы рассказать Вам о некоторых возможностях GTM. Если точнее, то всего лишь об одной его возможности, которая открывает огромные перспективы и может использован для извлечение так сказать пользы. Сегодня я не буду рассказывать о настройке чего либо с помощью GTM, как установить счетчик 10 способами и т.д. Все это вы и так в огромном количестве вы можете найти в интернете.и Мы будем говорить об идеях, идеях того, что можно сделать используя пожалуй самую главную функцию GTM – custom HTML. 1 минута
- #3: Почему именно эта, казалось бы, самая простая функция GTM является самой важной и открывающей огромные перспективы. По сути именно она позволяет нам, за счет JS кода, манипулировать отображаемым содержимым страницы, изменять его, добавлять или удалять. Давайте представим себе несколько примеров использования, на вскидку, первое что приходит в голову. 30 сек
- #4: Итак, вот несколько примеров использования custom HTML и GTM из моей практики, которые оказались достойными внимания. Подмена контента на сайте, как мы с моим другом заменяли убогие стандартные формы на новые и красивые с блекджеком и… ну вы поняли Попап окно с промокодом для использования в связке с ремаркетингом Введения понятия целевой посетитель для оптимизации кампаний Сегментируем листы ремаркетинга на основе поведенческих показателей Оффлайн трекинг АБ тестирование – в конце потому что оказывается есть туториал и если не хватит времени, то мы и не будем об этом говорить 1 мин
- #5: Первый кейс, подмена контента. На скриншоте вы видите то, какой форма была. Она открывалась в новом окне, была страшной и неудобной, в ней была куча ненужных полей и что самое главное данные уходили 3ей стороне, обрабатывались ими, потом передавались дилеру и вручную заводились в CRM дилера. Это жесть и мы решили это исправить. 30 сек
- #6: Вводные данные: Платформа импортера – у всех все одинаковое, нет преимуществ, все серо, бледно, а выделиться-то хочется, правильно? Система закрытая, это значит, что ничего менять нельзя, даже если захочешь, нет доступов. Есть формы – но, как уже говорил, они.. Ну никакие они. И самое главное для нас – есть GTM,а значит – все что нам нужно, чтобы как следует поработать. 30 сек
- #7: Что мы сделали? На первом шаге были сверстаны новые формы, на нашем сервере Далее написали небольшой скрипт для подмены кнопок на сайте (чтобы по ним перестали открываться старые формы + добавили классы, чтобы прикрутить к новым) Сверстали и допили скрипты для правильного отображения и вывода формы через iframe 1 мин
- #8: 30 сек
- #9: Бонусно решили добавить аналитику форм, ведь эти новые формы надо еще и посчитать. К сожалению в моем любимом GA аналитики форм нет, поэтому пришлось крутиться и выдумывать. Выбрали мы достаточно интересное решение: проверять поля формы на заполнение и отправлять эту информацию в GA используя virtual pageview. 30 сек
- #10: 30 сек