В своем выступлении я постараюсь отойти от ставших уже стандартными описаний по настройке Google Tag Manager: установке счетчиков, междоменном отслеживании, формирование datalayer и т.д. Многое из этого и так раскрыто в многочисленных гайдах в интернете и вряд ли заслуживает дополнительного внимания.
Необходимо двигаться вперед, уходить от стандартного и изведанного, к новому и интересному, открывать перспективные и нераскрытые возможности, развивать себя и рынок.
В данном свете нет ничего более интересного, чем исследование возможностей самого, казалось бы, просто из тегов GTM – пользовательский HTML, который позволяет на лету изменять, добавлять и удалить контент на страницах вашего сайта. Мы постараемся понять, используя практические примеры, реальные возможности, открывающиеся перед нами и постараемся научиться правильно думать и понимать такой инструмент как 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
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
Добрый день! Как Вы знаете у меня есть всего порядка 20 минут чтобы рассказать Вам о некоторых возможностях GTM. Если точнее, то всего лишь об одной его возможности, которая открывает огромные перспективы и может использован для извлечение так сказать пользы.
Сегодня я не буду рассказывать о настройке чего либо с помощью GTM, как установить счетчик 10 способами и т.д. Все это вы и так в огромном количестве вы можете найти в интернете.и
Мы будем говорить об идеях, идеях того, что можно сделать используя пожалуй самую главную функцию GTM – custom HTML.
1 минута
Почему именно эта, казалось бы, самая простая функция GTM является самой важной и открывающей огромные перспективы.
По сути именно она позволяет нам, за счет JS кода, манипулировать отображаемым содержимым страницы, изменять его, добавлять или удалять.
Давайте представим себе несколько примеров использования, на вскидку, первое что приходит в голову.
30 сек
Итак, вот несколько примеров использования custom HTML и GTM из моей практики, которые оказались достойными внимания.
Подмена контента на сайте, как мы с моим другом заменяли убогие стандартные формы на новые и красивые с блекджеком и… ну вы поняли
Попап окно с промокодом для использования в связке с ремаркетингом
Введения понятия целевой посетитель для оптимизации кампаний
Сегментируем листы ремаркетинга на основе поведенческих показателей
Оффлайн трекинг
АБ тестирование – в конце потому что оказывается есть туториал и если не хватит времени, то мы и не будем об этом говорить
1 мин
Первый кейс, подмена контента. На скриншоте вы видите то, какой форма была. Она открывалась в новом окне, была страшной и неудобной, в ней была куча ненужных полей и что самое главное данные уходили 3ей стороне, обрабатывались ими, потом передавались дилеру и вручную заводились в CRM дилера. Это жесть и мы решили это исправить.
30 сек
Вводные данные:
Платформа импортера – у всех все одинаковое, нет преимуществ, все серо, бледно, а выделиться-то хочется, правильно?
Система закрытая, это значит, что ничего менять нельзя, даже если захочешь, нет доступов.
Есть формы – но, как уже говорил, они.. Ну никакие они.
И самое главное для нас – есть GTM,а значит – все что нам нужно, чтобы как следует поработать.
30 сек
Что мы сделали?
На первом шаге были сверстаны новые формы, на нашем сервере
Далее написали небольшой скрипт для подмены кнопок на сайте (чтобы по ним перестали открываться старые формы + добавили классы, чтобы прикрутить к новым)
Сверстали и допили скрипты для правильного отображения и вывода формы через iframe
1 мин
30 сек
Бонусно решили добавить аналитику форм, ведь эти новые формы надо еще и посчитать. К сожалению в моем любимом GA аналитики форм нет, поэтому пришлось крутиться и выдумывать.
Выбрали мы достаточно интересное решение: проверять поля формы на заполнение и отправлять эту информацию в GA используя virtual pageview.
30 сек