Эдгард Гомес - "Фишечки gtm"
TRANSCRIPT
Другая сторона GTM
Как «отойти» от установки счетчиков
Пользовательский HTMLЧто позволяет делать
HTML
CSS
JS
Добавляем свой кодЭлементы верстки, пиксели, iframe
Меняем на летуИзменяем код, выполняем сценарии
Меняем стили отображенияЦвета, размеры, положение элементов
Примеры использования
Подмена контента на сайтеПодмена стандартных форм на сайте на кастомные
Popup окноОкно с промокодом для улучшения ремаркетинга
Целевой посетительОпределяем качественного посетителя для успешной оптимизации РК
Advanced ремаркетингСегментируем листы ремаркетинга на основе поведенческих показателей
x
5555Скидка 15%
Offline трекингПромокод, трекинг и передача данных в Google Analytics
AB тестированиеCustom Dimensions и GTM – все что нужно
A / B
Подмена контента (Favorit Motors)Было:
1) Страшно2) Форма уводила пользователя с
целевой страницы и открывалась в новом окне
3) Было 80% ненужных полей4) Платформа импортера – несколько
итераций для получения данных дилером
01Платформа импортераУ всех одинаковые сайты. В вебе конкурентного преимущества нет, выделиться невозможно.
Закрытая системаНельзя ничего менять. Из-за закрытости системы, единственное что можно делать – статьи (и то с ограничениями). 02
03Есть формы записиНо они явно не оптимизированы и не соответствуют современным требованиям.
Есть GTM А это как раз все, что нам нужно, чтобы оторваться по полной и сделать все красиво и современно.04
Подмена контента (Favorit Motors)Вводные данные
Подмена контента (Favorit Motors)
Создаем формыНа своем сервере создаем новые и красивые формы. Стилизуем их и добавляем функционал.01
0203
Есть GTM Вот тут-то мы и оторвемся. Он поможет нам выделиться и сделать все тип-топ.04
Что делаем
JS – Подмена кнопокПишем код подменяющий HREF кнопок, т.е. чтобы по клику старые формы более не открывались.
HTML - IframeПишем код для отображения наших форм в iframe на страницах сайта (display:none;)
Подмена контента (Favorit Motors)
1) Отличный дизайн2) Сокращено количество
полей3) Форма находится на
нашем сервере, а значит данные отправляются прямиком в нашу CRM
Что стало?
Бонус: аналитика форм
Мы создали красивую форму, данные, по которой хотелось бы измерить более подробно.
Нужно что-то вроде аналитики форм, но только для Google Analytics.
Цель: отследить заполнение / не заполнение полей форм
Принцип: отслеживаем открытие формы, а далее при выходе с input полей отправляем virtual pageview типа imya-zapolneno-da (+проверка на то, были ли эти поля заполнены или нет)
Создаем формыНа своем сервере создаем новые и красивые формы. Стилизуем их и добавляем функционал.01
0203
GTM – Виртуальные просмотрыОтправляем события в Google Analytics на основе данных в datalayer04
Что делаем
Определяем поляКакие поля мы вообще собираемся считать. Подготовим их к работе со скриптом.
JS – Отслеживаем заполнениеИспользуя blur отслеживаем «выходы» с полей формы, проверяем было ли поле заполнено и, в зависимости от результата, отправляем соответствующий datalayer
Бонус: аналитика форм
Промокоды или улучшаем ремаркетинг
Мы только что научились добавлять контент на сайт
Как бы нам еще это использовать, чтобы применить, собственно, для рекламы.
Цель: максимизация эффекта от ремаркетинговых кампаний
Принцип: при посещении сайта с ремаркетинговой кампании, человеку будет показываться промокод или иной бонус
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
Промокоды или улучшаем ремаркетингЧто стало?
utm_term=remarketing
«Целевой посетитель»
Данных по конверсиям не всегда хватает для эффективного анализа и оптимизации рекламных кампаний (т.б. на уровне КС).Bounce rate, глубина просмотра, время на сайте – не всегда подходят, не всегда достаточны. Может быть трудно анализировать: как учесть все три, какой вес выдать…Цель: ввести понятие «целевой посетитель» для облегчения анализа и оптимизации
Принцип: мы будем отслеживать комплекс поведенческих показателей прямо на сайте и на основе достижения комплекса показателей отрабатывать событие в Google Analytics.
Уверен, что и многое другоеИ т.д.
Сколько времени человек провел на сайте, на одной странице или
нескольких или на конкретных страницах
Время на сайте
Сколько пикселей посетитель проехал мышкой по экрану
КилометражМы можем отследить клики по меню, элементам управления,
слайдеру, картинкам и т.д.
Клики
Копирование контент, поиск на сайте
Нажатия клавиш
Наведение мышкой на элементы сайта. По сути именно это используется для так называемых heatmaps
Hover
Просмотр страниц, определенных разделов или
комбинации страниц сайта (главная + товар + адрес)
Просмотр страницПрокрутка экрана попроцентно, попиксельно, до конца и т.д. Особенно полезно для длиннолендингов
Скроллинг
«Целевой посетитель»
Google Analytics Event
JS – Отслеживаем действияПосле выработки метрик и ТЗ, создаем JS код, который поможет нам отследить их выполнение01
JS – Определяем критерииОтслеживать мы научились, но теперь необходимо выработать критерии «целевого» посетителя02
JS – Проверяем условияДорабатываем проверку выполнения условий03
GTM – Событие Отправляем событие в Google Analytics04
Что делаем«Целевой посетитель»
Что стало«Целевой посетитель»
1) В Google Analytics стали поступать нужные события
2) Достаточное количество данных для анализа
3) Оптимизатор конверсий etc4) Profit!1
Пример: окно на основе показателей (привет cbh)
Сегментирование списков ремаркетинга
Как мы еще можем использовать технологию «целевого» посетителя для нашей рекламы.
Не секрет, что не все пользователи одинаковы и, возможно, нам следует рассегментировать наши списки ремаркетинга, чтобы разным пользователям показывать разный message.Цель: сбор сегментированных списков ремаркетинга на основе поведенческих метрик
Принцип: логическое продолжение предыдущего примера, с той лишь разницей, что вместо событий мы будем подгружать ремаркетинговые пиксели.
JS – Отслеживаем действияПосле выработки метрик и ТЗ, создаем JS код, который поможет нам отследить их выполнение01
JS – Определяем критерииОтслеживать мы научились, но теперь необходимо выработать критерии «целевого» посетителя02
JS – Проверяем условияДорабатываем проверку выполнения условий03
JS – Грузим пиксельЗагружаем пиксель «крутого» листа, если условия выполнены. Возможна более глубокая сегментация. Вычитание листов.
04
Что делаем
Сегментирование списков ремаркетинга
Ремаркетинг
Сегментирование списков ремаркетинга
Все пользователиВообще все или верхний уровень вашего списка, т.е. тот, который мы будем сегментировать
Сегмент №1Группа посетителей выделенных по первичному признаку сегментирования
Сегмент №2Самые горячие посетители. Готовы купить, ищут много, много смотря.
Отслеживание offline конверсий
Нам часто звонят и мы знаем, что звонят после посещения сайта, но мы не знаем источник данного звонка.
Цель: определение источника звонков и последующая передача данных обратно в Google Analytics для последующего использования в целях оптимизации
Принцип: показываем уникальный код (по нему мы и будем идентифицировать звонившего), передаем код в Custom Dimension, передаем Client ID в Custom Dimension (по нему мы будем отправлять данные обратно), автоматизируем процесс отправки.
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
A/B тестирование
Штатного функционала Google Analytics не хватает, да и доступа к исходному коду у нас нет. VWO и Optimizely не подходят по той же причине.
Цель: провести A/B тестирование используя лишь «подручные» средства
Принцип: на основе рандомного числа от 0 до 1 показываем посетителю тот или иной вариант тестирования, при этом «запоминаем» вариант, чтобы не нарушить эксперимент и отправляем Custom Dimension в Google Analytics
JS – Генератор случайных чиселПолучаем число от 0 до 1. Чтобы впоследствии на его основе выдавать посетителям варианты тестирования01
JS – Записываем CookieИз мы будем использовать для того, чтобы показывать впоследствии изначально выданный вариант тестирования02
JS + HTML - ВариантДелаем код вносящий изменения в дизайн страницы. Это и будет вариантом B нашего тестирования03
GTM – Отправляем данныеС просмотром или псевдо-событием отправляем данные с Custom Dimension, в котором указан выданный вариант
04
Что делаемA/B тестирование
ЗаключениеИдеи
Есть проблемаЕсть идея
УчитесьStackoverflow – тут есть
ответ на любой вопрос по javascript
Поисковые фразыПоказывать поисковые
фразы на сайте
Mobile or notПроверка мобильный
ли посетитель или нет
Решайте проблемыЭффективно и быстро, используя накопленный опыт
Развивайте идеиОдну и ту же идеи можно рассмотреть под другим углом
Работаем с APIДизайн на основе погоды, времени года, курсы валют
Думайте нестандартноИли будете ставить
счетчики до «посинения»
Не стойте на местеТестируйте и пробуйте, что-то новое
Facebook, Twitter юзерСтимулируем вступления в группу за счет определения залогинен ли пользователь в соц. сетях
Min
dse
tO
utc
om
e
