Как внедрить Google Tag Manager (GTM) на сайт и настроить, если ты новичок?

В статье рассматриваются следующие вопросы:

  1. Этапы внедрения Google Tag Manager на веб-сайт.
  2. Как подключается Google Analytics (сокращенно GA) через GTM-сервис.

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

Преимущества данного инструмента:

  • не увеличивает код сайта при добавлении различных целей;
  • удобный и простейший для восприятия интерфейс;
  • легкое тестирование созданного — достаточно только перейти в «режим предварительного просмотра» и проверить;
  • один раз «беспокоим» кодинг, размещая GTM;
  • бесплатно;
  • авторизация через Gmail.

Небольшой глоссарий:

  • Контейнер — это блок JS кода, который располагается на всех страницах ресурса/сайта. В нём содержатся данные о тегах, которые активируются в случае выполнения определённых действий (например, клик по кнопке или скроллинг на сайте). Их мы предварительно занесли в данные переменных и триггеры.
  • Тег — часть кодинга. Она даёт возможность проводить анализ поведения юзеров, отслеживать конверсию и т.п.
  • Триггер — дает знать, что пора активироваться «тегу» на сайте.
  • Переменные — изменяемые значения, которые используются в триггере. При изменении/активации переменных срабатывает «тег».

Этапы внедрения Google Tag Manager на веб-сайт (с фото)

1. Аккаунт в Google

Для начала понадобится зарегистрироваться или же авторизоваться в Google.

2. Регистрация в GTM

После пункта 1 (регистрации/авторизации) перейдите на страничку GTM и создайте аккаунт.

Добавление нового аккаунта в GTM

В новом появившемся окне указывайте имя контейнера. Выбирайте «Веб-сайт», если у вас сайт и нажимайте «Создать».

Установка и настройка GTM

Соглашайтесь с условиями GTM — «Да»

3. Размещение фрагмент кода Tag Manager на сайте

Данное окно с кодом появляется, как только принимаете условия.

Окно с кодом GTM

Код размещайте в файле шаблона вашего сайта, чтобы он присутствовал на всех страницах сайта. Первую часть кода вставляйте после открывающегося тега <head>, а вторую часть кода размещайте сразу после <body>.

Вставляем код GTM в код страницы

Если вы потеряли код или не записали его в блокнот (txt), то найти его можно в «Администрировании».

Если не записали код GTM

4. Проверка работоспособности GTM

Для этого вам понадобится Google Tag Assistant Recordings, который монтируется в Google Chrome. Установите его из магазина Chrome. После добавления у вас появится значок в виде флажка со смайлом 🙂

Если флажок зелёного цвета — всё ок, иначе — обращайтесь в справку Google. Не забудьте активировать ассистента — Enable!

Проверяем установку GTM

Google Analitics в GTM: установка, настройка

1. Регистрация Analytics от Google

В случае, когда у вас установлен счётчик GA, то просто пропускайте данный пункт. Иначе — регистрируйтесь.

Внимание! После того, как провели регистрацию счётчика, устанавливать на сайте его не требуется, вам пригодится только идентификатор UA-XXXXXXX. Если счётчик установлен и функционирует на сайте, то его необходимо будет убрать, после добавления его в GTM.

2. Входите в созданный чуть раньше GTM-акк и кликайте на «Добавить новый тег»

Добавляем новый тег для Google Tag Manager

3. Выбирайте тип тега из рекомендуемых — Universal Analytics

Выбираем Universal Analytic в GTM

4. Указывайте идентификатор счётчика, что получили в 1-м пункте, и тип отслеживания — «просмотр страницы»

ID можно посмотреть на сайте через код страницы или же в GA. Чтобы сделать это, зайдите в меню «Администратор» — раздел «Настройки ресурса».

Смотрим код аналитики на сайте

Заполняйте данные.

Выбираем тип отслеживание и индетификатор аналитики для GTM

5. Выбирайте триггер под названием «All Pages»

Указываем триггер

6. Проверяйте и сохраняйте изменения, не забывая дать имя тегу

Проверяем и сохраняем настройки

7. Проверка на работоспособность тега

Выбирайте «Предварительный просмотр»

Проверяем работоспособность тега

Проверяем работоспособность тега

В данном режиме проверка доступна только в пределах браузера, в котором вы сейчас находитесь. Открывайте на новой вкладке ваш сайт и прокручивайте страницу вниз до футера (подвала).

Открываем на новой вкладке наш сайт и скроллим

Контейнер Universal Analytic должен находится под строчкой «Tags Fired On This Page». Если у вас так же, значит, все сделано верно.

Выходим из предварительного режима

8. Публикация контейнера

После того, как проверили работоспособность тега, вы его публикуете.

Публикуем

После всех процедур вы опубликовали и активировали счётчик аналитики через GTM без вмешательства в кодинг.

 

Читайте следующию статью: «Как отслеживать клики по кнопке через Google Tag Manager в Google Analytics и установить цели».

Комментарии

Оставьте комментарий