Google Tag Manager: центр для ваших сниппетов отслеживания и тестирования

Если вы включаете в свой веб-проект внешние сервисы для измерения его успеха или количества запущенных рекламных кампаний, вам обычно приходится жонглировать большим количеством кодов сниппетов. Помимо определенных знаний в области программирования, это требует высокой степени контроля. Не имея возможности прямого доступа к кодовой базе, вам всегда придется обращаться к ответственному программисту, чтобы внедрить новые сервисы аналитики и отслеживания. Пытаясь противостоять этому, компания Google несколько лет назад выпустила Google Tag Manager, который значительно упрощает интеграцию различных кодов.

В октябре 2012 года компания Google выпустила Google Tag Manager (GTM) в качестве собственной системы управления для интеграции и управления JavaScript- и HTML-тегами. Если первая версия была предназначена в первую очередь для решений Google Analytics, AdWords и DoubleClick, то вторая версия (2014) менеджера тегов поддерживает все большее количество тегов сторонних производителей, особенно с выходом официального API. Google Tag Manager не ограничивается только внедрением инструмента анализа и конверсии: с помощью программы в веб-проект (сайт или мобильное приложение) могут быть внедрены ремаркетинговые и партнерские теги, а также сниппеты из инструментов тестирования, таких как AB Tasty или Mouseflow (инструмент тепловой карты).

При использовании Google Tag Manager невозможно полностью избежать взаимодействия с исходным кодом. Однако, в отличие от интеграции сниппетов без Менеджера тегов, вам нужно взаимодействовать с HTML-каркасом только один раз. Для начала вставьте сниппет контейнера в виде двух небольших участков кода в области заголовка и тела. Все остальные реализации выполняются в терминале через интерфейс Google Tag Manager. Сниппет контейнера действует как центральное место, из которого собираются все теги, которые вы настраиваете через браузер. В дальнейшем изменения в сниппет можно вносить непосредственно в Менеджере тегов. Если тег больше не нужен, просто удалите его из контейнера.

Чтобы убедиться в том, что сниппет контейнера обнаруживает нужные взаимодействия и информацию о пользователе, а затем направляет ее в соответствующую службу, необходимо создать правильные теги и триггеры в Google Tag Manager. Для задания обоих этих основных элементов инструментов Google можно использовать переменные. Для всех трех компонентов существуют готовые шаблоны — вы также можете подстроить их под свои нужды в настройках. Точные функции тега, триггера и переменной показаны в следующих кратких обзорах.

Теги — это центральные управляющие элементы Google Tag Manager. Они определяют, какая информация отправляется в те или иные службы, и имеют форму кода. В принципе, теги — это не что иное, как фрагменты, которые вы включаете в HTML-код. Помимо стандартных тегов, существуют специальные теги JavaScript, которые служат не для передачи информации, а для запуска дополнительных тегов. Однако Google Tag Manager обычно загружает все теги, содержащиеся в контейнере, независимо друг от друга и параллельно с другими элементами веб-проекта. Благодаря интеллектуальному механизму кэширования оптимизируется количество запросов, с которыми приходится иметь дело веб-серверу.

Триггеры позволяют определить требования, при которых конкретный тег будет использоваться в Google Tag Manager. В частности, речь идет о том, какие действия или события пользователя приводят к выполнению кода — и таким образом «запускают» его. Это могут быть, например, простые просмотры страниц, загруженные окна или появление сообщений об ошибках, но также и активные нажатия посетителей на определенную кнопку. Разумеется, в качестве триггера тега можно также использовать заполнение формы, подписку на рассылку или просмотр видео. Можно использовать один и тот же триггер для нескольких тегов.

Если вы хотите изменить настройки для определенных тегов и триггеров, вы можете использовать переменные менеджера тегов. Для тегов переменные дают возможность фиксировать динамические значения. Если, например, в интернет-магазине необходимо отслеживать такую информацию, как передача транзакции или передача приобретенных товаров, переменные можно регулировать. Триггеры ведут себя аналогичным образом — переменные используются для уточнения триггеров: если триггер используется только для определения того, что тег должен быть выполнен при возникновении впечатления от страницы, то переменную можно использовать для указания того, какая страница (страницы) или URL (URL) должны быть задействованы.

Google Tag Manager оперирует разнообразной базой направлений для каждого события, работая с интегрированными инструментами отслеживания и анализа. Мы собрали преимущества этого программного обеспечения Google:

• Промежуточное хранение тегов минимизирует требования к серверу и сокращает время загрузки веб-проектов.
• Общая оптимизация исходных кодов
• Простая, удобная интеграция и управление тегами с помощью специального веб-интерфейса после одного прямого взаимодействия с исходным кодом
• Постоянная блокировка нежелательных сниппетов и типов сниппетов повышает стандарты безопасности вашего сайта/приложения.
• Разнообразные готовые к использованию шаблоны для тегов, переменных и триггеров
• Автоматическая проверка тегов в режимах предварительного просмотра и отладки
• Запись всех действий с тегами, например, изменений в настройках аккаунта Google Tag Manager.

Как можно использовать Диспетчер тегов Google для собственного веб-сайта или приложения? Поскольку Диспетчер тегов основан на веб-технологиях, его установка не требуется, а доступ к интерфейсу можно получить через любой стандартный браузер. Кроме того, использование этого инструмента не требует никаких затрат, поэтому, в принципе, вы можете начать работу сразу же. Действительно, единственным требованием является наличие действующего аккаунта Google. Если вы уже пользуетесь такими сервисами, как AdWords, Gmail или Google Drive, то у вас уже есть учетная запись — в противном случае вам придется создать учетную запись для доступа к Google Tag Manager.

Перейдите на главную страницу Диспетчера тегов Google и войдите в систему под своей учетной записью Google, чтобы начать настройку. Автоматически откроется новое меню, через которое вы сможете добавить свой аккаунт Tag Manager. Введите желаемое имя аккаунта и страну проживания. Нажмите кнопку «Продолжить», чтобы подтвердить введенные данные.

Следующим шагом будет настройка контейнера, в который вы впоследствии будете вставлять выбранные вами сниппеты. Выберите для него имя — для веб-сайта разумнее использовать URL, особенно если вы планируете управлять несколькими различными проектами (каждый со своими контейнерами) через учетную запись Tag Manager. Чтобы завершить создание контейнера, укажите тип проекта (веб-сайт по умолчанию, AMP или приложение) и нажмите «Создать».

Инструменту Google потребуется некоторое время, чтобы сгенерировать контейнер. Если настройка прошла успешно, Менеджер тегов представит две части сниппета контейнера. Первую часть кода нужно скопировать и вставить в заголовок страницы, а вторую — поместить в область body нужного HTML-документа (сразу после открывающего тега body). Это гарантирует, что сниппет будет загружен как можно раньше, и будут доставлены наиболее точные данные измерений.

После того как вы интегрировали код Диспетчера тегов, можно приступать к заполнению контейнера. Первый шаг — это создание тегов для внедрения фактических кодов отслеживания и анализа на вашем сайте или в приложении. В качестве примера мы будем использовать хорошо известный Google Analytics. Просто найдите свою рабочую область через одноименную вкладку и выберите «новая вкладка» или «добавить новую вкладку».

Нажмите на поле «конфигурация тега» и выберите тип тега «универсальная аналитика»:

Определите, какая аналитика должна отслеживаться (в данном руководстве: просмотр страницы), и отметьте опцию «Включить переопределение настроек в этом теге» (требуется, если не добавлена переменная). Затем вы можете ввести идентификатор отслеживания аналитики в соответствующее поле. Чтобы использовать Google Analytics в соответствии с законами о защите данных, добавьте имя поля «anonymizeIp» в разделе «Дополнительные настройки» -> «Поля для установки» и установите значение «true». В результате IP-адреса, записанные вашим веб-сервером, будут анонимно передаваться в Google.

Сохраните новый тег Google Analytics на одноименной кнопке и во всплывающем окне «Сохранить тег». После этого вы можете воспользоваться предложенными названиями тегов.

После сохранения тегов в Google Tag Manager вам будет предложено добавить триггер, чтобы использовать код отслеживания из аналитики для желаемого действия пользователя. Чтобы создать новый триггер, выберите «Триггер» в списке меню и нажмите «Новый».

Нажмите на поле «Конфигурация триггера», чтобы получить обзор доступных типов триггеров. Найдите нужный вам триггер и нажмите на соответствующую запись. Если у вас есть триггерное событие, для которого не существует шаблона, выберите «Пользовательское событие». В этом руководстве по Google Tag Manager мы возьмем триггер «Просмотр страницы», который был использован в качестве цели отслеживания в предыдущем шаге. Этот тип также может быть настроен на применение ко всем или только к определенным подсказкам.

Нажмите «Сохранить» и выберите подходящее имя для нового триггера.

Вернитесь к тегу, созданному в шаге 4 (находится в разделе «Теги»), и подключите триггер, выбрав кнопку «Триггер», выбрав один из них из всплывающего списка, и сохраните изменения.

Google Tag Manager дает вам возможность проверить функциональность подключенных тегов и триггеров до того, как вы внесете изменения в контейнер сниппета. Чтобы сделать это, нажмите на «Посмотреть в режиме предварительного просмотра». После короткого ожидания появится следующее сообщение, информирующее вас о том, что режим предварительного просмотра в Менеджере тегов активен.

Если вы запустили режим предварительного просмотра, откройте свой веб-проект в новой вкладке. В нижней части экрана откроется консоль Google Tag Manager, и в разделе «Сводка» вы увидите, какие теги были выполнены. Поскольку в этом руководстве мы настроили так, что Google Analytics должен воспроизводиться непосредственно из представления страницы, в консоли тег указан как «теги, запущенные на этой странице».

Когда ваш контейнер настроен так, как вам нужно, пришло время интегрировать его в ваш живой веб-проект. Для этого нужно создать новую версию и опубликовать ее. Нажмите на кнопку «SUBMIT», которая находится в правом верхнем углу, выберите «Publish and Create Version» и дайте контейнеру имя и описание (необязательно), что особенно рекомендуется для больших коллекций тегов.

Нажмите кнопку «Опубликовать», чтобы завершить создание живой версии вашего первого контейнера тегов.