В первую версию книги «Google Tag Manager для googлят» попали самые распространенные примеры настроек GTM. Если вы нашли ошибку или хотите дополнить этот раздел собственной публикацией, присылайте материал мне на почту [email protected]
Данная глава подготовлена командой GaSend.com.
Прослушивание кликов в GTM
Используя отладчик (режим отладки) GTM, можно определить те переменные, с помощью которых будет осуществляться отслеживание действий пользователей на сайте.
Рис. 436. Режим отладки – gtm.click
Очень часто такие события как клик по ссылке (gtm.linkClick), клик по кнопке (gtm.click) и отправка формы (gtm.formSubmit) не фиксируются в режиме отладки.
Рис. 437. События в режиме отладки
Как видно из скриншота, Google Tag Manager не зафиксировал ни одного из выше перечисленных событий. Для того чтобы события начали фиксироваться, необходимо создать три дополнительных триггера:
1. Начнем с настройки триггера для прослушивания кликов (gtm.click), который будет фиксировать события, связанные с кликами на странице.
Для этого создаем новый триггер и называем его «Все клики».
● Тип триггера – «Клик – Все элементы»;
● Триггер активации – «Все клики».
Сохраняем триггер.
Рис. 438. Создание триггера типа «Все клики»
1. Триггер для прослушивания кликов по ссылкам (gtm.linkClick). Называем его «Все клики по ссылкам».
● Тип триггера – «Клик – Только ссылки»;
● Триггер: активации – «Все клики по ссылкам».
Сохраняем триггер.
Рис. 439. Создание триггера типа «Клик – Только ссылки»
2. Создаем триггер для прослушивания отправок форм (gtm.formSubmit). Называем его «Отправка всех форм».
● Тип триггера – «Отправка формы»;
● Триггер активации – «Все формы».
Сохраняем триггер.
Рис. 440. Создание триггера типа «Отправка формы»
После настройки триггеров переходим в режим отладки. И видим, что теперь нам доступны наши события gtm.click, gtm.linkClick, gtm.formSubmit.
Рис. 441. События gtm.click, gtm.linkClick, gtm.formSubmit
С этого момента мы можем настраивать отслеживание нужных нам событий, привязываясь к соответствующим значениям переменных.
Отслеживание кликов с помощью GTM
Рассмотрим настройки на примере клика по кнопке «Обратный звонок».
Рис. 442. Отслеживание кнопки «Обратный звонок»
Последовательность действий:
1. Настраиваем прослушивание кликов;
2. Переходим в пункт меню «Переменные», нажимаем на кнопку «Настроить» и активируем соответствующие переменные:
Рис. 443. Активация встроенных переменных типа «Клики»
3. Активируем режим предварительного просмотра:
Рис. 444. Активация режима предварительного просмотра
4. Переходим на необходимую страницу сайта и обновляем eе для активации режима отладки
5. Далее кликаем по элементу, для которого хотим настроить отслеживание целей. В нашем случаем это будет кнопка «Обратный звонок». Видим, что зафиксировалось соответствующее событие gtm.click:
Рис. 445. Зафиксированное событие gtm.click
6. Выбираем событие gtm.click и переходим на вкладку «Variables». Данному событию соответствуют несколько переменных. В нашем случае, для дальнейших настроек копируем значение переменной Click Classes.
Примечание: если по каким-то причинам у вас нет необходимой переменной при клике по кнопке, то обратитесь к вашему программисту, чтобы он ее добавил, или же используйте CSS-селекторы.
Рис. 446. Копируем Click Classes элемента
7. Переходим к настройкам GTM. В первую очередь создаем соответствующий триггер, который будет принимать истинное значение, когда будет происходить клик по кнопке «Обратный звонок». В качестве условия активации триггера задаем ранее скопированное значение переменной Click Classes. Для этого необходимо задать следующие настройки:
● Тип триггера – «Клик – Все элементы»
● Триггер: активации – «Некоторые клики»
● Click Classes равно enter_1 GTM-zvonok-link
Рис. 447. Условие активации триггера по некоторым кликам
8. Cоздаем тег, который будет передавать события в Google Analytics. Называем тег таким образом, чтобы было понятно за что он отвечает. В качестве типа тега указываем «Universal Analytics».
● Тип тега – «Universal Analytics»
● Тип отслеживания – «Событие»
Задаем значения переменных, которые будут передаваться в Google Analytics при нажатии на кнопку. Не обязательно заполнять все поля. Они нужны для более детального анализа в отчетах Google Analytics.
Рис. 448. Настройки тега Universal Analytics
9. Указываем идентификатор отслеживания. В данном примере мы его создали через переменную.
Рис. 449. Включить переопределение настроек в этом теге и добавить переменную отслеживания
Создание переменной {{code ua}}
Значение кода счетчика (идентификатора отслеживания) берем с «Google Analytics – Ресурс – Код отслеживания».
Рис. 450. Создание пользовательской переменной с кодом GA
10. Возвращаемся к настройкам тега. В качестве триггера активации выбираем ранее созданный триггер «обратный звонок» и сохраняем.
Рис. 451. Условие активации тега
11.Теперь переходим к созданию тега для отслеживания клика по кнопке в Яндекс.Метрика. Называем тег таким образом, что бы потом можно было его отличить от тега для GA. В качестве типа тега задаем «Пользовательский HTML».
Рис. 452. Создание пользовательского HTM-тега
В поле HTML укажем следующий код:
<script>yaCounter46519032.reachGoal(‘obratni_zvonok’);</script>
где:
● 46519032 – номер вашего счетчика в Яндекс.Метрика;
● obratni_zvonok – идентификатор цели, который в дальнейшем будет прописан в настройках цели в самой Яндекс.Метрика.
В качестве триггера указываем ранее созданный в п. 7 триггер «обратный звонок» и сохраняем. Один триггер будет активировать два тега. Поэтому нет необходимости создавать для каждого тега отдельный триггер.
Рис. 453. Условие активации тега «обратный звонок»
12.Теперь перейдем к настройке целей. Начнем с Яндекс.Метрика. Переходим в «Настройки – Цели».
Рис. 454. Настройки – Цели
Указываем название цели. «Тип условия» выбираем «JavaScript-событие». В качестве идентификатора цели задаем то значение, которое указали в предварительно созданном теге GTM для Яндекс.Метрика в п. 11. Сохраняем цель, нажав на кнопку «Добавить цель».
Рис. 455. JavaScript-событие
13. Создадим цель в Google Analytics:
● переходим в меню «Цели» на уровне «Представление»;
● нажимаем на кнопку «+Цель»;
● выбираем пункт «Собственная» и нажимаем «Далее»;
● указываем название цели, в качестве типа выбираем «Событие» и нажимаем «Далее»;
● в качестве условий берем те значения, которые указали в соответствующем теге (см. Рис. )
Рис. 456. Задаем категорию и действие в Google Analytics
Сохраняем. Теперь цель создана и будет фиксировать клики по кнопке «Обратный звонок». После проверки целей (сделать это можно с помощью отчетов «В режиме реального времени») необходимо опубликовать контейнер в GTM, чтобы все изменения были активированы для посетителей сайта.
Как задать ценность покупки для пикселя Facebook
Для отслеживания покупок на сайте (например, страница «Спасибо за заказ») в рекламной системе Facebook предусмотрено соответствующее стандартное событие:
Рис. 457. Код события «Покупка»
Необходимо, чтобы этот скрипт срабатывал после базового пикселя Facebook во время осуществления транзакции.
Рис. 458. Срабатывание события «Покупка» после базового пикселя
Переменная «currency» отвечает за то, в какой валюте осуществляется транзакция. Просто указываем наименование валюты согласно специального классификатора.
А вот как быть с переменной «value»? Ведь сумма покупки в отличии от валюты очень часто меняется. Эта переменная динамическая и должна соответствовать сумме покупке.
В этом примере мы расскажем как задать «value» в том случае, если у вас на сайте настроена электронная торговля Google Analytiсs и установлен код Google Tag Manager.
Допустим, у вас уже установлен на странице «Спасибо за заказ» код e-commerce, который передает данные в Google Analytics. В нашем случае он выглядит следующим образом:
Рис. 459. Код e-commerce
Теперь создадим специальную переменную в Google Tag Manager, которая будет принимать значение, указанное в переменной «revenue», в которую передается сумма заказа.
Переходим в GTM в раздел «Переменные» и нажимаем кнопку «Создать».
Рис. 460. Создание пользовательской переменной
Указываем название переменной и выбираем тип переменной «Переменная уровня данных». В качестве имени переменной указываем:
ecommerce.purchase.actionField.revenue
и сохраняем.
Рис. 461. Имя переменной уровня данных – ecommerce.purchase.actionField.revenue
Указанное имя переменной – это элемент массива, в котором находится сумма транзакции.
Рис. 462. ecommerce.purchase.actionField.revenue – элемент массива
Создаем тег, который будет отправлять данные о продажах в ваш аккаунт Facebook. Называем тег, и выбираем соответствующий тип тега «Пользовательский HTML». Вставляем наш стандартный пиксель. Но только еще дополнительно в качестве значения переменной указываем ранее созданную нами переменную {{сумма транзакции}}, вот в таком виде:
Рис. 463. Переменная {{сумма транзакции}} в событии транзакции Facebook
Так же задаем порядок активации тегов. Необходимо, чтобы пиксель транзакции срабатывал после базового пикселя. Ставим галочку «Активировать тег после тега Покупка ФБ».
Рис. 464. Активировать тег после тега Покупка ФБ
Выбираем нужный нам тег (Базовый пиксель ФБ) и ставим еще одну галочку:
Рис. 465. Не активировать тег «Базовый пиксель ФБ», если тег «Покупка ФБ»
приостановлен или не сработал
Затем задаем триггер и сохраняем. Нужно указать тот триггер, который активируется при срабатывании кода электронной торговли.
Рис. 466. Триггер активации gtm-e-commers (событие электронной торговли)
Примечание: событие gtm-e-commers было создано на этапе настройки электронной торговли и в данной статье его добавление в GTM опускается.
Теперь осталось опубликовать контейнер, чтобы данные о транзакциях начали собираться в Facebook.
Рис. 467. Публикация контейнера
В скором времени вы сможете видеть статистику по достигнутым транзакциям, а также сумма транзакций будет отображаться в вашем аккаунте.
Рис. 468. Статистика по сумме транзакций в аккаунте Facebook
Данная информация позволит оптимизировать ваши рекламные кампании. Вы будет знать насколько они эффективны в денежном эквиваленте.
Рис. 469. Покупки на сайте в аккаунте Facebook
Передача Client ID в Google Analytics через Google Tag Manager
В книге «Google Analytics для googлят: Практическое руководство по веб-аналитики. Издание 2» вы научились передавать данные уникального идентификатора клиента (Client ID) в Google Analytics в виде пользовательского параметра без GTM. В этой статье научимся передавать Client ID в GA через Google Tag Manager.
Но перед тем как это делать, давайте разберемся для чего идентификатор клиента вообще отслеживать и передавать.
Применение Client ID, в первую очередь, служит для более точной идентификации пользователей. Также следует отметить, что этот параметр является обязательным при передачи данных в Google Analytics через Measurement Protocol, данных об оплатах из CRM и т.д.
Практическое применение в отчетах Google Analytics:
Рис. 470. Отчет «Источники или канал»
Обычный отчет «Источники или канал». Конверсия по google / cpc составляет 4,31% (50 конверсий), в то время как средний показатель по всем сеансам 0,56% (77 конверсий).
У нас есть данные по Client ID. Добавим его в качестве дополнительного параметра и посмотрим еще раз на отчет:
Рис. 471. Отчет «Источники или канал» с дополнительным параметром Client ID
Мы видим, что один пользователь в течение определенного периода постоянно оставляет заявки. Это могут быть проделки конкурентов, ботский трафик, нецелевые заявки или же Client ID вашего менеджера, который заполняет формы на сайте вручную. Учитывая данный фактор, конверсия по этому источнику будет совершенно другая.
Настройка будет состоять из двух частей – в Google Analytics и Google Tag Manager.
В Google Analytics нужно создать пользовательский параметр. Для этого заходим в «Администратор» и на уровне «Ресурс» выбираем «Пользовательские определения» – «Пользовательские параметры» – «+Специальный Параметр».
Рис. 472. Создание пользовательского параметра в Google Analytics
Введите:
● название clientID
● область действия «Пользователь»
● активная «ОК»
Рис. 473. Настройки пользовательского параметра
На этом настройка в Google Analytics закончилась. Переходим в Google Tag Manager. Добавьте код счетчика GA в GTM. Для этого создаем одну переменную и один тег.
● Заходим в «Триггеры» – «Пользовательские переменные» – «Создать»;
● Называем переменную (в примере cod ua)
● Тип переменной – «Константа»
В значение прописываем код счетчика Google Analyticsи сохраняем настройки.
Рис. 474. Создание переменной-константы счетчика GA
Обычный отчет «Источники или канал». Конверсия по google / cpc составляет 4,31% (50 конверсий), в то время как средний показатель по всем сеансам 0,56% (77 конверсий).
У нас есть данные по Client ID. Добавим его в качестве дополнительного параметра и посмотрим еще раз на отчет:
Рис. 475. Отчет «Источники или канал» с дополнительным параметром Client ID
Мы видим, что один пользователь в течение определенного периода постоянно оставляет заявки. Это могут быть проделки конкурентов, ботский трафик, нецелевые заявки или же Client ID вашего менеджера, который заполняет формы на сайте вручную. Учитывая данный фактор, конверсия по этому источнику будет совершенно другая.
Настройка будет состоять из двух частей – в Google Analytics и Google Tag Manager.
В Google Analytics нужно создать пользовательский параметр. Для этого заходим в «Администратор» и на уровне «Ресурс» выбираем «Пользовательские определения» – «Пользовательские параметры» – «+Специальный Параметр».
Рис. 476. Создание пользовательского параметра в Google Analytics
Введите:
● название clientID
● область действия «Пользователь»
● активная «ОК»
Рис. 477. Настройки пользовательского параметра
На этом настройка в Google Analytics закончена. Переходим в Google Tag Manager. Добавьте код счетчика GA в GTM. Для этого создаем одну переменную и один тег.
● Заходим в «Триггеры» – «Пользовательские переменные» – «Создать»;
● Называем переменную (в примере cod ua)
● Тип переменной – «Константа»
В значение прописываем код счетчика Google Analyticsи сохраняем настройки.
Рис. 478. Создание переменной-константы счетчика GA
Затем добавляем тег типа «Universal Analytics». Для этого пройдите путь: Теги – Создать – Конфигурация тега (Редактировать) – Тип тега «Universal Analytics».
Настройки тега:
● Тип отслеживания (Просмотр страницы);
● Включить переопределение настроек в этом теге;
● В идентификатор отслеживания записываем переменную cod ua (создали выше);
● Триггер активации тега «All pages (Все страницы)».
Рис. 479. Настройки тега Universal Analytics
На следующем этапе необходимо настроить передачу Client ID в GTM, создав 2 переменные, 1 триггер и 1 тег.
Создаем переменную «GA Tracking Code». Последовательность действий:
● Переменные – Пользовательские переменные – Создать;
● Название – GA Tracking Code;
● Конфигурация переменной – Редактировать;
● Тип переменной – Константа;
● Значение – Выбираем переменную cod ua.
Рис. 480. Переменная типа «Константа»
Создаем переменную «Get Client ID for current Tracker». Последовательность действий:
● Переменные – Пользовательские переменные – Создать;
● Название – Get Client ID for current Tracker;
● Конфигурация переменной – Редактировать;
● Тип переменной – Собственный код JavaScript;
● Значение – Код.
Рис. 481. Собственный код JavaScript
Пример кода JavaScript:
function() {
try {
var trackers = ga.getAll();
var i, len; for (i = 0, len = trackers.length; i < len; i += 1) {
if (trackers[i].get('trackingId') {{GA Tracking Code}}) {
return trackers[i].get('clientId'); }}
} catch(e) {}
return 'false';
}
В результаты мы создали две пользовательские переменные – GA Tracking Code и Get Client ID for current Tracker. Переходим к созданию триггера.
● Триггеры – Создать;
● Название – Window Loaded Trigger;
● Тип триггера – Окно загружено;
● Триггер активируется на следующих страницах – Некоторые события «Окно загружено».
Рис. 482. Настройки триггера
Теперь создаем тег Cid. Последовательность действий:
● Теги – создать – Конфигурация (Редактировать);
● Тип тега – Universal Analytics;
Внимательно прописываем настройки:
● Тип отслеживания – Событие;
● Категория – clientid;
● Действие – отправлен;
● Не взаимодействие – True.
Рис. 483. Настройки тега
Еще настройки тега Universal Analytics:
● Выбираем «Включить переопределение настроек в этом теге»;
● Идентификатор отслеживания – cod ua;
● Дополнительные настройки – Специальные параметры – +Специальный параметр – Индекс: 1 и Значение: Get Client ID for current Tracker (переменная, которую мы создали выше).
Важно: индекс 1 – это индекс параметра, который мы создали в Google Analytics.
Рис. 484. Прописываем специальный параметр в теге Universal Analytics
В качестве активации тега выбираем триггер активации, ранее созданный «Window Loaded Trigger».
Рис. 485. Триггер активации Window Loaded Trigger
Перед тем, как опубликовать изменения, нужно проверить будет ли срабатывать тег. Переходим в режиме предварительного просмотра (режим отладки), заходим на сайт, где установлен GTM, обновляем страницу и проверяем тег:
Рис. 486. Тег cid активировался
Переходим внутрь тега и видим:
Рис. 487. Проверка передачи данных специального параметра в режиме отладки
Также можно проверить в панели для разработчиков, установив расширение GA Debugger.
Рис. 488. Расширение GA Debugger
Если все корректно передается, публикуем контейнер GTM. Нажимаем «Отправить», вводим название и описание версии, затем «Опубликовать».
Теперь CID (Client ID) вы можете увидеть в дополнительных параметрах Google Analytics или построив специальный (кастомный) отчет.
Рис. 489. clientid как дополнительный параметр в Google Analytics
Передача ошибок JavaScript сайта в Google Analytics через Google Tag Manager
Эта статья подойдет для тех, кто не сильно разбирается в JavaScript, но хочет, чтобы сайт работал на все 100% без ошибок. С помощью Google Tag Manager мы сможем настроить передачу данных об ошибках JS, которые есть на сайте, в Google Analytics. В результате вы получите пользовательский отчет с JavaScript ошибками, который можете переслать веб-разработчику для последующих исправлений.
Примечание: хотелось бы отметить, что GTM фиксирует не все ошибки JS на сайте. Но это лучше, чем ничего. При том, что настройка занимает около 10 минут.
В Google Tag Manager нам нужно активировать некоторые переменные, создать триггер и тег, а в Google Analytics настроить пользовательский отчет.
Переходим к настройкам в GTM. Активируем встроенные переменные:
● Error Message – Название ошибки JS;
● Error URL – url страницы, где была допущена ошибка;
● Error Line – номер строки, в которой была допущена ошибка.
Рис. 490. Активируем встроенные переменные типа «Ошибки»
Примечание: не обращаем внимание на пропущенную в названиях триггера и тега букву «r» в слове «error».
Создаем триггер:
● Название – erros js;
● Тип триггера – Ошибка JavaScript;
● Триггер активируется на следующих страницах – Все ошибки JavaScript
Рис. 491. Настройки триггера erros js
Создаем тег:
● Название – Erros JS;
● Тип тега – Universal Analytics;
● Тип отслеживания – Событие;
● Категория – Errors js;
● Действие – Выбираем встроенную переменную {{Error Message}};
● Ярлык – Выбираем сразу две переменные: {{Error Url}} и в скобках сразу же прописываем {{Error Line}}. Именно через ярлык события в Google Analytics будет передаваться переменная url-страницы, а в скобках номер строки с ошибкой;
● Не взаимодействие – True;
● Включаем переопределение настроек в этом теге;
● Идентификатор отслеживания – cod ua (создаем пользовательскую переменную типа «Константа» с идентификатором отслеживания Google Analytics).
Рис. 492. Идентификатор отслеживания GA в переменной «Константа»
Триггер активации тега – erros js (который мы предварительно создали). Итоговые настройки тега выглядят следующим образом:
Рис. 493. Настройки тега Universal Analytics
Отправляем контейнер GTM на публикацию. Затем переходим в Google Analytics, чтобы настроить пользовательский отчет. Последовательность действий:
● Переходим в «Специальные отчеты – Мои отчеты»;
● Тип – Простая таблица;
● Параметры – Категория событий, Действие по событию, Ярлык события;
● Показатели – Всего событий, Уникальные события;
● Фильтр – Категория событий – точное соответствие – Errors js
Рис. 494. Специальный отчет в Google Analytics
В результате возникновения ошибок на сайте данные в пользовательский отчет Google Analytics начнут поступать. В отчете мы видим: название ошибки, url-страницы с ошибкой и номер строки кода на странице (в скобках). Можно выгрузить этот файл в Excel и отправить на обработку.
Рис. 495. Пример отчета Google Analytics с зафиксированными ошибками на сайте
Настройка междоменного отслеживания через Google Tag Manager
Иногда бывает, что мы рекламируем один сайт (к примеру, домен site.ru), на который пользователи переходят по рекламе, а затем идут на второй наш сайт (к примеру, домен anothersite.com) и совершают конверсию.
В результате при стандартных настройках Google Analytics будет зафиксировано два сеанса:
● один на site.ru;
● второй на сайте anothersite.com.
Также конверсия будет закреплена по источнику site.ru / referral, и все основные показатели будут некорректными. По такой статистике нельзя сделать никаких выводов и предпринимать действий.
Чтобы данные отображались правильно, нам нужно настроить междоменное отслеживание.
Междоменное отслеживание – функция, позволяющая регистрировать посещение нескольких сайтов в Google Analytics как один сеанс. То есть при переходе с siteA.ru на siteB.ru будет регистрироваться один пользователь и одна сессия.
Переходим к настройке в GTM. Создаем пользовательскую переменную:
● Название – Cross domain settings (произвольное название);
● Тип переменной – Настройки Google Analytics;
● Идентификатор отслеживания: UA– ХХХХХХ-Х (из Google Analytics);
● Домен cookie – auto;
Дополнительные настройки – Поля, которые необходимо задать:
● Название поля – allowLinker, Значение – true;
Междоменное отслеживание:
● Автоматическое связывание доменов – siteA.ru, siteB.ru (вводим домены через запятую, которые хотим отслеживать).
Необязательно:
● Использовать решетку в качестве разделителя – Верно, если вы добавляете Client ID через параметр;
● Изменение внешнего вида форм – Верно, если есть форма, при отправке которой пользователя перебрасывает на второй сайт.
Рис. 496. Настройки переменной «Настройки Google Analytics»
Создаем тег. Если у вас настроен тег об отправке данных в Google Analytics, вам нужно изменить его конфигурацию. Если нет – создать новый.
● Название тега – Universal Analytics;
● Тип тега – Universal Analytics;
● Настройки Google Analytics – выбираем переменную {{Cross domain settings}};
● Триггер активации – «All Pages (Все страницы)».
Рис. 497. Настройки тега Universal Analytics
На следующем шаге переходим в Google Analytics и исключаем реффералов. Если этого не сделать, в отчетах GA 1 пользователь при переходе с сайта на сайт будет фиксироваться как два сеанса, а нам нужно 1 пользователь – 1 сеанс.
● «Ресурс – Отслеживание – Список исключаемых источников перехода»
● Исключаем два домена, между которыми мы будем настраивать междоменное отслеживание;
Рис. 498. Список исключаемых источников перехода
Осуществляем проверку. При переходе с одного домена на второй вы должны увидеть передачу Client ID.
Рис. 499. Параметр связывания
Междоменное отслеживание выполняется путем передачи уникального идентификатора клиента между исходным и целевым доменом. Эта процедура выполняется в два этапа:
● В исходном домене проверяется наличие идентификатора клиента во всех URL, указывающих на целевой домен.
● В целевом домене проверяется наличие идентификатора клиента в URL, по которому перешел пользователь.
Плагин для связывания реализует этот механизм путем добавления параметра связывания в URL-адреса, указывающие на целевой домен. Этот параметр содержит идентификатор клиента, а также закодированные текущую временную метку и метаданные браузера, которые позволяют избежать проблем с передачей URL между пользователями.
Именно значение true в параметре allowLinker осуществляет проверку параметров связывания.
Для анализа данных в интерфейсе Google Analytics по страницам с названиями доменов нужно создать отдельное представление с фильтром.
Создаем представление. Добавляем фильтр через «Фильтры – Добавить фильтр».
● Название фильтра – Любое;
● Тип фильтра – Пользовательский и Расширенный;
● Поле A -> Извлечь A – Имя хоста (.*). Извлекаем название домена, имя хоста равно регулярному выражению);
● Поле B – > Извлечь B – URl запроса (.*). Извлекаем url-запроса, url-запроса равно регулярному выражению);
● Вывод – > Конструктор – URl запроса ($A1$B1). Делаем склейку поля A и поля B, $ – метасимвол регулярного выражения.
Ставим галочки напротив строк:
● Поле A обязательное для заполнения
● Перезаписать поле вывода
Сохраняем фильтр.
Рис. 500. Настройки фильтра Google Analytics
В результате мы сможем видеть статистику по страницам с названием домена.
Рис. 501. Отчет Google Analytics по страницам
Отслеживание прокрутки страниц
Настройка отслеживания прокрутки страниц даст вам информацию о том, как пользователи просматривают ваш контент. Настроить данное отслеживание через Google Tag Manager не составит трудностей.
Переходим к настройке GTM. Активируем встроенные переменные Scroll Depth Threshold, Scroll Depth Units и Scroll Directions.
Рис. 502. Активация встроенных переменных типа «Прокрутка»
● Scroll Depth Threshold – значения порога, который был пересечен (в зависимости от настроек будет либо в процентах, либо в пикселях);
● Scroll Depth Units – переменная покажет пиксели (pixels) или процент (percent), в зависимости от настроек триггера;
● Scroll Directions – переменная покажет вертикально (vertical) или горизонтально (horizontal), в зависимости от настроек триггера. Вертикальный скролл действует только вниз, а горизонтальный только вправо.
На примере мы будем отслеживать вертикальную прокрутку по пикселям на страницах блога. Создаем триггер:
● Название – scroll blog;
● Тип триггера – Глубина прокрутки;
● Выбираем «Глубина вертикальной прокрутки»;
● Проценты 25,50,75,100 (числа через запятую);
● Условие активации триггера (будем активировать его на страницах блога согласно заданию выше).
Рис. 503. Настройки триггера
Создаем тег:
● Название – ga – scroll – blog;
● Тип тега – Universal Analytics;
● Тип отслеживания – Событие;
● Категория – scroll blog (название может быть другим);
● Действие – Переменная {{Page Path}} (часть url-страницы);
● Ярлык – Переменная {{Scroll Depth Threshold}}, которую мы активировали и «%» (что бы в отчетах Google Analytics мы видели значение и %, например 25%);
● Не взаимодействие – True.
Рис. 504. Настройки тега
● Идентификатор отслеживания – Прописываем код счетчика Google Analytics;
В данном примере код счетчика записан через переменную cod ua. Пример настройки переменной идентификатора GA:
Рис. 505. Переменная GA типа «Константа»
● Триггер активации – scroll – blog (триггер, который мы создали выше)
Сохраняем тег.
Рис. 506. Конечные настройки тега ga – scroll – blog
Проверяем данные через режим предварительного просмотра.
Рис. 507. Передача данных о глубине прокрутки в режиме отладки
Просматриваем переменные:
Рис. 508. Переменные
Если все передается корректно, не забудьте опубликовать контейнер GTM с изменениями.
Следует отметить, что если вы находитесь в самом низу страницы (100%) и обновите страницу, то триггер сработает для всех значений, которые вы настроили (25%, 50%, 75%,100%). Аналогично Google Tag Manager будет работать с якорными ссылками.
Данные о прокрутке страниц в Google Analytics доступны в отчете «Лучшие события», который находится в разделе «Поведение».
Рис. 509. Категория событий scroll blog
Категория scroll blog соответствует названию, которое мы прописали в теге.
Переходим на вкладку «Действия событий». В GTM мы прописывали часть url-страницы Page Path.
Рис. 510. Действия по событию – Page Path
Выбираем нужную нам страницу (кликаем по ней) и смотрим настроенный процент просмотров.
Рис. 511. Ярлык события – Процент скроллинга
Отслеживание глубины скроллинга в GTM с привязкой к автору статьи и категории в блоге
Немного усложним задачу. Теперь необходимо настроить передачу данных в Google Analytics и получить срез по каждой из статей в блоге по показателям (просмотры страниц, показатель отказов, средняя длительность просмотра страницы и % скроллинга), а также с учетом автора и категории публикации.
% скроллинга (глубина прокрутки, глубина пролистывания) страницы – это значение, которое показывает вовлеченность пользователя в контент. Если оно низкое, значит посетителю не интересен данный материал, и он просто покидает страницу, даже не пролистнув ее вниз.
Итоговый отчет должен был выглядеть примерно так:
Рис. 512. Пример того, как это должно выглядеть на выходе
Используя дополнительный параметр, можно посмотреть статистику, например, по статьям конкретного автора и посадочной странице. Также помимо основной категории, на сайте присутствовал второй уровень вложенности, а именно категории делились еще на подкатегории. Например, «Новости» на «Медиа», «Маркетинг», «Поисковые системы» и «Сервисы».
Рис. 513. Категории и Подкатегории на сайте
Приняли решение реализовать данную задачу через Google Tag Manager, поскольку это позволяло избежать обращений к разработчикам и необходимость вносить дополнительный код на сайт.
Что мы делаем?
● создаем 3 специальных параметра в Google Analytics – «author», «category» и «subcategory name» с областью действия «Hit»;
Запоминаем индексы параметров – 1,2 и 3. Они нам пригодятся при создании тега в GTM.
Рис. 514. Специальные параметры: author, category name, subcategory name
● создаем 2 пользовательских показателя в Google Analytics – «scrolling» и «timing» с областью действия «Hit» для отслеживания количества скроллов и времени пребывания;
Рис. 515. Специальные показатели в Google Analytics: timing, scrolling
Запоминаем индексы показателей – 1 и 2. Они нам пригодятся при создании тега в GTM.
● создаем 3 пользовательских переменных в Google Tag Manager типа «Элемент DOM»
Метод выбора: CSS селектор
Селектор элементов: брался путем копирования значения через консоль разработчика (клавиша F12 в Google Chrome)
Рис. 516. Копирование CSS селектора элемента Author
Таким образом, три вышеописанные переменные имели одинаковые настройки, но разные селекторы элементов. Пример с переменной «author»:
Рис. 517. Переменная author в Google Tag Manager
Однако не все было так просто с «category» и «sub category». Копировав CSS-selector, мы убедились, что он одинаковый как для категории внутри статьи, так и для самой категории.
body > nav.page__breadcrumbs.breadcrumbs > span
Очень редко, но иногда приходится делать свои селекторы. В данном случае нам помог псевдокласс nth-child, который позволяет отследить определенный элемент списка из хлебных крошек. Например, :nth-child(3) позволяет отследить третий элемент.
Таким образом, мы для двух категорий задаем общий CSS-селектор, с единственным отличием nth-child.
● для «category» .breadcrumbs .breadcrumbs__link:nth-child(2),
● для «sub category» .breadcrumbs .breadcrumbs__link:nth-child(3)
И получаем на выходе три переменные типа «Элемент DOM».
Рис. 518. Три переменные в GTM типа «Элемент DOM»
● создаем 4 переменных уровня данных для передачи событий, категорий, отслеживания времени пребывания и скроллинга
Рис. 519. Четыре переменных в GTM типа «Переменная уровня данных»
1. eventCategory: Имя переменной уровня данных – eventCategory (Версия 2)
2. eventAction: Имя переменной уровня данных – eventAction (Версия 2)
3. timing: Имя переменной уровня данных – time_on_page (Версия 2)
4. scrolling: Имя переменной уровня данных – percent_of_scrolling (Версия 2)
Далее создаются 2 триггера:
● 1 (autoEvent) с типом «Пользовательское событие» и условием активации «Все специальные события»;
● 2 (DOM Ready) с типом «Модель DOM готова» и условием активации «Все события».
Рис. 520. Два триггера в GTM
Затем переходим к тегам и окончательно связываем наши триггеры и переменные.
Создаем новый тег autoEvent UA для передачи данных в GA с типом конфигурации Universal Analytics и добавляем в него созданные раннее переменные. Индексы специальных параметров и показателей берем из Google Analytics (см. выше).
Триггер активации – autoEvent. Получаем такую конфигурацию:
Рис. 521. Конфигурация тега autoEvent UA
Теперь осталось добавить тег scroll tag на определение глубины скроллинга. Для этого я воспользовался скриптом от Анастасии Тимошенко из агентства интернет-маркетинга OdesSeo. Подробнее о том, что это за скрипт и как он работает, читайте здесь.
Тип тега – «Пользовательский HTML». Триггер активации – DOM Ready.
Рис. 522. Тег scroll tag, скрипт Анастасии Тимошенко (OdesSeo)
В общей сложности, в контейнере GTM получилось 4 тега (2 для решения задачи, 2 – коды счетчиков Google Analytics и Яндекс.Метрика)
Рис. 523. Теги в Google Tag Manager
Также нужно переопределить триггер для «Код счетчика Universal Analytics». Раньше там был триггер активации – All Pages, а теперь DOM Ready.
Схематично работу по созданию тегов, триггеров и переменных в Google Tag Manager можно представить так:
Рис. 524. Схема реализации
В Google Analytics осталось создать вычисляемый показатель, который позволит отслеживать среднюю глубину скроллинга по каждому материалу в %. Формула его такая:
Avg. Scrolling Per. = ( {{scrolling}} / 100 ) / {{Просмотры страниц}}
, где scrolling – количество прокруток на странице, а просмотры страниц – общее количество страниц, просмотренных посетителями. Учитываются повторные просмотры одной страницы. Размерность – проценты.
Все, что теперь осталось, это создать кастомный отчет в Google Analytics с нужными параметрами и показателями.
Рис. 525. Специальный отчет в Google Analytics
Отслеживание YouTube видео в Google Analytics c помощью GTM
Одним из возможных вариантов увеличения конверсии сайта является видео. Но прежде, чем заказать эффектное видео, с разными спецэффектами, неплохо было бы знать сколько пользователей его вообще просмотрели.
Не секрет, что в разных нишах конверсия будет разной. Как вариант, можно загрузить пробное видео на сайт и настроить отслеживание YouYube видео в Google Analytics через Google Tag Manager. Настроить отслеживания довольно просто, так как в GTM есть для этого специальный триггер.
Активируем встроенные переменные для отслеживания триггеров.
Рис. 526. Переменные типа «Видео»
● Video Provider – название площадки (YouTube);
● Video Status – статус видео. Может быть: Start, Complete, Pause, Seek (промотка), Buffering, Progress;
● Video URL – url-видео на площадке, пример https://www.youtube.com/watch?v=…
● Video Title – название видео;
● Video Duration – длина видео в секундах;
● Video Current Time – время в секундах, когда сработало событие;
● Video Percent – процент, когда происходит событие;
● Video Visible – может быть true или false, в зависимости от того видит ли пользователь видео, когда срабатывает событие или нет.
Создаем триггер. В GTM для отслеживания видео с YouTube есть специально встроенный триггер.
● Название – Youtube video event (название может быть любым);
● Тип триггера – Видео YouTube;
● Выбираем, что будет регистрироваться – Начало, Завершение, Приостановка, Перемотка, Буферизация;
● Ход просмотра – можно выбрать в процентах (прописываем через запятую) или по времени (в секундах);
Дополнительно:
● Включить поддержку JavaScript API для всех видео Youtube
● Условие активации триггера – В примере данный триггер будет срабатывать на всех видео.
Рис. 527. Настройки триггера
Посмотреть работу триггера и значение переменных можно через режим предварительного просмотра GTM.
Рис. 528. Отслеживание события gtm.video
Общая переменная (таблица поиска)
Для того чтобы передавать как можно большее количество информации в Google Analytics одним тегом, нужно создать переменную таблицы поиска для переменной Video Status, которую мы предварительно активировали. Последовательность действий:
● Создаем пользовательскую переменную «Таблица поиска»;
● Название: Video Status – таблица поиска (произвольное название);
● Тип переменной – Таблица поиска;
● Входная переменная – Video Status;
Входные данные. Прописываем значение переменной «Video Status» (см. выше). В поле результат прописываем: как мы их хотим назвать (произвольное название)
Пример заполнения:
● start – начал просмотр;
● pause – пауза;
● buffering – буфер;
● progress – просмотр – {{Video Percent}}%;
● seek – промотка;
● сomplete – просмотр до конца;
Примечание: при значении progress рекомендуем прописать название (пример «просмотр») – переменную процентов просмотра {{Video Percent}} и значок %.
По умолчанию выставляем переменную {{Video Status}}.
Рис. 529. Настройка переменной типа «Таблица поиска»
Проверим работу переменной через режим предварительного просмотра.
Рис. 530. Проверка переменной «Таблица поиска» в режиме отладки
На следующем шаге создаем тег.
● Название тега – ga – Youtube video;
● Тип тега – Universal Analytics;
● Категория – Youtube video (произвольное название);
● Действие – Переменная Video Status – таблица поиска, которую мы предварительно создали);
● Ярлык – Как пример, можно вставить две переменные {{Video Title}} и {{Video URL}};
● Включаем переопределение настроек в этом теге;
Можно прописать код счетчика через переменную. Для этого ее нужно создать, в примере название cod ua, или вставить код напрямую.
Рис. 531. Переменная типа «Константа» с идентификатором отслеживания GA
Триггером активации тега, является триггер видео, который мы предварительно создали.
Рис. 532. Настройки тега ga – Youtube video
Перед публикацией тега проверяем корректность его срабатывания через режим предварительного просмотра.
Рис. 533. Срабатывание тега
Данные о событиях с видео в Google Analytics доступны в отчете «Лучшие события», который находится в разделе «Поведение».
Категория – Youtube video (соответствует названию, которое мы прописали в теге)
Рис. 534. Отчет «Лучшие события»
Переходим на вкладку «Действие по событию». В GTM мы прописывали переменную «Video Status – таблица поиска».
Рис. 535. Действие по событию
В ярлыке событий вы увидите название видео и url-адрес. Это значения переменных, которые мы прописали в ярлыке событий тега в Google Tag Manager.
Рис. 536. Ярлык события
Подмена контента на сайте с помощью GTM
Подмену контента на сайте (заголовка, подзаголовка, телефона, акции, метро и т.д.) в зависимости от условия в параметре URL (источника, рекламного объявления, запроса, гео и т.д.) можно осуществлять различными способами. Например, на базе .php (если знакомы с этим языком или есть разработчик) или с помощью сторонних сервисов, таких как YAGLA, Adfor и другие (если есть лишние $). В этом материале мы разберем бесплатный способ подмены заголовка на сайте с помощью Google Tag Manager.
Пример. На сайте на первом экране есть заголовок:
Рис. 537. «Получите СРО «под ключ» за 1 день! Работаем по всей России!»
Нам необходимо изменять этот заголовок в зависимости от параметра URL. В качестве параметра возьмем метку utm_content (можно взять любую другую, хоть нестандартную, например, m_change), в которую будем помещать значения других заголовков. Чтобы проще и быстрее реализовать задуманное, лучше всего подготовить заранее отдельную таблицу с метками и их значениями. Вот как это может выглядеть в Excel:
Рис. 538. Пример подмены заголовков в таблице Excel
Например, вы сделали пост в социальной сети или разметили рекламные кампании, разбили свой товар или услугу на категории (мебель -> один заголовок, кухни -> другой заголовок и т.д.). При переходе по одной из ссылок (столбец «Конечный URL») пользователь будет видеть подмененный заголовок (из столбца «Заголовок на сайте»).
Ссылка обязательна должна содержать параметр запроса, иначе подмена не произойдет. Давайте перейдем к настройке в GTM. Последовательность действий:
● Создаем пользовательскую переменную типа «URL»;
● Название – paramURL (любое произвольное);
● Тип компонента – Запрос;
● Ключ запроса – utm_content (тот, который вы определили для себя, может быть другим);
Сохраняем.
Рис. 539. Пользовательская переменная типа «URL»
Далее создаем еще одну пользовательскую переменную «Таблица поиска» из типа «Утилиты».
● Название – podmeniZag (может быть любым);
● Входная переменная – {{paramURL}} (та, которую создали на шаге выше);
● Таблица поиска – в каждую из строк в поле «Входные данные» вводим атрибут ключа запроса utm_content (см. таблицу выше), а в поле «Результат» вводим значение параметра utm_content, то есть наши подмененные заголовки;
● Установить значение по умолчанию (галочка) – добавляем исходный заголовок.
Сохраняем переменную.
Рис. 540. Переменная «Таблица поиска» с нашими значениями
После этого создаем триггер типа «Просмотр страницы», который будет активироваться только тогда, когда значение переменной utm_content определено. В противном случае если в ссылке нет параметра запроса, и оно принимает значение «undefined» (не определено), то контент подменяться не будет, и тег не сработает.
● Название – undefined (может быть любым);
● Тип триггера – Просмотр страницы;
● Условие активации триггера – Некоторые просмотры страниц;
Активация триггера при наступлении события и выполнения всех этих условий: paramURL не равно undefined.
Рис. 541. paramURL не равно undefined
Сохраняем триггер.
Теперь нам осталось создать тег, который будет срабатывать при заданном условии активации триггера и подменять контент на сайте с помощью специального скрипта на значение табличной переменной.
● Создаем пользовательский HTML-тег;
● Название – Tag – podmenaZag (может быть любым);
● HTML
Рис. 542. Пользовательский HTML-тег
Что же добавлять в текстовое поле? Какой фрагмент кода? Перед реализацией этого шага необходимо определить атрибуты заголовка, на основании которого мы можем производить изменения. Именно от этого будет зависеть реализация пользовательского HTML в Google Tag Manager.
Поясним на конкретном примере. Переходим на наш сайт и открываем консоль разработчика, чтобы посмотреть фрагмент кода нашего заголовка.
Рис. 543. Фрагмент кода заголовка в консоли разработчика
Если бы у данного заголовка h1 был атрибут id со значением, например, zagolovok (может быть другим), то фрагмент кода, который нужно вставить тег, выглядел так:
Рис. 544. Фрагмент JS-кода в случае, если бы у нас был атрибут id
В данном случае конструкция document.getElementById(“zagolovok”).innerHTML=”{{podmeniZag}}”; изменяет содержимое HTML-элемента h1 с id = zagolovok на новое из переменной podmeniZag (нашей таблицы поиска).
Но у нас нет атрибута id, а есть class. Тогда необходимо использовать другую конструкцию для подмены. Вот пример реализации:
Рис. 545. Фрагмент кода реализации через class
Сначала мы объявляем переменную x, которой присваиваем значение всех элементов, которые имеют заданные имена классов. Сам метод getElementsByClassName () возвращает коллекцию дочерних элементов элемента с указанным именем класса.
В данном случае класс b-promo__content__title.title-border – это атрибут заголовка h1 в нашем примере (см. выше на скриншот). К узлам можно обращаться по номерам индексов. Индекс начинается с 0, поэтому в нашем примере x[0], то есть у 1 дочернего элемента изменяем HTML, подставляя пользовательскую переменную podmeniZag таблицы поиска.
Есть еще проще вариант. Использовать библиотеку jQuery. Тогда конструкция будет иметь вид:
Рис. 546. Используем jQuery и функцию .html()
Функция .html (newHTML) в jQuery заменяет содержимое всех выбранных элементов на newHTML. В нашем примере она заменяет содержимое значение заголовка на переменную podmeniZag, которая содержит значения в таблице поиска.
Есть и такой вариант. Использовать метод querySelector(). Он возвращает первый элемент, который соответствует указанному CSS-селектору в документе.
Рис. 547. Метод querySelector()
В теге мы выбираем условие активации триггера undefined и сохраняем тег.
Рис. 548. Условие активации тега – undefined
Проверяем корректность работы в режиме предварительного просмотра.
Рис. 549. Тег не сработал, переменной utm_content нет
Если мы переходим без метки в адресной строке, то тег не активируется и заголовок не подменяется. Все правильно. Давайте добавим к нашему url метку utm_content=zag3.
Рис. 550. Заголовок 3: Получите СРО «под ключ» за 666 дней! Работаем по всей России!
Тег сработал
Тег с меткой сработал, значение заголовка поменялось. Убедимся еще один раз. Теперь введем utm_content=zag4.
Рис. 551. Заголовок 4: Никогда не получите СРО! Мы не работаем в принципе! Тег сработал
Все работает корректно. Публикуем контейнер GTM и радуемся подменам.
С помощью GTM вы можете настраивать правила, при котором на сайте будут подменяться не только заголовки, но и подзаголовки, номера телефонов в зависимости от источника переходов, изображения и многое другое.
Однако все же лучший способ реализации динамического контента на сайте – это серверная сторона (через тот же .php), а не браузерная, поскольку различные манипуляции с DOM могут привести к замедлению загрузки страницы у пользователя, да так, что он увидит эту подмену на сайте.
Допустимо использование такого приема в небольшом проекте (лендинге, несколько страничном сайте) и на малом объеме трафика (до 50–100 посетителей в день). Но если ежедневное количество пользователей гораздо больше, на сайте много заголовков и подмен, то рекомендуется реализовать все это через backend.