В своем выступлении я постараюсь отойти от ставших уже стандартными описаний по настройке Google Tag Manager: установке счетчиков, междоменном отслеживании, формирование datalayer и т.д. Многое из этого и так раскрыто в многочисленных гайдах в интернете и вряд ли заслуживает дополнительного внимания. Необходимо двигаться вперед, уходить от стандартного и изведанного, к новому и интересному, открывать перспективные и нераскрытые возможности, развивать себя и рынок. В данном свете нет ничего более интересного, чем исследование возможностей самого, казалось бы, просто из тегов GTM – пользовательский HTML, который позволяет на лету изменять, добавлять и удалить контент на страницах вашего сайта. Мы постараемся понять, используя практические примеры, реальные возможности, открывающиеся перед нами и постараемся научиться правильно думать и понимать такой инструмент как GTM.

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.