Добавление виджетов через Google Tag Manager (GTM)
Google Tag Manager (GTM) – это система управления тегами, с помощью которой можно размещать код виджета на сайте и его отдельных страницах без необходимости вставлять наш код прямо в прямо в проект.
В этом руководстве мы расскажем ключевые особенности работы с GTM: от описания тегов до их настройки и управления ими. Для полного ознакомления с ним, мы рекомендуем изучить руководства самого GTM, ссылки на многие из которых мы прикрепили ниже.
Теги
Теги – это фрагменты кода, которые позволяют довольно просто интегрировать ваш проект с другим сервисом. В нашем случае речь идёт о коде виджета, с помощью которого можно собирать обратную связь.
Вот пример тега, с помощью которого можно разместить виджет в формате iFrame:
<script>
window.FOQUZ_SDK = {
widget: {
widget_code: '4m21h51q6s7cs356ds1d3b03sdafc9e3',
},
params: {
},
};
(function (f, o, q, u, z) {
u = o.createElement("script");
z = o.getElementsByTagName("script")[0];
u.async = 1;
u.src = q + '?t=' + Date.now();
z ? z.parentNode.insertBefore(u, z) : o.head.appendChild(u);
С помощью GTM вы сможете настроить на каких страницах и при каких событиях нужные теги должны активироваться, чтобы в FOQUZ ушёл запрос на проверку условий показа виджета, которые вы установили в его настройках.
Другими словами, GTM активирует код виджета в нужный момент, а затем FOQUZ запускает проверку по выставленным вами условиям и показывает виджет, если они выполнены.
Стратегии управления показом виджета
Все настройки показа виджета через FOQUZ, добавление тега через GTM. В этом случае вы создаёте виджет и настраиваете условия его показа в нашем сервисе. Через GTM вы только добавляете тег с каким-то высокочастотным триггером: инициализация страницы или изменение истории.
Все настройки показа виджета и добавление тега через GTM, создание виджета в FOQUZ. При такой схеме вы используете только настройки показа в GTM, а в FOQUZ лишь создаёте сам виджет без настроек показа (в этом случае он отображается всегда, когда вызывается).
Смешанный способ. Тут вы используете все возможности FOQUZ и GTM по настройке условий показа. Но это усложняет управление тегами, т. к. условия показа будут сразу в двух разных сервисах.
Независимо от выбранной стратегии мы рекомендуем использовать GTM для дополнительного управления виджетами. С его помощью вы можете тестировать разные сценарии исследований без необходимости ожидать изменений в проекте от отдела разработки.
Начало работы
Создание аккаунта и контейнера
Для начала нужно создать аккаунт и контейнер в GTM Для этого перейдите на сайт сервиса, войдите в аккаунт Google и во вкладке Аккаунты (слева сверху) создайте аккаунт с помощью простой формы.
После чего перейдите в раздел Создание контейнера, введите его название и выберите тип контейнера Веб.
Примечание. Контейнер GTM – это код, который добавляет на сайт функционал управления тегами с помощью Google Tag Manager.
Установка контейнера на сайт
На вкладке Рабочая область нажмите на наименование контейнера (начинается на “GTM” в правом верхнем углу).
В появившемся окне появится два блока с разным кодом. Первый фрагмент нужно скопировать и вставить как можно выше в код страницы в HTML-тег < head >. Второй вставьте сразу после HTML-тега < body >.
Примечание. Указанные выше HTML-теги – это теги разметки страницы, их не стоит путать с тегами, с помощью которых добавляется функционал на сайт (которыми и позволяет управлять GTM).
Добавление и настройка тегов
На вкладке Рабочая область нужно выбрать Теги в меню слева, и затем нажать на Создать. Откроется окно создания тега.
У каждого тега есть два блока настроек: конфигурация тега и его триггеры. Чтобы тег активировался, для него должен быть настроен хотя бы один триггер, поэтому оба блока обязательны.
Активация тега в данном случае – это инициализация кода виджета FOQUZ, который запускает проверку на то, стоит отобразить виджет или нет в зависимости от выставленных настроек виджета.
Конфигурация тега – это типы настроек логики работы тега. По сути это ответ на вопросы «Что и как должно происходить». В нашем случае достаточно перейти в настройки конфигурации и выбрать тип Пользовательские HTML-теги (остальные типы не нужны), после чего вставить код нашего виджета в появившееся поле ввода HTML.
Можно также выполнить Расширенные настройки конфигурации тега, но на текущем этапе это необязательно.
Триггер – это условие проверки каких-либо событий, произошедших на сайте (загрузка страницы, клик, время на странице и др.). Все теги в GTM активируются только в ответ на какие-то события. Триггеры позволяют эти события отслеживать. Все доступные в GTM триггеры.
Для первого раза выберите триггер Инициализация и оставьте включённым чек-бокс Все события инициализации. Такой триггер позволит активировать тег при каждой инициализации кода страницы, то есть еще до загрузки страницы.
Опубликуйте теги
На вкладке Рабочая область нажмите Отправить и появившемся окне выберите вариант публикации:
Публикация и создание версии: сохраняет все выполненные настройки в конкретную версию и автоматически вносит изменения на сайт;
Новая версия: также сохраняет все выполненные настройки в определенную версию, но не публикует изменения на вашем сайте.
После чего нажмите Опубликовать. Если до этого выбрали Публикацию и создание версии, то с этого момента вы можете проверять итоговый результат добавления виджета FOQUZ к себе на сайт.
Основные триггеры
Различные типы триггеров помогают проверять различные условия, при выполнении которых должен активироваться тег (код виджета опроса). Ниже мы описали лишь часть из них.
Это триггеры, которые устанавливают проверку условий по загрузке страницы. Все они срабатывают при загрузке страницы, и для каждого из них определяется момент активации тега.
Триггер инициализации согласия запускает проверку статуса согласия на хранение и обработку файлов cookie. Он срабатывает до активации всех остальных тегов.
Примечание. Этот триггер не используется для тегов, которые должны активироваться на самых ранних этапах загрузки страницы. Поэтому при создании пользовательских HTML тегов нужно реализовать возможность доступа к функционалу согласия как можно раньше. Для этого нужно использовать API GTM.
установка статуса согласия на передачу в Google пользовательских данных, связанных с интернет-рекламой;
установка статуса согласия на персонализацию рекламы;
разрешение на сохранение cookie файлов, связанных с аналитикой (например, время просмотра страницы);
разрешение сохранять данные, связанные с функционалом сайта (например, языковые настройки);
разрешение сохранять данные, связанные с персонализацией (например, рекомендации услуг/статей);
разрешение сохранять данные, связанные с безопасность (например, аутентификация).
Триггер инициализации страницы срабатывает до активации всех тегов, но после триггера согласия. Под инициализацией подразумевается создание в памяти браузера JS-объекта.
Просмотр страницы инициализирует код виджета опроса в момент, когда начинается загрузка страницы.
Модель DOM готова. Триггер активирует тег, когда браузер завершает обработку HTML-кода страницы.
Окно загружено. Тег активируется после полной загрузки страницы, включая изображения, скрипты и другие встроенные объекты.
Устанавливает Глубину вертикальной и горизонтальной прокрутки в процентах или пикселях. Такой триггер срабатывает только один раз при достижении указанной отметки (то есть, если сначала дойти до нее, вернуться вверх, а затем снова дойти до отметки, то тег повторно не инициализируется.
Примечание. Если ваша страница имеет динамическую (бесконечную) прокрутку или вы используете один шаблон для страниц с сильно отличающимися размерами, то лучше использовать триггер видимости элементов.
Позволяет настроить активацию тега на основе изменения истории посещения. Учитывает старый и ** новый** фрагменты URL истории. Вместе с этим с помощью него можно отслеживать изменение хеша на страницы (фрагмента URL, через который можно передавать состояние страницы, например, конкретное место на ней).
Позволяет настроить проверку по каким-либо кастомным событиям, для которых не подходят стандартные методы триггеров. В типе триггера выберите Специальное событие, чтобы начать его настройку.
В его конфигурации достаточно выбрать название события и, при необходимости, включить Использование регулярных выражений, чтобы была возможность использовать сложный поиск названия события.
Для передачи события нужно вставить в проект код, который будет отправлять событие при каком-либо действии. Для этого в GTM используется метод dataLayer.push() , через который можно передавать как название события, так и какие-либо другие переменные.
Другие триггеры
Типы условий триггеров
Для большинства триггеров можно установить условия активации тега с помощью четырех типов:
Page Hostname: домен страницы, например, foquz.ru или yourcomany.foquz.ru;
Page Path: расположение страницы на домене (папки). Это часть URL с конца домена, до начала строки запроса. Например, в ссылке foquz.ru/foquz/user-wiki?test=1, Path – это либо “/foquz”, либо “/foquz/user-wiki’”, либо “/user-wiki”;
Page URL: это конкретный URL страницы, включая домен, расположение, запросы;
Refferer: заголовок страницы, которое содержит источник, через которых посетитель попал на сайт.