Google tag manager установка и настройка

Gtm Google Tag Manager или же Диспетчер тегов – это бесплатный инструмент, позволяющий с легкостью управлять работой с тегами на сайтах и в мобильных приложениях. С его помощью вы сможете менять исходные коды на веб-страницах, добавлять новые фрагменты и отключать лишние, взаимодействовать с рекламными сервисами и аналитическими системами, настраивать пиксели для сбора сведений о целевой аудитории, запускать тестирования и выполнять любые другие действия, требующие размещения JavaScript. Код Диспетчера тегов устанавливается на сайт один раз. Все остальные настройки можно проводить самостоятельно, не привлекая программистов.

К числу других преимуществ этого сервиса стоит отнести доступность и простоту использования, высокую функциональность, наличие единого пространства для управления тегами, а также возможность сохранить контейнер в определенной версии и вернуться к нему позже. А самое главное, вы сможете обойтись без привлечения специалистов – процесс установки происходит в автоматическом режиме, что исключает появление ошибок.

Регистрация в Гугл Тег Менеджер

Если вы не знаете, как установить Google Tag Manager на сайт или в приложение, воспользуйтесь этой пошаговой инструкцией:

1. Зайдите на главную страницу Диспетчера тегов и нажмите на «Регистрация».
2. Авторизуйтесь через почту Gmail или любой другой аккаунт Google.
3. Создайте профиль в GTM и укажите всю необходимую информацию (название, целевую платформу, страну, имя контейнера).
4. Поставьте «птичку» возле надписи «Передавать анонимные данные в Google и другие службы» и нажмите «Дальше».
5. Настройте контейнер – это то место, в котором будут храниться триггеры, теги и переменные. В одном аккаунте GTM может быть несколько контейнеров – для приложения, ресурса, AMP-страниц и т. д. Чтобы не путаться в дальнейшем, называйте контейнеры именами тех ресурсов, для которых они создаются.
6. Выберите, где будет использоваться контейнер.
7. Кликните по «Создать».
8. Изучите правила и подтвердите свое согласие на обработку личных данных.
9. Скопируйте сгенерированный код Google Tag Manager. Его можно добавить сразу на все страницы ресурса или нажать «Ок» и сделать это уже после того, как в контейнер будут добавлены первые теги. В последнем случае нужно зайти в меню «Администрирование» — раздел «Установить Диспетчер тегов Google».

Настройка Google Tag Manager

Базовая настройка Google Tag Manager включает в себя несколько этапов. Рассмотрим каждый из них.

Настройка переменных

Переменными в GTM называют параметры с определенными значениями, которые передаются в процессе работы. Они бывают 2 видов. Рассмотрим каждый из них:

1. Встроенные – страницы, ошибки, утилиты, клики, формы, история. Они настроены по умолчанию и уже готовы к работе. Как добавить их на сайт? Просто нажмите на нужную переменную – она начнет работать в автоматическом режиме.
2. Пользовательские. Список с пользовательскими переменными у всех будет пустым. Для его заполнения нажмите кнопку «Создать» — перед вами откроется дополнительный раздел с различными настройками.

Настройка триггеров

Триггер – специальный инструмент, который активизирует или блокирует тег, а также позволяет настроить под него фильтры (например, показ URL страниц, на которых должен срабатывать тег). Он включает в себя определенное событие (например, Google Tag Manager Tilda) и содержит несколько важных параметров:

1. Просмотр страницы:

• Модель DOM готова – выполняется при загрузке веб-страницы;
• Окно загружено – в этом случае просмотр фиксируется только при полной загрузке страницы и всех расположенных на ней элементов;
• Просмотр страницы – активируется тогда, когда пользователь переходит на страницу.

2. Клик:

• Все элементы – действие по любому элементу;
• Только ссылки – действие по клику на ссылку.

3. Взаимодействия пользователей:

• Видео на YouTube – срабатывает при просмотре видеороликов;
• Видимость элемента – срабатывает тогда, когда тот или иной элемент становится видимым, отследить его можно по CSS-селектору или ID элементу;
• Глубина прокрутки – позволяет вычислить скролл страницы в горизонтальной и вертикальной прокрутке.
• Отправка формы – триггер будет запускаться только при отправке форм. При желании срабатывание можно настроить на успешные действия.

4. Другое:

• Изменение в истории – отслеживает любые перемены в хэше URL-страницы;
• Группа триггеров – позволяет объединить в одну группу несколько разных триггеров;
• Ошибка JavaScript – активизируется при появлении ошибки в исходном коде JavaScript. Здесь также есть возможность настроить триггер на ошибку в определенной строке кода;
• Специальное событие – если стандартный тип триггера «Отправка формы» не сработал, можно использовать любое другое пользовательское событие (например, установку кода Google Analytics и Яндекс.Метрики для отслеживания формы);
• Таймер – предназначен для запуска события через заданный промежуток времени. Например, таймер для продления отслеживания сеанса Google Analytics может срабатывать каждые 25 минут.

Настройка тегов

Теги – часть кода JavaScript, которую нужно выполнить. С помощью этой операции очень удобно отслеживать трафик и поведение посетителей, анализировать эффективность рекламы, таргетинга и ремаркетинга.

Как настроить теги? Для этого перейдите в раздел с соответствующим названием и нажмите кнопку «Создать». Перед вами откроется меню конфигуратора, в котором есть два разных блока – «Триггеры» и «Конфигурация тега». Для начала перейдите во второй и изучите его содержимое. В этом блоке можно выбрать тег, который полностью отвечает нужному интернет-сервису. Для примера возьмем Universal Analitics от Google Аналитика.

Перед вами откроется окно с настройками для выбранного тега. Так как сейчас мы будем пользоваться сервисом Google Analytics, необходимо добавить идентификатор его отслеживания. Сделать это очень просто – разрешите системе включать переопределение настроек в данном теге и введите его значение. Идентификатор отображается в профиле Google Analytics («Администратор» — «Настройки ресурса» — «Идентификатор отслеживания»).

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

Теперь останется только опубликовать контейнер с созданным тегом. Сделать это можно на главной странице – просто выберите «Отправить». Сразу после этого откроется новое окно. В нем необходимо указать название версии, привести ее описание и кликнуть на «Опубликовать». И не забудьте проверить отчеты Гугл Аналитики в настоящем времени.

Другие функции GTM

Настройка целей через Google Tag Manager может выполняться и с добавлением других систем аналитики – Яндекс.Метрики, ВКонтакте, Facebook и др. Их коды добавляются в контейнер по тому же принципу, но в этом случае понадобится создать пользовательский тег. Зайдите в соответствующий раздел и вставьте в поле HMTL код счетчика метрики или другой аналитики. Найти его можно в справке той или иной системы. Так, в Яндекс.Метрике он находится в нижней части экрана среди настроек счетчика.

После этого добавьте триггер All Pages и опубликуйте его на веб-ресурсе – все, как в предыдущем пункте. Для проверки работы тега воспользуйтесь встроенным предварительным просмотром GTM (включается на экране «Обзор») – отчета о посещениях в режиме реального времени в данной аналитической системе нет.

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

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

Установка dataLayer также проводится с помощью JavaScript. После этого обязательно прописывается инициализирующий код GTM. Чтобы его содержимое отображалось правильно, необходимо изначально определить все имеющиеся на странице типы информации (элементы управления, поля контактных форм, категории и ID товаров, данные профиля пользователя, состав корзины и т. д.).