Интерфейс
В процессе знакомства с любым новым для себя продуктом у пользователей часто возникает проблема привыкания к самому сервису, программе или ее отдельным функциям. Будь-то это совершенно новый интерфейс Google AdWords, обновленный Google Analytics , или Google Tag Manager версии 2.
Вот так выглядит страница контейнера GTM одного из аккаунтов:
Рис. 119. Интерфейс Google Tag Manager
1. На главную страницу
При клике на данную стрелочку вы попадете на страницу tagmanager.google.com/#/home, где будут отображены все доступные вам контейнеры GTM.
Рис. 120. Список аккаунтов и контейнеров GTM
На главной странице возможно создание нового аккаунта, фильтра по .текущим, а также доступны общие настройки по каждому конкретному контейнеру. Фильтр доступен как по названию контейнера, так и по его идентификатору. То есть когда вы начнете вводить последовательность букв/цифр, Google Tag Manager сразу же выдаст соответствующий результат.
Рис. 121. Поиск по идентификатору контейнера
На главной странице в самом низу располагаются удаленные аккаунты и контейнеры. Чтобы удалить аккаунт или контейнер, необходимо обладать соответствующими правами.
Рис. 122. Удаленные аккаунты и контейнеры в Google Tag Manager
При удалении аккаунта через «Администрирование» в GTM он будет перемещен в корзину и окончательно удален через 30 дней. Вместе ним будут удалены все контейнеры, включая все теги, триггеры и переменные. Теги из этого контейнера больше не будут активироваться при посещении вашего сайта пользователями. При удалении контейнера он также будет перемещен в корзину и окончательно удален через 30 дней.
Рис. 123. Корзина
По клику на контейнер мы можем узнать точную дату удаления. По прошествии 30 дней данного контейнера в корзине уже не будет, также, как и возможности его восстановления. Если же нам понадобиться восстановить элемент из корзины, мы должны:
● выбрать его из списка;
● в открывшемся окне нажать кнопку «Восстановить».
Рис. 124. Сведения об удаленном аккаунте GTM
Еще нам будет доступна возможность экспорта контейнера и информация о пользователях, у которых есть разрешение на восстановление, а также электронная почта того человека, кто совершил операцию удаления (поле «Кем удалено»).
2. Портал Google Analytics Suite
В одном меню Google объединил все свои продукты, и теперь доступ к ним стал возможен через одну панель. Если вы захотите перейти в Google Analytics, Google Data Studio (Центр данных) или любой другой продукт, который привязан к данному аккаунту Google, просто нажмите на соответствующий значок на панели «Все аккаунты».
Рис. 125. Google Analytics Suite
3. Дополнительные настройки
Меню состоит из пользовательских настроек, отзывов и справки Google.
Рис. 126. Дополнительные настройки
В пользовательских настройках содержится информация по вашему роду деятельности (агентство, маркетолог, веб-разработчик), языку интерфейса Google Tag Manager и уведомлениях, связанных с новостями, анонсами новых функций, тестированию и различными предложениями от Google.
Рис. 127. Данные аккаунта
В разделе «Оставить отзывы» вы можете описать проблему работы с GTM или поделиться мнением с командой Google об этом инструменте. Справка позволяет получить ответы на интересующие вас вопросы. Просто введите необходимые ключевые слова и ознакомьтесь с результатами поиска.
Рис. 128. Справка Google
4. Аккаунты
Можно быстро переключаться между аккаунтами при условии, что вы залогинены в несколько из них.
Рис. 129. Несколько аккаунтов Google
5. Горизонтальное навигационное меню
Рис. 130. Рабочая область – Версии – Администрирование
Позволяет быстро переключаться между рабочими областями, версиями и панелью администрирования аккаунта и контейнера.
По умолчанию активна первая вкладка «Рабочая область» (пространство для работы с изменениями в диспетчере тегов), но в любой момент можно перейти на «Версии» (сохраненная копия контейнера в данный момент времени) или «Администрирование».
Рис. 131. Версии
На вкладке «Администрирование» можно управлять доступами, изменять настройки, на уровне аккаунта и контейнера, импортировать-экспортировать контейнеры, работать со средами и др.
Рис. 132. Администрирование
6. Идентификатор контейнера GTM
При клике на ID контейнера Google Tag Manager откроется окно с кодом, часть которого необходимо вставить в раздел
кода страницы как можно ближе к началу, а часть после открывающего тега при условии, что вы этого не сделали ранее. Тот же самый код вы видели на этапе регистрации в GTM и установки контейнера.
Рис. 133. Фрагменты кода Google Tag Manager
7. Изменения в рабочей области
Рис. 134. Изменения в рабочей области
Счетчик отображает количество внесенных изменений в текущей рабочей области. Например, вы создали новую переменную. Изменений в рабочей области станет 1. Добавили новый триггер. Значение изменится на 2. Еще два триггера? Тогда изменений в рабочей области будет 4. Создали тег? Google Tag Manager зафиксирует еще одно изменение в рабочей области и т.д. Счетчик обнуляется после публикации версии.
8. Предварительный просмотр
Рис. 135. Предварительный просмотр
Режим предварительного просмотра в GTM позволяет проверить работоспособность сайта с действующим контейнером. При каждом изменении конфигурации, корректировки настроек тегов, триггеров или переменных, рекомендуется проверять себя через отладку контейнера. Благодаря предварительному просмотру вы сможете избежать многих ошибок в процессе работы и узнать, какие теги активируются и в каком порядке.
Если включить режим предварительного просмотра, то на обзорной странице рабочей области вы увидите оранжевый баннер с оповещением (на изображении выше), а на сайте станет доступна панель отладки. Она будет видна только в том браузере, в котором был включен этот режим, но вы можете предоставить доступ другим пользователям.
Рис. 136. Нижняя панель отладки
Сделать это можно с помощью опции «Поделиться ссылкой для просмотра». Режим предварительного просмотра доступен пользователям с соответствующими правами.
9. Публикация контейнера
Рис. 137. Публикация контейнера
Чтобы добавить на сайт контейнер GTM впервые или отредактированную версию, его необходимо опубликовать. Сделать это можно через последовательность шагов по кнопке «Отправить» – «Публикация». Опубликовать контейнер могут пользователи с соответствующими правами доступа в одну из указанных сред.
10. Выбор рабочей области
Рабочая область в Google Tag Manager – это пространство для работы с изменениями в диспетчере тегов. Их можно сравнить с представлениями в Google Analytics.
По умолчанию, после создании контейнера GTM добавляется рабочая область с названием «Default Workspace». В соответствующем меню можно выбрать одну из доступных рабочих областей, либо же создать новую через «+» и добавить (по желанию) описание.
Рис. 138. Рабочие области
При выборе рабочей области доступен поиск по названию.
11. Поиск
Рис. 139. Поиск в GTM
Функция поиска позволяет нам быстро искать информацию по тегам, триггерам и переменным в рамках выбранной рабочей области. Нажав на один из найденных элементов нас перенаправит на его настройки.
12. Вертикальное навигационное меню
Сюда входят: обзор, теги, триггеры, переменные и папки.
Рис. 140. Вертикальное навигационное меню
Обзор. В данный раздел входят пункты 13–18. Это общая страница, которая отображает основную информацию по текущему контейнеру GTM в виде 6 блоков (дашбордов).
Теги, триггеры и переменные. Читайте в статье «Термины и определения, встречающиеся в работе с Tag Manager», а также ниже.
При переходе на каждый из этих разделов у вас есть возможность сортировки внутри таблиц по различным столбцам. Например, в тегах это можно делать по имени, типу объекта и последним изменениям.
Рис. 141. Таблица тегов
В триггерах присутствует столбец, в котором выводится информация о количестве тегов, связанных с данным триггером.
Рис. 142. Столбец «Теги» в разделе «Триггеры»
Папки. Подробнее разберем чуть далее.
13. Блок «Новый тег»
Рис. 143. Блок «Новый тег»
С помощью данного блока мы можем добавить новый тег в выбранную рабочую область.
14. Блок «Описание»
Рис. 144. Блок «Описание»
Предназначен для добавления описания к той области, в которой мы работаем. Чтобы вы, или человек, который будет работать с этой областью, понимали смысл всех внесенных изменений. Если вы используете различные рабочие области для сервисов Google и Яндекс, в описании к workspace можно написать: «Используется для продуктов Google…/или Яндекс».
15. Блок «Редактирование»
Рис. 145. Блок «Редактирование»
В нем отображается информация о количестве тех изменений, которые были выполнены в рабочей области перед непосредственной публикацией контейнера. Сумма изменений в этом блоке равна пункту 7 (Изменения в рабочей области).
Из раздела «Редактирование» можно перейти в управление рабочими областями (выделенное меню на изображении выше).
16. Блок «Опубликованная версия контейнера»
Рис. 146. Блок «Опубликованная версия контейнера»
Через этот блок мы можем перейти в раздел «Версии», а также получить информацию об актуальной версии, когда она была изменена и кем.
17. Блок «Изменения в рабочей области»
Рис. 147. Изменения в рабочей области
Здесь отображаются изменения, которые были выполнены в выбранной рабочей области с момента последней публикации контейнера Google Tag Manager.
Можно использовать сортировку по имени, типу, пользователям и изменениям, а также отменить или просмотреть изменение. При выборе «Просмотреть изменение» у нас откроется дополнительное окно с настройками. Слева – это последняя версия (то, что в данный момент опубликовано), а текущая рабочая область – это черновик нашего контейнера.
Рис. 148. Блок «Изменения в рабочей области»
В рассмотренном примере – это переменная GA ID с идентификатором отслеживания Google Analytics. В правом верхнем углу доступ справка Диспетчера тегов по рабочим областям.
18. Блок «История»
Рис. 149. Блок «История»
При клике на этот блок отобразится история всех изменений в выбранной рабочей области. А именно – кто сделал изменения, что было за действие (создание/изменение/удаление), какого типа использовался элемент в GTM (тег, триггер или переменная), его название и дата изменения.
Рис. 150. История изменений в GTM
Если изменений было достаточно много, можно воспользоваться поиском в правом верхнем углу.
19. «Условия использования» и «Политика конфиденциальности»
Рис. 151. Условия использования и Политика конфиденциальности Google
Несмотря на то что Google является публичной многомиллиардной компанией и как никто другой заботится о защите персональных данных, не будет лишним хотя бы раз в своей жизни ознакомиться с материалами «Политики конфиденциальности» и «Условиях использования» их продуктов.
https://policies.google.com/privacy?hl=ru
По ссылке выше вы сможете узнать:
● какую информацию собирает Google;
● как они используют эту информацию;
● как изменить свои персональные данные;
● какую информацию Google передает третьим лицам;
● какие существуют варианты доступа к данным и их обновления;
● и т.д.
Управление пользователями
В Google Tag Manager управлять пользователями и предоставлять им различные права доступа можно с помощью двух уровней.
Один из них – это уровень аккаунта, а другой – уровень контейнера. На первом уровне (аккаунта) доступы бывают двух типов:
Рис. 152. Разрешения на уровне аккаунта
1. Пользователь;
2. Администратор.
Разрешение на уровне аккаунта типа «Пользователь», к которому предоставлен данный уровень доступа, сможет просматривать статистику по аккаунту, список пользователей и настройки аккаунта. Разрешение на уровне аккаунта типа «Администратор» позволяет просматривать статистику, управлять списком пользователей (не только просматривать) и изменять настройки аккаунта.
На втором уровне (контейнера) возможны следующие варианты:
Рис. 153. Разрешения на уровне контейнера
● Нет доступа. Пользователь не будет видеть контейнер в аккаунте;
Рис. 154. Права доступа на уровне контейнера – Нет доступа
Разрешение на уровне аккаунта «Пользователь», а на уровне контейнера «Нет доступа».
● Чтение. Пользователь будет видеть контейнер в списке и сможет просматривать теги, триггеры и переменные в контейнере без возможности вносить изменения.
Рис. 155. Права доступа на уровне контейнера – Чтение
Кнопки «Предварительный просмотр» и «Отправить» в правом верхнем углу отсутствуют.
Однако на уровне такого доступа мы можем предварительно просматривать «Версии» и примечания к ним. Создавать версии и публиковать их возможности нет.
Рис. 156. Предварительный просмотр версий
Мы также можем экспортировать контейнер. Подробнее об импорт-экспорте контейнеров Google Tag Manager будет разобрано в отдельной статье.
Таким образом, разрешение на уровне контейнера «Чтение» позволяет просматривать рабочие области, настройки, теги, триггеры и переменные, статистику, пользователей, экспортировать контейнер, осуществлять предварительный просмотр версий и их примечаний.
● Изменение. Пользователь имеет право создавать рабочие области и вносить изменения, но не может создавать версии и осуществлять публикацию.
Рис. 157. Права доступа на уровне контейнера – Изменение
Доступны кнопки «Создать», «Настроить», «Предварительный просмотр».
Таким образом, разрешение на уровне контейнера «Изменение» позволяет создавать рабочие области, просматривать настройки, статистику и пользователей, импортировать-экспортировать контейнер, осуществлять предварительный просмотр версий и их примечаний, создавать теги, триггеры и переменные.
● Подтверждение. Пользователь имеет право создавать версии и рабочие области и может вносить изменения, но не осуществлять публикацию.
Рис. 158. Права доступа на уровне контейнера – Подтверждение
Доступны кнопки «Создать», «Настроить», «Предварительный просмотр» и «Отправить».
Отличие данного доступа от «Изменение» заключается в том, что разрешение на уровне контейнера «Подтверждение» позволяет еще редактировать настройки контейнера и создавать версии.
● Публикация. Пользователь имеет право создавать версии и рабочие области, вносить изменения и осуществлять публикацию.
Рис. 159. Доступна публикация изменений
Доступны кнопки «Создать», «Настроить», «Предварительный просмотр», «Отправить» и «Публикация».
Наиболее полный доступ среди всех в Google Tag Manager с возможностью публикаций изменений в контейнере.
Чтобы предоставить или изменить права доступа на уровне аккаунта в GTM, необходимо:
● выбрать вкладку «Администрирование»;
● в разделе «Аккаунт» выберите «Управление доступом»;
Рис. 160. Администрирование – Управление доступом
● нажмите кнопку «Создать»;
Рис. 161. Управление пользователями аккаунта – Создать
● указываем электронную почту, которая зарегистрирована в сервисах Google (как правило, Gmail.com), разрешение на уровне аккаунта и на уровне контейнера
● нажимаем кнопку «Добавить».
Рис. 162. Добавление нового пользователя в GTM
Пользователь добавлен в аккаунт и ему присвоен соответствующий уровень доступа. Удалить из списка можно кликнув по его электронной почте и нажав на кнопку «Удалить».
Рис. 163. Изменение разрешений для пользователей – Удалить
Также в Google Tag Manager можно открыть доступ только на уровне контейнера.
Рис. 164. Управление доступом контейнера
При желании можно также задать разрешения для каждого контейнера, к которому вы предоставляете доступ.
Рис. 165. Различные разрешения на уровне контейнера
Различные уровни доступа на уровне аккаунта и контейнера в Google Tag Manager предоставляются в зависимости от решаемых задач. Например, для удаленной настройки уже имеющегося контейнера или для удаленного создания и настройки нового контейнера в аккаунте. Права с уровнем доступа без возможности редактирования можно выдать для поиска причины неработоспособности контейнера, отдельных тегов и т.д.
Версии
Версия – это сохраненная копия контейнера в текущий момент времени. Делая изменения в рабочей области, вы всегда можете сохранить ее в виде версии. Благодаря этому при необходимости легко возвращаться к предыдущим изменениям. Создавать версии могут пользователи с правом на подтверждение или доступом более высокого уровня.
Рис. 166. Версии в GTM
Когда вы публикуете контейнер, автоматически записывается его версия. Таким образом, в вашем аккаунте будут находиться все опубликованные версии контейнера.
Вы можете сохранить текущий вариант рабочей области в виде версии без публикации. Для этого во время публикации контейнера переключитесь с «Публикация и создание версии» на «Новая версия» и нажмите «Создать».
Рис. 167. Новая версия
С версиями в Google Tag Manager можно производить различные действия:
Рис. 168. Действия над версиями
● просматривать в режиме предварительного просмотра (режиме отладки);
● поделиться ссылкой для просмотра с другим человеком;
● опубликовать;
● переименовать;
● редактировать примечания (описание);
● выбрать в качестве последней версии (чтобы заменить текущую версию контейнера ранее сохраненной);
● удалить (будет удалена навсегда через 30 дней);
● экспортировать в другой контейнер (формат файла .json).
Рис. 169. Экспорт определенной версии контейнера
Диспетчер тегов сохраняет историю публикаций, так что вы всегда можете узнать, когда и кем была опубликована та или иная версия.
Администрирование
Раздел «Администрирование» разделен на два уровня:
1. Аккаунт;
2. Контейнер.
На уровне аккаунта в GTM доступны настройки аккаунта, статистика аккаунта по действиям (создание, изменение, добавление тегов и т.д.) и опции управления доступами.
Администратор может разрешить вносить изменения в контейнеры только пользователям, прошедшим двухэтапную аутентификацию. Эта функция настраивается на уровне аккаунта и применяется в следующих случаях:
● создание или изменение переменных;
● создание или изменение пользовательских тегов HTML;
● изменение настроек пользователя.
Рис. 170. Двухэтапная аутентификация для некоторых операций
На уровне контейнера в GTM доступны следующие настройки:
● настройки контейнера (название и тип контейнера);
● статистика контейнера (создание, изменение, добавление тегов и т.д.);
● управление доступами пользователей;
● установить Диспетчер тегов Google (фрагменты кодов GTM);
● импорт-экспорт контейнеров (формат файла .json);
● связывание внешних аккаунтов (например, DoubleClick Bid Manager с контейнером GTM);
● очередь подтверждения (здесь принимаются запросы на установление связи с аккаунтом DoubleClick Campaign Manager и подтверждение перемещение тегов);
● среды (подробнее в материалах ниже).
Рис. 171. Настройки на уровне контейнера
Импорт-экспорт контейнеров
Для ускорения первичной настройки и переноса данных из одного контейнера в другой в Google Tag Manager можно использовать функции импорта-экспорта.
Например, вы имеете сайт с установленным на нем контейнером GTM. Долгое время вы настраивали все теги, триггеры и переменные. В ближайших планах у вас расширение и сделать еще один сайт, другой тематики, но с той же самой структурой. Чтобы заново вручную не настраивать всю конфигурацию, в Google Tag Manager предусмотрена автоматическая выгрузка контейнера как текстового файла в формате JSON. Всего в несколько кликов вы можете перенести все настройки из одного контейнера GTM в другой.
Несомненно, в новом контейнере все же придется внести некоторые изменения – у них могут быть разные идентификаторы счетчиков, конверсий или доменные имена. Экспортированный файл можно изменить, оставив в нем только нужные триггеры, теги и переменные. Это позволяет создавать стандартные шаблоны контейнеров и делиться ими с другими пользователями Google Tag Manager. Экспортированные контейнеры можно сравнивать между собой, изменять, сохранять в системе управления версиями и импортировать обратно в GTM.
Таким образом, основное практическое применение импорт-экспорта контейнеров в GTM – это сокращение времени на выполнение большого количества однотипных действий путем дублирования конфигурации тегов, триггеров и переменных.
В качестве примера я буду переносить контейнер с настроенными тегами Google Analytics и Яндекс.Метрика. Чтобы экспортировать (выгрузить) контейнер, перейдите в «Администрирование» и выберите «Экспортировать контейнер».
Рис. 172. Администрирование – Экспортировать контейнер GTM
Далее выбираем версию или рабочую область. В рабочей области может .содержаться несколько версий. Например, одна для тегов аналитики, другая для целей и событий, в третьей версии присутствуют изменения по электронной торговле и т.д. При выборе рабочей области экспортируются настройки всех версий. Если же вы хотите скопировать настройки только из конкретной версии, выберите только ее. В нашем случае это последняя 4 версия, которая называется Google Analytics и Яндекс.Метрика.
Рис. 173. Выбираем версию контейнера
В следующем окне нам доступен предварительный просмотр содержимого контейнера. Если все верно, нажимаем «Экспортировать».
Рис. 174. Экспорт контейнера
На компьютер загрузится файл в формате JSON (формат обмена данными на JavaScript).
Рис. 175. Загрузка файла .JSON на компьютер
Что дальше делать с этим файлом? Есть два варианта:
1. сразу же импортировать в новый контейнер;
2. сравнить данные с новым контейнером.
Рассмотрим 2 вариант. Перед тем, как загрузить наш файл в другой контейнер, мы можем выгрузить данные из второго контейнера и с помощью утилиты сравнить оба файла (экспортируемого контейнера и текущего, который будем заменять). В этом нам может помочь утилита сравнения файлов diff, которая выводит разницу между двумя файлами. Эта программа выводит построчно изменения, сделанные в файле (для текстовых файлов). Если вы используете diff, вы можете увидеть, что именно изменилось. Это способ предотвратить проскальзывание нежелательных изменений в файле.
Один из наиболее распространенных сервисов сравнения файлов jsondiff.com. Просто указываете два пути к файлам на компьютере и нажимаете «Compare». Все остальное программа сделает за вас, и где надо, подсветить код.
Рис. 176. JSON Diff
Утилита полезна не только при импорте-экспорте контейнеров в Google Tag Manager, но и тогда, когда требуется сравнить изменения в одном файле относительно другого. На изображении выше было найдено 26 различий, которые JSON Diff подсветил, а выделенная область синим указывает лишь на то, что два контейнера имеют разные accountID.
Познакомившись немного с инструментов diff, переходим к импорту нашего контейнера. Для этого переходим в контейнер, в который хотим загрузить новые настройки. Раздел «Администрирование» – «Импортировать контейнер».
Рис. 177. Администрирование – Импортировать контейнер GTM
Загружаем файл, который мы экспортировали, и выбираем рабочую область. Рекомендация: если у вас уже есть настройки в текущем контейнере, лучше создавать новую рабочую область. Если контейнер пустой, но можно в «Существующая».
Рис. 178. Импорт контейнера
Выбираем вариант импорта:
● перезаписать – все старые настройки заменятся на новые;
● объединить – данные двух контейнеров будут объединены. При этом могут возникнуть ошибки. Чтобы это исправить, перезапишите, либо переименуйте конфликтующие теги, триггеры или переменные.
Рис. 179. Подробные изменения в контейнере
В предварительном просмотре Google Tag Manager визуально сообщит нам о том, какие теги, триггеры и переменные будут созданы, изменены или удалены. Можно посмотреть подробных список изменений, нажав на «Показать подробные изменения». Если все сделали правильно, остается только «Подтвердить».
На этом импорт данных в контейнер завершен. Не забудьте опубликовать контейнер, чтобы текущая конфигурация стала доступна пользователям. Если вы импортируете большое количество данных, перед публикацией обязательно проверяйте все изменения через отладчик GTM.
P. S. В интернете есть большое количество готовых JSON-файлов для Google Tag Manager. Например, компания LunaMetrics на своем сайте lunametrics.com/labs/recipes/публикует различные решения с подробным описанием. Analytics Mania в своем блоге также собрала «рецепты» от разных команд и веб-аналитиков, в числе которых: Simo Ahava, David Vallejo, Pat Grady, Daniel Carlbom и другие.
Среды
В Google Tag Manager есть возможность создания так называемых сред, которые позволяют протестировать изменения, внесенные в контейнер, перед их публикацией на сайте. Прежде чем разобраться в этом функционале, постараемся понять, как работает контроль версий в диспетчере тегов.
Рис. 180. Пример версий
При создании тега, триггера и переменной до публикации все изменения хранятся в черновой версии. Чтобы новые данные стали доступны пользователю, версию необходимо опубликовать. Все версии контейнера хранятся на вкладке «Версии».
Рис. 181. Версии
Во время внесения изменений в конфигурацию отправки версии у нас есть возможность задать среду для публикации.
Рис. 182. Задание среды для публикации
Несмотря на то, что обычно публикуется последняя версия контейнера, Google Tag Manager также дает нам возможность переиздавать более старые версии. Эта функция как раз необходима для сред диспетчера тегов.
Когда-то GTM разрешал публиковать только одну версию контейнера. Это означало, что для каждого отдельного веб-сайта у вас был единственный фрагмент кода Google Tag Manager.
Но ситуация кардинально изменилась, когда пришло осознание того, что веб-сайты могут находиться на разных этапах разработки – от предварительной подготовки, производства, до бета-тестирования и окончательного запуска. При таком подходе все равно необходимо устанавливать теги, отслеживать статистические данные и обеспечивать должное качество работы.
Рассмотрим пример, в котором у нас есть две версии сайта:
1. тестовый вариант, над которым разработчики ведут работы (недоступен широкой публике);
2. конечный вариант, который в данный момент доступен для пользователей в сети.
Рис. 183. Пример версий сайтов
Обе версии являются копиями одного и того же сайта, и оба используют один и тот же контейнер Google Tag Manager. Но вы не будете публиковать версию тестового варианта, поскольку она сырая и над ней ведутся работы по устранению ошибок.
Благодаря средам в GTM стала доступна одновременная публикация нескольких версий контейнеров, что значительно упрощает тестирование и отладку тегов.
Рис. 184. Две среды разработки: конечная и промежуточная
В приведенном выше примере у нас есть две среды: конечная (live, 3) и тестовая (промежуточная, 4). Конечная среда будет содержать теги, которые мы хотим запустить на сайте, а промежуточная среда будет включать в себя дополнительные теги, которые либо проходят тестирование, либо не готовы к публикации в финальной версии.
Чтобы получить доступ к средам, перейдите в раздел «Администрирование» и откройте «Среды» на уровне контейнера.
Рис. 185. Администрирование – Среды
По умолчанию в контейнере создается две среды – Live (реальная) и Latest (последняя).
Рис. 186. Среды в GTM по умолчанию
Live (реальная) среда всегда указывает на версию контейнера, которая была опубликована, а Latest (последняя) среда указывает на последнюю версию контейнера, которая была создана. Однако это не обязательно та же версия, что и Live.
В Google Tag Manager можно создавать собственные среды. Для этого нажмите кнопку «Создать». В конфигурации будет доступно 4 опции:
1. название среды;
2. описание (чтобы другие пользователи вашего контейнера GTM могли быстро определить, для чего используется среда);
3. включение отладки;
4. поле с указанием целевого URL.
Заполнив все необходимые данные, нажмите «Создать среду».
Рис. 187. Создание новой среды
Далее сообщение от Google о начале работы с новой средой.
Рис. 188. Использование среды двумя способами
Вы создали среду. Ее можно использовать двумя способами:
1. С помощью ссылки для просмотра
Предоставьте другим пользователям ссылку, открывающую доступ к тестированию в среде. Для этого выберите «Поделиться ссылкой для просмотра» в меню «Действия» для этой среды.
2. С помощью фрагмента кода
Замените текущий тег на страницах, опубликованных в этой среде, специальным фрагментом-контейнером. Чтобы получить его, выберите «Получить фрагмент кода» в меню «Действия» для среды.
Примечание: не устанавливайте фрагмент контейнера среды рядом со стандартным фрагментом контейнера Google Tag Manager на том же сайте. Это может привести к дальнейшим ошибкам.
Также можно загружать среды на сайт с помощью функции предварительного просмотра. При этом браузер автоматически перейдет в режим предварительного просмотра, и вы сможете протестировать любую версию среды. Таким образом вы получаете доступ ко всем функциям тестирования без установки и внедрения фрагментов кода.
Если вы уже работали с контейнером и имеете различные версии, то система предупредит о том, что при публикации эти изменения появятся на сайте. Вы можете сначала выполнить предварительный просмотр и отладку.
Рис. 189. Выбор версии и публикация в среде
Если же контейнер новый и не имеет различных версий, то при публикации выбранная версия будет перемещена в только что созданную среду. Нажимаем «Опубликовать в среде» и возвращаемся в меню, где видим только что созданную специальную среду.
Рис. 190. Специальные среды
В разделе «Версии» появится столбец «Среды», в котором для каждой версии будет указана среда публикации.
Рис. 191. Новый столбец «Среды»
В отличие от сред по умолчанию, которые динамически изменяются в зависимости от того, какая версия вашего контейнера GTM активна, пользовательские среды всегда будут загружать одну и ту же версию, если вы явно не измените опубликованную версию.
Вы можете задать неограниченное количество сред и публиковать любые версии контейнеров в любой из них. Действия, которые можно совершать над средами:
Рис. 192. Действия со средами
● изменить настройки (описание, целевой URL, режим отладки);
● опубликовать в среде (возможность смены версии контейнера, можно задать любую версию контейнера, откатиться на более раннюю);
● поделиться ссылкой (открытие доступа к просмотру и тестированию в среде);
Рис. 193. Поделиться ссылкой для просмотра
● получить фрагмент кода (от основного контейнера GTM отличаются параметры gtm_auth и gtm_preview);
Рис. 194. Фрагмент кода для тестовой среды
● сбросить среду;
Если вы не хотите, чтобы ссылка, которой вы поделились с другим человеком, была доступна, вы можете сбросить код авторизации (параметр gtm_auth).
Рис. 195. Сбросить ссылку в GTM
Примечание: все установленные фрагменты кода также станут недействительны. Поэтому после сброса ссылки необходимо установить на сервер среды новый фрагмент кода контейнера Google Tag Manager.
● удалить среду;
Удаление среды приведет к потере доступа навсегда.
Как правило, среды в Google Tag Manager предназначены для работы с промежуточными версиями сайта. Если же сайт готов к полноценному запуску и никаких изменений в ближайшее время не предвидится, рекомендуется устанавливать стандартный фрагмент кода контейнера GTM.
Папки
Еще один способ организации элементов внутри контейнера Google Tag Manager – это папки.
Со временем в Google Tag Manager накапливается большое количество тегов, триггеров и переменных. У нас есть возможность каждый объект в контейнере отнести к какой-то своей логической сущности. Иными словами, сгруппировать их таким образом, чтобы в дальнейшем было проще работать. А помогут нам в этой систематизации папки.
Группировать создаваемые внутри контейнера GTM элементы можно по-разному. Например:
● по инструментам (отдельно завести папку для Google AdWords, отдельно для Google Analytics и т.д.);
● по типу решаемой задачи (отслеживание определенного события или группы событий);
● по типу выполняемой работы (отдельно завести папку для специалиста по контекстной рекламе, отдельно для человека, который занимается SEO, отдельно для веб-аналитика и т.д.);
● по проектам (для каждого микросайта или рекламной кампании);
● по подрядчикам (отдельно для агентства такого-то, организации такой-то и т.д.);
● как-то иначе.
Чтобы создать новую папку, перейдите в раздел «Папки» и выберите «Новая папка».
Рис. 196. Создание новой папки
Укажите ее название (например, «Папка Google Analytics») и нажмите «Создать». Имена папок следует задавать таким образом, чтобы из названия сразу было понятно, что находится в ней или к какой сущности принадлежат внутренние элементы.
Рис. 197. Название папки
Папка создана и теперь может быть использована для группировки различных объектов контейнера GTM. Перенесем в нее элементы, относящиеся к Google Analytics. В нашем примере это переменная GA ID (идентификатор счетчика Google Analytics) и сам тег Universal Analytics.
Ставим галочки напротив этих объектов и вверху выбираем «Переместить – Папка Google Analytics».
Рис. 198. Перемещение элементов в папку
После загрузки GTM выбранные элементы будут добавлены в папку.
Рис. 199. Элементы в папке
Если нам необходимо исключить какой-либо объект из папки, то выбираем данный элемент и вверху таблицы выбираем «Переместить – Элементы вне папок».
Чтобы добавить элементы в папку, не обязательно было сначала создавать новую папку, а затем перемещать их в нее. Можно было сначала выбрать необходимые объекты, а далее нажать на «Папка с этими объектами». После чего Google Tag Manager предложит создать папку.
Рис. 200. Папка с этими объектами
Можно использовать оба варианта при группировке элементов в папки. Управлять папками и их содержимым можно с помощью меню.
Рис. 201. Управление папками
Доступны:
● добавить новый тег;
● добавить новый триггер;
● добавить новую переменную;
● переименовать папку;
● удалить папку.
Если вы заходите удалить папку, в которой присутствуют теги, триггеры или переменные, то вы сначала должны очистить ее содержимое, сделать ее пустой, иначе GTM выдаст вам предупреждение:
Рис. 202. Предупреждение Google Tag Manager
При создании новых объектов в GTM вы можете сразу указать конечную папку с помощью иконки:
Рис. 203. Иконка папки GTM
И последнее. После создания папок в таблицах тегов, триггеров и переменных появляется дополнительный столбец «Папка», по которому можно сортировать элементы.
Рис. 204. Дополнительный столбец «Папка»
Переменные
Переменная в Google Tag Manager – это объект, которому дано имя и который может принимать различные значения (вида пара «ключ-значение»). Имя переменной постоянно, а ее значение меняется в зависимости от того, какие действия происходят на сайте. Устаревшее название переменной в предыдущей версии диспетчера тегов Google – макрос.
Переменные в GTM практически ничем не отличаются от переменных в JavaScript. У каждого события на сайте есть свои переменные, в которых находится информация об этом событии. Например, когда в интернете-магазине мы нажимаем на кнопку «Добавить в корзину», в переменных этого события будут лежать значения CSS-класса этого элемента или сам текст элемента (кнопки). При клике на ссылку в переменной будет передаваться еще и URL-адрес.
Переменные могут применяться как в триггерах, так и в тегах. В триггерах они используются в качестве фильтра активации, то есть когда следует запускать тот или иной тег.
Рис. 205. Переменные в триггерах
Например, запускать триггер «Просмотр страницы» только тогда, когда переменная «Page URL» равна значению osipenkov.ru/google-tag-manager. Или выбрав тип триггера «Клик – Все элементы», вы можете с помощью условий (переменная + фильтр + значение) активировать триггер по нажатию на определенные элементы, и т.д.
Переменные в тегах используются для получения динамических значений. Например, в Google Analytics о сумме транзакции, ID заказа, идентификаторе продукта и т.д.
Рис. 206. Поле шаблона «Переменная»
В примере выше с помощью иконки (поле шаблона) «Переменная» для типа тега «Отслеживание конверсий AdWords» задаются значения для различных полей – идентификатор отслеживания, ярлык конверсии, ценность конверсии и т.д.
Также с переменными можно работать и в пользовательских HTML-тегах. Для этого нам необходимо использовать специальную конструкцию, заключенную в теги . Тег . Существует несколько вариантов того, когда, каким образом и в каком месте должен быть описан уровень данных.
● описание ДО кода контейнера GTM. Конструкция ДО контейнера GTM выглядит так:
<script>
dataLayer = [{'ключ': 'значение'}];
</script>
К тому моменту, когда зафиксируется первое стандартное событие «Просмотр страницы» (Page View), информация, которую мы передали с помощью данной конструкции, уже будет присутствовать в Google Tag Manager и мы с ней сможем работать.
В режиме предварительного просмотра это будет выглядеть так:
Рис. 305. Пример описания ДО кода контейнера GTM
Для отслеживания различных действий пользователя в GTM предусмотрена специальная переменная event. Event можно использовать внутри обработчика того или иного события. Наличие ключа event сообщает GTM, что нужно что-то сделать. Далее он действует в зависимости от содержания event, в данном случае выводит значение «ДО GTM». Если event отсутствует или не задано, то в режиме отладки мы увидим слово «Message» и надпись:
Рис. 306. Отсутствие event, сообщение “Message»”
Например, при клике на кнопку, которая открывает форму с заказом услуги веб-аналитики, можно использовать конструкцию:
● описание ПОСЛЕ кода контейнера GTM. Конструкция ПОСЛЕ контейнера GTM выглядит так:
dataLayer.push ({'ключ':'значение'});
Отличие от описания ДО заключается в том, что здесь используется метод push (), который добавляет один или более элементов в конец массива и возвращает новую длину массива. Помимо этого, квадратные скобки и равно заменились на круглые.
Рис. 307. Пример описания ПОСЛЕ кода контейнера GTM
Подробнее о методе push () читайте на javascript.ru. Описывая данные ДО кода GTM, уровень данных (dataLayer) еще не создан самим Google Tag Manager, а если ПОСЛЕ кода GTM, то уровень данных уже есть и нужно данные в нем дополнить теми, которые вам необходимы, а не создавать новый объект.
● универсальное описание. Для того, чтобы упростить работу в дальнейшем и не задаваться вопросом о том, когда вызывать уровень данных (ДО или ПОСЛЕ), используется конструкция следующего вида:
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event':'value'});
</script>
В режиме предварительного просмотра Google Tag Manager будут зафиксированы сразу два события:
Рис. 308. Универсальное описание
С помощью первой строки window.dataLayer = window.dataLayer || [] мы проверяем, существует ли объект dataLayer. Если он существует, то используем его. В противном случае мы его создаем и он у нас пустой. Второй строчкой window.dataLayer.push({'event':'value'}) мы дополняем с помощью метода push () тот объект (массив), который был создан в первой строчке.
Объект window сочетает два в одном: глобальный объект JavaScript и окно браузера. При добавлении объекта window эта переменная уровня данных также будет доступна из другого скрипта.
Важно отметить, что переопределение переменной уровня данных с тем же именем, что и существующая переменная, приведет к тому, что существующее значение будет перезаписано новым значением.
С помощью уровня данных можно передавать пользовательские события. Давайте разберем простой пример – передать данные в Google Analytics с помощью метода push () по клику на кнопке одной из форм.
Рис. 309. Кнопка на одной из форм
Если бы вы не использовали GTM в своей работе, а только Google Analytics (код отслеживания Global Site Tag), и библиотеку gtag.js, то конструкция в коде страницы выглядела бы так:
Рис. 310. Пример кода реализации конструкцией из Google Analytics
Событие onclick возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick. Таким образом, когда пользователь нажимает на кнопку «Весь перечень», срабатывает событие, которое передает два обязательных условия (Категория event_category и Действие event_action) в Google Analytics, тем самым фиксируя цель.
Но когда Google Analytics установлен через GTM, так отслеживать события уже не получится. И поможет нам в этом уровень данных. Данные о событии мы можем передать сначала в dataLayer, а только оттуда – в Analytics.
Добавляем уровень данных к нашему элементу:
Рис. 311. Добавление dataLayer.push () к элементу
где ‘event’: ‘UAevent’ – пользовательское событие, а eventCategory и eventAction – все те же обязательные условия.
Крайне важно: следите за символами кавычек. Копирование из разных мест (из чужих блогов и сайтов) и кодировок недопустимо.
Рис. 312. Используйте одинаковые кавычки
В примере выше кавычки имеют разное написание, и событие фиксироваться не будет. Во всей конструкции используйте один тип символов!
Переходим к настройкам в интерфейсе Google Tag Manager. Нам необходимо создать:
1. две переменных уровня данных (eventCategory и eventAction);
2. триггер «Пользовательское событие» со значением UAevent;
3. тег для передачи данных в Google Analytics с типом отслеживания «Событие» и триггером активации UAevent;
4. цель в Google Analytics типа «Событие» со значениями категорий/действий = click/knopka соответсвенно.
В GTM на основании передаваемых с помощью dataLayer данных можно создавать переменные и триггеры. Создадим их:
Переходим в «Переменные» – «Создать пользовательскую переменную». Выбираем из категории «Переменные страницы» – «Переменная уровня данных». Задаем значение eventCategory и такое же имя. Сохраняем.
Рис. 313. Переменная уровня данных
Аналогично создаем вторую переменную уровня данных, только с именем eventAction. Далее создаем триггер типа «Пользовательское событие» с тем именем, которое указали в коде страницы у кнопки. В нашем случае – это UAevent. Вводим название и сохраняем триггер.
Рис. 314. Пользовательское событие
Теперь создаем тег типа «Universal Analytics» с настройками:
● Тип отслеживания – Событие
● Категория – {{eventCategory}}
● Действие – {{eventAction}}
● Идентификатор отслеживания – наш код отслеживания Google Analytics (можно создать переменную типа «Константа» и добавить туда идентификатор UA)
● Триггер активации – Пользовательское событие «Клик по кнопке».
Рис. 315. Настройки тега
На последнем шаге переходим в Google Analytics и создаем цель «Событие» с условиями (те, которые указаны в коде страницы сайта):
● Категория – click
● Действие – knopka
Рис. 316. Настройка события в Google Analytics
Сохраняем цель. На этом настройка передачи события через уровень данных завершена. В режиме предварительного просмотра в GTM по клику на кнопку зафиксируется событие UAevent и сработает наш тег.
Рис. 317. Событие UAevent в режиме отладки GTM
А с помощью отчетов «В режиме реального времени»в Google Analytics вы можете убедиться в корректности ее настройки и передачи данных.
Рис. 318. Отладка события в «Режиме реального времени»
Чтобы проверить, что передается в dataLayer, можно воспользоваться консолью в панели инструментов разработчика (в Google Chrome – F12). Вводим dataLayer и нажимаем клавишу «Enter».
Рис. 319. Console – dataLayer – Enter
Как мы уже знаем, Google Tag Manager по умолчанию передает на уровень данных набор значений gtm.js (когда GTM готов к работе), gtm.dom (когда готова модель DOM) и gtm.load (когда окно полностью загружено). Последнее по счету событие UAevent – это наш клик по кнопке.
Использование уровня данных полезно при отслеживании отправки форм, данных по e-commerce, динамического ремаркетинга, функции User ID и других событий на сайте.
Также с помощью уровня данных можно передавать сложные, вложенные структуры. Ярким примером служит передача значений о совершенных транзакциях расширенной электронной торговли. В примере ниже предполагается, что информация о продуктах, отображаемых на странице, известна в момент загрузки страницы:
Рис. 320. Фрагмент кода для передачи данных ecommerce
Подробнее об этом читайте в официальной справке разработчиков.
Понимание принципов работы и передачи данных с помощью dataLayer существенно упростит вам жизнь при работе с Google Tag Manager. Если вы до конца не разбираетесь в том, как устроен уровень данных, то реализацию dataLayer лучше всего доверить разработчику или специалисту с соответствующими техническими навыками.
Триггеры
Триггер (от анг. слова trigger в значении спусковой крючок, или приводящий в действие элемент) в GTM – это условие, при котором активируется или блокируется тег. Для запуска тега должен быть хотя бы один триггер. Таким образом, нельзя создать тег без триггера. Триггер может принимать значение «true» (истина), либо «false» (ложь). Он выполняется только в том случае, когда его значение является истинным, и, если выполняются все условия триггера.
А чтобы это определить (true или false), значение переменной сравнивается с тем, которое задано в триггере. Все триггеры в Google Tag Manager связаны с событиями. Также они могут иметь дополнительные условия или фильтры. В старой версии диспетчера тегов Google триггер назывался «правилом».
Существует два способа создания триггеров:
1. перейти на вкладку «Триггеры» и нажать на кнопку «Создать»;
Рис. 321. Создание триггера
2. через сам тег в блоке «Триггеры» по нажатию на «+» если в нем уже есть триггеры;
Рис. 322. Создание триггера
или же через пустую область блока, если триггеры к тегу еще не были добавлены.
Рис. 323. Создание триггера
Тип триггера представляет собой комбинацию события GTM и типа взаимодействия (или события), которое вы хотите, чтобы GTM начал прослушивать. Они разбиты на несколько категорий:
● Просмотр страницы;
● Клик;
● Взаимодействие пользователей;
● Другое;
Разберем каждый из них последовательно. Но перед тем, как создавать новый триггер, вы должны четко осознать, какое событие GTM должно запустить ваш тег.
Просмотр страницы
Рис. 324. Триггеры «Просмотры страницы»
● Модель DOM готова (DOM Ready) – передается gtm.dom событие, как только браузер загрузил объектную модель документа;
● Окно загружено (Window Loaded) – передается gtm.load событие после завершения загрузки всей страницы, когда окно полностью загружено;
● Просмотр страницы (Page View) – передается gtm.js событие, когда контейнер GTM готов к работе.
Google Tag Manager передает эти три события на уровень данных по умолчанию. Убедиться в этом можно перейдя в режим предварительного просмотра.
Рис. 325. Предварительный просмотр
Перейдя на сайт в режиме отладки, вы увидите:
Рис. 326. Режим отладки – три события
Выбрав событие, например, Window Loaded, и перейдя на вкладку «Variables» (Переменные), можно просмотреть зафиксированное пользовательское событие (переменная _event) и его значение (value – в нашем примере gtm.load):
Рис. 327. Пользовательское событие
или у переменной «Пользовательское событие»:
Рис. 328. Переменная «Пользовательское событие»
Клик
Тип триггера фиксирует клики по ссылкам или любым кликабельным элементам сайта.
Рис. 329. Триггеры «Клики»
● Все элементы – передается gtm.click событие когда на странице щелкнут любой элемент;
● Только ссылки – передается gtm.linkClick событие при нажатии на тег элемента HTML.
Например, создадим триггер на «Все элементы» с условием активации триггера «Все клики».
Рис. 330. Тип триггера – Клик – Все элементы
В таком случае при каждом клике по любой области на странице в режиме предварительного просмотра GTM будет фиксировать событие gtm.click:
Рис. 331. Фиксация кликов в режиме отладки
То есть вне зависимости от того, куда пользователь кликнул (на кнопку, на фон, в пустую область на странице) – все события будут зафиксированы. Если же мы хотим отслеживать события только по определенным элементам, то вместо условия активации триггера «Все клики» выбираем «Некоторые клики»:
Рис. 332. Клики по определенным элементам
Нам станет доступна настройка активации триггера при наступлении события и выполнении всех условий, а именно:
1. сначала задается переменная (на примере выше – Click Element);
2. затем выбирается оператор из списка (равно, содержит, соответствует селектору CSS, регулярному выражению и т.д.);
3. задается само значение (на изображении выше – CSS селектор одного элемента на сайте).
При необходимости можно задать несколько фильтров с помощью значка «+», либо же удалить ненужное с помощью «-».
Рис. 333. Добавление условий через +/-
Условия и фильтры связаны между собой логическим «И». То есть задав две строки, триггер будет срабатывать только тогда (событие будет считаться истинным и принимать значение true), когда одновременно соблюдаются первое И второе условия.
Рис. 334. Логическое «И»
В этом примере триггер сработает только тогда, когда пользователь кликнет по элементу с соответствующим селектором #features1 > div > ul > li:nth… И только на странице https://site.ru/catalog.
Важно: gtm.click – это предустановленные события GTM, они срабатывают при любом клике вне зависимости от того, был ли он осуществлен по некоторым элементам (при выборе такого) или же по всем элементам страницы. Главное, чтобы на нецелевых событиях не срабатывал тег, который активируется соответствующим триггером.
Рис. 335. Соблюдение условий активации триггера
Аналогичным образом настраиваются триггеры для «Только ссылки», а событие в режиме отладки будет называться gtm.linkClick:
Рис. 336. Событие gtm.linkClick
Однако данный тип триггера имеет дополнительные настройки. Такие же опции появляются при создании триггера «Отправка формы».
Рис. 337. Опции «Ждать теги» и «Проверка ошибок»
● Ждать теги – опция блокирует действие (задержка открытия ссылок или отправки формы) до активации всех тегов в контейнере GTM, то есть пока все теги не загрузятся или пока не истечет указанное время ожидания (смотря что произойдет раньше), событие зафиксировано не будет. Задается в миллисекундах (2000 мс = 2 секунды);
● Проверка ошибок – функция блокирует активацию тега, если для отслеживаемого элемента ссылки/формы не было выполнено действие по умолчанию («Клик по ссылке» или «Отправка формы»). Опция отвечает за то, на каких страницах нам необходимо использовать данный триггер.
Блок «Проверка ошибок» позволяет нам указать ГДЕ мы хотим использовать данный триггер, а блок с условиями активации определяет КОГДА этому быть. В качестве примера давайте разберем условие клика по ссылке (элемент – кнопка) со значением CSS-селектора и зададим «Проверка ошибок» на главной странице сайта.
Рис. 338. КОГДА и ГДЕ
В режиме предварительного просмотра при клике на данную кнопку зафиксируется событие gtm.linkClick:
Рис. 339. Событие gtm.linkClick
Но если мы поменяем условие проверки ошибок, например, на такое:
Рис. 340. Пример условия проверки ошибок
То события gtm.linkClick фиксироваться не будут, поскольку не соблюдено условие ГДЕ. До обновления Google Tag Manager «Проверка ошибок» и условие активации назывались «Условия включения» и «Условия активации». Рядовой пользователь мог легко запутаться в данной терминологии.
Для триггера типа «Отправка формы» распространенным условием активации функции «Проверка ошибок» является указание только тех страниц, на которых есть формы.
Триггер можно использовать со специально встроенными переменными: Click Element, Click Classes, Click ID, Click Target, Click URL, Click Text.
Взаимодействие пользователей
Рис. 341. Триггеры «Взаимодействие пользователей»
● Видео YouTube – срабатывает событие gtm.video когда пользователь просматривает видео на сайте (пока доступен только сервис-поставщик YouTube);
● Глубина прокрутки – срабатывает событие gtm.scrollDepth в том случае, когда пользователь прокручивает страницу (как горизонтально, так и вертикально);
● Доступность элемента – срабатывает событие gtm.elementVisibility когда элемент становится видимым на странице;
● Отправка формы – срабатывает тег gtm.formSubmit в случае, если форма была отправлена.
Видео YouTube
Рис. 342. Пример настройки триггера «Видео YouTube»
Тоже самое, что было описано в разделе «Переменные»:
● Начало (Start) – пользователь начинает просмотр видео;
● Завершение (Complete) – пользователь достигает конца видео;
● Приостановка (пауза), перемотка, буферизация (Pause, Seeking, Buffering) – пользователь останавливает, перематывает видео или когда происходит буферизация;
● Ход просмотра (Progress) – пользователь проходит процентный или временный порог (время измеряется в секундах). Целые положительные числа указываются через запятую.
● «Включить поддержку JavaScript API для всех видео YouTube»
Установив этот флажок, вы включите YouTube iFrame Player API. В результате ко всем URL видеопроигрывателя YouTube будет добавлен параметр enablejsapi = 1 для управления проигрывателем через iframe или JavaScript.
Как правило, данный триггер используется в связке со встроенными переменными из блока «Видео»: Video Provider, Video Status, Video URL, Video Title, Video Duration, Video Current Time, Video Percent, Video Visible.
Глубина прокрутки
Рис. 343. Триггер «Глубина прокрутки»
● Глубина вертикальной прокрутки в процентах – 10, 25, 50, 75, 90 (пример);
● Глубина горизонтальной прокрутки в пикселях – 100 (пример);
● Условия активации триггера – Все страницы.
Как правило, данный триггер используется в связке со встроенными переменными из блока «Прокрутка»: Scroll Depth Threshold, Scroll Depth Units, Scroll Direction.
Доступность элемента
Рис. 344. Триггер «Доступность элемента»
Доступны следующие настройки:
Метод выбора:
● Идентификатор (id);
Рис. 345. Метод выбора – id
В большинстве случаев название атрибута id на странице уникальное.
● Селектор CSS
Рис. 346. Метод выбора – Селектор CSS
Применяется, если у отслеживаемого элемента нет атрибута id, а также если нам нужно отследить несколько элементов.
Например, у нас на сайте есть несколько форм отправки. У каждой из них есть свой уникальный id. Отслеживание всех форм через «Идентификатор» нам бы не подошло. А вот привязать метод выбора через «Селектор CSS» элементов вполне можно.
Совет: если не знаете, за что зацепиться, а нужно прослушивать конкретный элемент – цепляйтесь за его CSS-селектор. Получить его легко можно через консоль разработчика (в браузере Google Chrome вызывается через клавишу F12, см. скриншот выше).
Правило запуска этого триггера
Рис. 347. Правило запуска триггера
● Один раз на страницу – если несколько элементов на странице сопоставляются идентификатором или CSS-селектором, этот триггер запускается только один раз, когда первый из них отображается на этой странице.
При перезагрузке страницы триггер сработает повторно;
● Один раз на элемент – если несколько элементов на странице сопоставляются CSS-селектором, этот триггер будет запускаться когда каждый из них будет видимым на этой странице в первый раз. Если несколько элементов на странице имеют одинаковый идентификатор, только первый согласованный элемент будет запускать этот триггер;
Если на странице несколько форм, по которым по заполнения информации всплывает одно и то же сообщение, используйте эту настройку.
● При каждом появлении элемента на экране – в этом случае триггер срабатывает каждый раз, когда соответствующий элемент становится видимым.
Минимальный процент видимости – какой процент выбранного элемента должен быть виден на экране для срабатывания триггера. Можно использовать собственную переменные.
Рис. 348. Минимальный процент видимости
Укажите минимальное время видимости – как долго выбранный элемент должен быть виден на экране для срабатывания триггера. Время периодов видимости на одной странице суммируется. Например, если элемент был виден в течение 4000 мс (4 секунд), затем скрыт из видимости окна браузера и после этого снова виден в течение 2000 мс, то общее время видимости этого элемента составит 6 000 мс.
Рис. 349. Минимальное время видимости
Если галочку не ставить, то время видимости для срабатывания триггера не будет играть роли.
Регистрация изменений DOM – настройка отслеживает элементы, которых изначально нет на странице, которые подгружены динамически и могут не входить в DOM (Объектная Модель Документа). Например, всплывающие формы. Если у вас есть на сайте есть такой контент, поставьте галочку, и такие элементы будут регистрироваться.
Рис. 350. Регистрация изменений DOM
Отправка формы
Рис. 351. Триггер «Отправка формы»
Триггер аналогичен настройкам другого триггера «Клик – Только ссылки». Можно использовать со специально встроенными переменными: Form Element, Form Classes, Form Target, Form URL, Form Text.
Другое
Рис. 352. Триггеры «Другое»
● Изменение в истории – срабатывает событие gtm.historyChange если изменился фрагмент URL (хэш, #). Как правило, используется на сайтах, контент которых подгружается динамически, без перезагрузки страниц;
В GTM можно использовать со встроенными переменными: New History Fragment, Old History Fragment, New History State, Old History State, History Source.
● Ошибка JavaScript – срабатывает событие gtm.pageError если происходит неперехваченное исключение JavaScript (window.onError);
В случае, если в JavaScript мы используем конструкцию «try..catch», то GTM не зафиксирует ошибку. Также триггер не будет сигнализировать об ошибках, которые произошли до загрузки кода Диспетчера тегов. Можно использовать со встроенными переменными Google Tag Manager: Error Message, Error URL, Error Line, Debug Mode.
● Пользовательское событие – срабатывает событие event, которое отправили с помощью конструкции dataLayer.push({'event': 'event_name'});
Пользовательские события позволяют отслеживать те взаимодействия, для которых не подходят стандартные методы. Например, отслеживание отправки формы с переопределением события submit.
Допустим мы хотим отправлять событие на уровень данных при нажатии кнопки «Отправить заявку». Для этого добавим код: dataLayer.push({'event': ‘button1-click’})
Рис. 353. dataLayer.push({'event': ‘button1-click’})
где button1-click – название пользовательского события;
Далее необходимо создать тег, а в настройках триггера «Пользовательское событие» задать название button1-click и условие активации – «Все специальные события». При необходимости можно использовать регулярные выражения.
Рис. 354. Пользовательское событие button1-click
Когда пользователь нажмет кнопку, на уровень данных будет отправлено пользовательское событие со значением button1-click. Затем GTM определит button1-click как значение пользовательского события и активирует тег.
Рис. 355. Событие button1-click
В dataLayer.push() можно добавить не только одну переменную вида «ключ=значение», но и целый массив. А чтобы посмотреть порядок в котором события передаются на уровень данных, откройте консоль JavaScript в веб-браузере и введите dataLayer:
Рис. 356. Console – dataLayer
● gtm.start – запуск контейнера GTM;
● gtm.dom – модель DOM готова;
● gtm.load – окно загружено;
● gtm.linkClick – открытие формы;
● button1-click – клик по кнопке.
Таймер
Событие gtm.timer срабатывает через заданный интервал времени (в миллисекундах).
Доступны следующие настройки:
Рис. 357. Триггер «Таймер»
● Имя события (по умолчанию gtm.timer) – можем изменить на любое другое. Например, timer2018;
● Интервал – время, через которое должно активироваться событие. Например, через 2,5 секунды;
● Ограничение – максимальное число активаций события. Например, 1. Если оставить это поле пустым, событие будет активироваться до тех пор, пока пользователь не покинет страницу.
Если необходимо, чтобы таймер срабатывал на всех страницах сайта, воспользуйтесь конструкцией регулярного выражения.
Так выглядит уровень данных события gtm.timer:
Рис. 358. gtm.timer в Data Layer
Триггеры в Google Tag Manager делятся на триггеры активации тегов и триггеры блокировки тегов.
Триггер активации – это условие, при выполнении которого срабатывает тег.
Например, вы хотите отслеживать клики по определенной кнопке на сайте. Зная значения переменной, вы можете настроить триггер активации, например, по Click ID:
Рис. 359. Пример условия активации триггера
Таким образом, тег активируется только в том случае, когда идентификатор HTML-тега равен menu-item-4306.
Триггеры активации делятся на:
● встроенные триггеры – доступны к использованию готовые шаблоны;
● пользовательские триггеры – ручная самостоятельная настройка.
Триггер блокировки – это условие, при выполнении которого активация тега блокируется.
Например, вы хотите активировать тег на всех страницах сайта, кроме одной конкретной. Тогда необходимо создать триггер с условием активации на нужных страницах, а далее в соответствующем теге добавить этот триггер в исключение.
Рис. 360. Триггер блокировки или исключения
При конфликте триггеров активации и блокировки, приоритет отдается блокиратору. Добавить триггер блокировки можно с помощью кнопки «Добавить исключение» в настройках тега.
Рис. 361. Добавить исключение
В Google Tag Manager существует триггер, который добавлен по умолчанию и который нельзя удалить. Это All Pages (Просмотр страницы).
Также как и переменные, триггеры в GTM можно копировать, удалять, просматривать изменения, и у них можно вывести примечания. Для этого в правом верхнем углу нажмите на значок «три точки».
Рис. 362. Действия над триггерами
В «Просмотреть изменения» можно узнать, что конкретно было изменено в переменной по сравнению с предыдущей версией, а в «Показать примечания» есть возможность заносить какие-то пометки, добавить описание по функциональности и т.д.
После создания триггеров их следует добавить к тегам.
Примечание: для каждого тега не нужно создавать отдельный триггер. Вы можете использовать один триггер в разных тегах.
Теги
Тег в Google Tag Manager – это фрагмент JavaScript кода, который собирает данные о посетителях на сайте и в приложении, а затем пересылает их на сторонние сервисы – Google Analytics, Google AdWords, Facebook, Яндекс.Метрика и т.д.
Если вы не используете Google Tag Manager, то все фрагменты кода других сервисов вам приходится вставлять вручную в исходный код страницы сайта. Это не очень удобно и отнимает много времени. Благодаря GTM все становится куда проще – исходный код менять не требуется, достаточно лишь указать в интерфейсе, какие теги вы хотите использовать и когда их нужно активировать.
В Google Tag Manager есть n-ое количество шаблонов тегов, которые облегчают их установку на сайте. Они разделены на категории:
● рекомендуемые – Universal Analytics, классический Google Analytics, отслеживание конверсий AdWords, ремаркетинг AdWords, счетчик DoubleClick Floodlight, тег продаж DoubleClick Floodlight, Google Optimize, Google Опросы;
Рис. 363. Рекомендуемые теги
● специальные – пользовательский HTML и пользовательское изображение;
Рис. 364. Специальные теги
● еще – сторонние сервисы, Twitter Universal Website Tag, Adometry, Crazy Egg, comScore Unified Digital Measurement, K50 tracking tag, Foxmetrics, Hotjar Tracking Code и другие.
Рис. 365. Теги сторонних сервисов
Разберем предметно первые две категории. Шаблоны, поддерживаемые в диспетчере тегов Google (последняя категория «еще»), можно посмотреть в официальной справке Google.
Чтобы создать тег в Google Tag Manager, перейдите на вкладку меню «Теги» и нажмите кнопку «Создать».
Рис. 366. Создание тега
В появившемся окне нажмите на пустое пространство конфигурации тега и выберите его тип.
Рис. 367. Выбор конфигурации тега
Рекомендуемые теги
Как правило, большинство маркетологов и веб-аналитиков работает с первыми четырьмя рекомендуемыми тегами: Universal Analytics, Классический Google Analytics, Отслеживание конверсий Google AdWords и Ремаркетинг AdWords. В зависимости от решаемых задач могут использоваться и другие.
Классический Google Analytics является устаревшей версией Universal Analytics. Однако он по-прежнему установлен на различных сайтах в интернете и официально поддерживается Google. На смену классическому пришел UA (Universal Analytics, 2012 год), в который привнесли ряд изменений:
● процесс сбора данных (у классического GA было 5 разных cookies, у UA – 1, ClientID);
● в UA добавили новый протокол передачи статистических данных, который называется Measurement Protocol;
● пользовательские определения (параметры и показатели) пришли на смену пользовательским переменным (раньше для создания было доступно 5 метрик, то теперь их количество увеличилось до 20);
● в UA добавили расширенную электронную торговлю;
● в UA добавили функцию UserID, которая позволяет связывать разные устройства и объединять различные сеансы и действия во время этих сеансов с уникальным идентификатором. Это отслеживание еще называют кросс-девайсным.
● и т.д.
Создадим тег «Universal Analytics» и разберем его настройки:
Рис. 368. Тип тега – Universal Analytics
В зависимости от выбранного в теге типа отслеживания дополнительные поля настроек будут меняться:
Рис. 369. Сравнение полей настроек в зависимости от типа отслеживания
Для простого отслеживания Universal Analytics необходимо добавить один тег и выбрать тип отслеживания «Просмотр страницы». Если же вас интересуют события или транзакции электронной торговли, потребуется добавить и другие теги.
Тип отслеживания – «Просмотр страницы» (Page View)
Выбирается в том случае, когда вас интересует, какие страницы просматривают посетители на вашем сайте.
Для того, чтобы информация из GTM передавалась в Google Analytics, необходимо в тег добавить идентификатор отслеживания GA. Сделать это можно несколькими способами:
1. указать переменную в опцию «Настройки Google Analytics»;
При такой настройке следует добавить идентификатор отслеживания Google Analytics (например, UA-113446186–1) в пользовательскую переменную типа «Константа», предварительно создав ее.
Рис. 370. Настройки Google Analytics
При клике на значок «i» откроется окно с заданной переменной, в которой можно оперативно поменять настройки.
поставить галочку «Включить переопределение настроек в этом теге» и вручную добавить идентификатор отслеживания Google Analytics.
Рис. 371. Включить переопределение настроек в этом теге
При активации данного способа у тега появляются дополнительные поля переопределения настроек, в которых мы можем изменять настройки счетчика Google Analytics через интерфейс Google Tag Manager. Она служит для настройки конфигураций Google Analytics, общих для нескольких тегов. Когда вы создаете тег Google Analytics с помощью Universal Analytics, Диспетчер предложит вам выбрать или создать переменную настроек Google Analytics. Большинство пользователей начнут работу с переменной настроек, содержащей только идентификатор отслеживания Google Analytics. Эту переменную можно будет использовать в любых дополнительных конфигурациях тегов с тем же идентификатором отслеживания Google Analytics (при этом вам не понадобится повторно его указывать).
● Поля, которые необходимо задать – доступен раскрывающийся список с полями, в которых задаются пара «ключ=значение»;
Рис. 372. Поля, которые необходимо задать
Например, вы можете добавить поле для кроссплатформенного отслеживания (функция User ID) или для отслеживания поддоменов. При настройке электронной коммерции в Fields to Set также можно передавать значения по товарам – идентификатор (ecomm_prodid), тип страницы (ecomm_pagetype) или общую ценность товаров (ecomm_totalvalue), а также многое другое.
● Специальные параметры;
● Специальные показатели;
● Группы контента;
● Реклама – «Включить функции для контекстно-медийной сети»;
Если вас интересуют отчеты по демографии и интересам, ремаркетинг Google Analytics и интеграция с DoubleClick Campaign Manager (DCM), задайте значение «True». Включить эту функцию можно непосредственно через сам Google Analytics (на уровне ресурса «Отслеживание – Сбор данных – Ремаркетинг «Вкл.»)
Рис. 373. Включение ремаркетинга и функций отчетов по рекламе в GA
● Электронная торговля – Включить расширенные функции электронной торговли;
При значении «True» вы сможете узнавать, когда пользователи добавляли товары в корзину, переходили к оформлению покупки и завершали ее, а также какие сегменты покупателей не совершают заказ. В Google Analytics настройка задается на уровне представления в разделе «Настройки электронной торговли».
Рис. 374. Включение отслеживание электронной торговли
Примечание: просто включив эту настройку, данные по электронной коммерции передаваться не будут. Настройка Enhanced Ecommerce куда более сложный процесс и требует определенного времени и навыков.
● Междоменное отслеживание;
Для корректного сбора данных можно настроить междоменное отслеживание. Тогда сеанс с переходом между вашими разными сайтами, например, domain.com, domain.ru, domain.org, будет засчитан как один сеанс, а время сеанса будет определено как общее время пребывания на всех посещенных ресурсах.
Рис. 375. Междоменное отслеживание
Автоматическое связывание доменов. Перечислите через запятую домены, для которых следует использовать общий идентификатор клиента, либо же создайте переменную типа «Константа» и задайте все домены там;
Использовать в качестве разделителя решетку. Позволяет использовать решетку (#) вместо знака вопроса (?) для добавления значений cookie в URL;
Изменение внешнего вида форм. Позволяет добавить информацию отслеживания к действию с формой.
● Расширенная конфигурация, в которой можно задать глобальную функцию, использовать отладочную версию и улучшенную атрибуцию ссылок. Настройки в этой категории используются крайне редко и предназначены для опытных пользователей.
Рис. 376. Расширенная конфигурация
Название глобальной функции. Позволяет переименовать глобальную функцию, используемую тегом Universal Analytics.
В некоторых случаях при добавлении элементов библиотеки analytics.js на страницу переменная ga может быть уже занята. Эту проблему можно решить путем переименования глобального объекта ga. Например, чтобы переименовать объект ga в analytics, нужно изменить код отслеживания следующим образом:
Рис. 377. Изменение переменной ga в коде отслеживания Google Analytics
Подробнее о переименовании глобальной функции (объектов ga) читайте в официальной справке разработчиков Google.
Использовать отладочную версию. Этот вариант библиотеки analytics.js при выполнении создает подробные записи в консоли JavaScript.
Они содержат сведения об успешно выполненных командах, а также предупреждения и сообщения об ошибках в коде отслеживания. Кроме того, с их помощью можно получить подробную информацию о каждом обращении, отправленном в Google Analytics. Это позволит проверить, какие именно данные отслеживаются.
Чтобы включить отладочную версию библиотеки analytics.js, измените URL в коде отслеживания JavaScript с
https://www.google-analytics.com/analytics.js
на https://www.google-analytics.com/analytics_debug.js
Рис. 378. Включение отладочной версии через код отслеживания GA
Включение улучшенной атрибуции ссылок. Позволяет повысить точность отчета «Статистика страницы». Когда страница содержит несколько ссылок на один URL, к каждой ссылке добавляется уникальный идентификатор элемента.
В Google Analytics эта функция находится на уровне ресурса в разделе «Настройки ресурса».
Рис. 379. Использование улучшенной атрибуции ссылок в Google Analytics
Задать имя трекера. Позволяет присвоить название объекту трекера. Не рекомендуется использовать в GTM, так как указав уже существующее имя трекера, это может привести к искажению данных. Хотя присвоение имени позволяет согласовать работу трекеров, созданных в Google Tag Manager с уже существующим кодом Google Analytics, вместо этого лучше перейти на dataLayer.
С помощью функции переопределения можно сделать так, чтобы тег Google Analytics использовал все те же настройки, которые были заданы в переменной настроек Google Analytics, но данные передавались на другой идентификатор отслеживания.
Подробнее о том, какие теги Google Analytics и дополнительные настройки поддерживает GTM, читайте в официальной справке Google.
Расширенные настройки
Приоритет активации тегов – целое число (положительное или отрицательное), определяющее порядок запуска тегов. Чем больше данное число, тем раньше будет активирован тег при истинности одного из триггеров, связанных с данным тегом. По умолчанию значение «0», и все теги начинают выполняться одновременно независимо от того, закончилось ли выполнение предыдущего тега. Например, тег с приоритетом «3» будет запускаться до тегов с приоритетами 1 и 2.
Рис. 380. Приоритет активации тегов
Включить специальное расписание активации тега. Если вы знаете, что некоторый тег понадобится вам на сайте в определенный период времени (например, при проведении рекламной акции вы отслеживаете определенные действия пользователей на сайте) просто активируйте данную настройку. Вы можете задать дату начала (время начала) и дату окончания (время окончания). Также дополнительно необходимо указать часовой пояс. Дата и время окончания не могут предшествовать дате и времени начала.
Рис. 381. Включение специального расписания активации тега
Активировать этот тег только в опубликованных контейнерах. Настройка позволяет исключать запуск тегов в определенных ситуациях, например, в режиме предварительного просмотра.
Рис. 382. Активировать тег только в опубликованных контейнерах
Когда вы находитесь в режиме отладки, как правило, вы контейнер не опубликовывайте до тех пор, пока не убедитесь в корректности работы всех настроек. При активации данной настройки тег не будет активироваться, поскольку он не опубликован. Чтобы результаты тестирования были более точными, не включайте эту функцию.
Настройки активации тега
Рис. 383. Настройки активации тега
Без ограничений. Тег активируется при каждом срабатывании триггера. Этот вариант используется, только если задан порядок активации тегов.
Один раз на событие (указывается по умолчанию). Тег активируется только один раз при выполнении определенного события. Этот вариант полезен для передачи информации на уровень данных. Информация передается один раз, поэтому и тег срабатывает один раз.
Один раз на страницу. Тег активируется один раз при загрузке страницы. Этот вариант применяется, когда необходимо активировать какой-то пользовательский скрипт JS, который мы подгрузили на страницу с помощью пользовательского HTML-тега.
Например, активации тега «Один раз на страницу» полезна, когда мы хотим отследить прокрутку страницы. Пользователь дошел до какого определенного элемента один раз, и мы это действие отследили. При последующих прокрутах туда-сюда нам уже это не так важно.
Порядок активации тегов
Рис. 384. Порядок активации тегов
В Google Tag Manager есть возможность задать тег, который будет активирован перед текущим тегом и тег, который будет активирован после выполнения текущего тега.
После выбора тега у нас появляется настройка, которая позволяет указать параметр.
Рис. 385. Порядок активации тегов
Если вы выбираем активировать тег перед текущим, то мы можем указать, что данный тег, в котором мы сейчас находимся не должен быть активирован, если тег, который задан перед ним, приостановлен или не сработал.
Если мы выбираем тег, который должен быть активирован после данного тега, в котором мы сейчас находим и выполняем настройку, то поставив галочку мы указываем, что тег, который выбран из списка, не должен быть активирован, если тег, в котором мы сейчас находимся, приостановлен или не сработал.
В качестве простого примера разберем:
1. клик по кнопке «Подобрать букет» на сайте;
Рис. 386. Пример отслеживания клика по кнопке
2. вывод с помощью пользовательского HTML-тега сообщения в консоли браузера «Hello, World». Конструкция имеет такой вид:
Рис. 387. Вывод сообщения с помощью пользовательского HTML-тега
В качестве порядка активации тегов зададим следующие значения:
● в теге – «Подобрать букет» активируем настройку запуска тега перед текущим, выбрав наш пользовательский HTML-тег «Сообщение Hello, World»
Рис. 388. Активация тега перед Тег – Подобрать букет
Таким образом, у нас сообщение в консоли «Hello, World» должно появиться до активации тега клика по кнопке «Подобрать букет».
У тега «Сообщение Hello, World» не заданы триггеры для активации, но есть информация о том, что данный тег будет активироваться непосредственно перед тегом «Подобрать букет».
Рис. 389. Активация тега перед другими тегами
Перейдя в режим отладки Google Tag Manager и кликнув по кнопку, мы увидим, что по событию gtm.click активировалось два тега, несмотря на то, что у нас в настройках задан только один тег – это «Подобрать букет».
Рис. 390. Пример активации тегов
Данные теги связаны между собой последовательностью активации. Аналогичным образом настраивается порядок активации «ПОСЛЕ».
Разберем другие типы отслеживания.
Рис. 391. Типы отслеживания
Тип отслеживания – Событие
В этом типе отслеживания задаются значения, которые использовались при настройке событий в Google Analytics.
Рис. 392. Тип отслеживания – Событие
Опция «Не взаимодействие». Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение «False» для этого параметра. В противном случае – устанавливайте значение «True».
Рис. 393. Опция «Не взаимодействие»
Все остальные настройки идентичны вышеописанным в типе отслеживания «Просмотр страницы».
Тип отслеживания – Транзакция
После того, как будет настроена передача данных о покупке, необходимо настроить тег, который будет передавать данные о транзакции в Google Analytics. Для этого и используется тип отслеживания – Транзакция.
Важно: включение отслеживания электронной торговли и создание тега с данным типом не позволит вам отслеживать данные о покупках пользователей. Для того, чтобы Google Tag Manager начал передавать сведения в Google Analytics обо всех транзакциях (идентификаторе товара, стоимости товара, наименовании и т.д.), необходимо использовать уровень данных или dataLayer, а также определенную конструкцию для передачи соответствующих параметров.
Подробнее читайте в официальной справке Google.
Тип отслеживания – Социальные сети
С помощью данного типа можно отслеживать социальные взаимодействия пользователей с сайтом, например, лайки/репосты Facebook, Vk, Twitter и т.д.
Тип отслеживания – Время
Отслеживание событий, срабатывающих по таймеру, может использоваться, если у вас есть страница (например, для просмотра видео), на которой пользователи могут долго оставаться, не запуская событий. Поскольку сеансы Google Analytics по умолчанию прекращаются через 30 минут, вам может понадобиться реализовать пользовательское событие, чтобы активность возобновлялась через какой-то другой промежуток времени.
Как правило, тип отслеживания «Время» в GTM используется в связке с триггером «Таймер», а для передачи данных в Google Analytics задаются параметры отслеживания пользовательского времени: переменная, категория, значение, ярлык.
Тип отслеживания – Внешний вид ссылки
Данный тип предназначен для отслеживания исходящих/внешних ссылок, то есть выходов (ухода) пользователей с сайта или загрузку файлов на странице (брошюр, прайс-листов, купонов и т.д.).
В качестве дополнительной настройки доступен параметр внешнего вида ссылки # (решетки) в качестве разделителя.
Рис. 394. Параметры внешнего вида ссылки
Тип отслеживания – Изменить внешний вид формы
Этот тип отслеживания позволяет добавить информацию отслеживания к действию с формой. Например, чтобы отслеживать формы по доменам, информация об отслеживании должна быть добавлена к URL-адресу назначения формы при отправке формы. URL-адрес назначения формы – это URL-адрес в атрибуте действия формы:
<form action = " http://www.site.ru ">
Отсюда URL-адрес назначения формы называют действием с формой, а добавление информации отслеживания к действию с формой называют изменением внешнего вида формы.
В качестве дополнительной настройки также доступен параметр внешнего вида ссылки # (решетки) в качестве разделителя.
Отслеживание конверсий AdWords
Рекомендуемый тег в Google Tag Manager предназначен для отслеживания действий пользователя на сайте и передачи информации в Google AdWords. Например, когда пользователь оформляет заказ на сайте, подписывается на рассылку, звонит в вашу компанию, скачивает приложение и т.д. Все эти действия называются конверсиями.
После создания конверсии в AdWords необходимо настроить тег.
Рис. 395. Отслеживание конверсий AdWords
Добавляем в тег «Отслеживание конверсий AdWords»:
● Идентификатор конверсии (Conversion ID);
● Ярлык конверсии.
Остальные значения заполнять не обязательно.
Рис. 396. Связывание конверсий
По умолчанию в опциях «Связывание конверсий» включено связывание конверсий (true) и задан префикс файла cookie _gcl.
На втором этапе нужно добавить тег связывания конверсий и настроить его так, чтобы он активировался на всех страницах сайта.
Тег «Связывание конверсий»
Рис. 397. Тег «Связывание конверсий»
При нажатии на объявление URL целевой страницы обычно содержит информацию об этом клике. Когда посетитель выполняет нужное вам действие (например, активируя тег отслеживания конверсий AdWords), эта информация используется для связывания произошедшей конверсии с кликом, который привел пользователя на сайт.
Тег связывания конверсий автоматически считывает информацию о клике из URL целевой страницы и сохраняет эти данные в собственные файлы cookie в вашем домене.
Рис. 398. Настройки тега «Связывание конверсий»
В качестве активации тега используется триггер «Все страницы». В большинстве случаев для работы тега связывания конверсий будет достаточно базовой настройки. Однако вы можете переопределить значения полей Имя (Name prefix), Домен (Domain) и Путь (Path) через настройку Linker Options:
Рис. 399. Linker Options
● Имя. Префикс, используемый как часть имен cookie, по умолчанию – _gcl. Например, если вы измените имя на _gcl2, тег связывания конверсий установит файлы cookie под названием _gcl2_aw и _gcl2_dc. При изменении префикса все теги, считывающие информацию о кликах из этих файлов cookie (например, теги отслеживания конверсий AdWords), нужно будет перенастроить на использование такого же префикса.
● Домен. Домен, в котором устанавливаются собственные файлы cookie. По умолчанию тег связывания конверсий использует домен самого высокого уровня. Например, если адрес вашего сайта – blog.site.ru, тег связывания конверсий будет использовать домен site.ru. Это поле следует задавать, только если вы хотите указать для файлов cookie домен более низкого уровня.
● Путь. Путь для файлов cookie. По умолчанию используется корневой уровень (/). Это поле следует задавать, только если вам нужно указать для файлов cookie подкаталог домена.
Специальные теги Google Tag Manager
1. Пользовательский HTML
2. Пользовательское изображение
Пользовательский HTML
У тегов, которых нет встроенных шаблонов в GTM, используется категория «Специальные теги». К ним относятся, например, коды Яндекс.Метрика, Facebook Pixel, Ретаргетинг ВК и другие.
Пользовательский тег HTML – это код стороннего сервиса, который должен быть заключен внутри тегов . Вот так выглядит пользовательский HTML тег счетчика Яндекс.Метрика:
Рис. 400. Пользовательский HTML-тег, Яндекс.Метрика
Вы также можете включить вызовы функции document.write() в тегах, установив соответствующий флажок.
Рис. 401. Поддержка функции document.write
document.write() – метод добавления текста к документу. Он работает только пока HTML-страница находится в процессе загрузки и дописывает текст в текущее место HTML еще до того, как браузер построит из него DOM. Подробнее об этом методе читайте на learn.javascript.ru.
Также в пользовательский HTML тег можно вставлять встроенные и пользовательские переменные. Для этого используют конструкцию двойных фигурных скобок {{myVariable}}.
Рис. 402. Вставка переменных в HTML-тег
Пользовательское изображение
Помогает отслеживать поведение пользователей там, где не работают остальные теги (например, в браузерах с отключенным выполнением скриптов). В конце ссылки добавляется невидимый пиксель изображения с URL-адресом определенного формата со специальными параметрами. По ним происходит передача данных.
Universal Analytics, Пользовательский HTML и многие другие теги работают на основе JavaScript. Если они загружаются на странице, на которой отключена поддержка JavaScript, то теги не сработают.
В связи с этим разработчики Google предусмотрели возможность загрузки через тег