Телеграм-канал основателя Checkroi — Вани Буявца

Посмотреть →
Агрегатор онлайн-курсов Checkroi.ru Блог Рубрики Настройка Google Tag Manager с нуля: как установить и пользоваться

Настройка Google Tag Manager с нуля: как установить и пользоваться

Опубликовано: Страница обновлена: 988 просмотров Время прочтения: 12 минут

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

Как работает Google Tag Manager

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

Как работает Google Tag Manager

Tag Manager работает с 80 различными сервисами: яндекс.метрикой, гугл-аналитикой, линкедином, твиттером и др.

Чтобы разобраться в работе сервиса нужно понимать некоторые термины. Вот основные:

  • Контейнер — хранилище кода всех сторонних сервисов, которые вы через GTM подключите к сайту. Выглядит это как строки кода, написанного на языке Javascript.
  • Тег — фрагмент кода приложения, который будет выполняться. Это то, что будет подключаться к внешнему серверу системы аналитики. Тег отслеживает трафик, поведение посетителей, анализирует эффективности рекламы, задействует ремаркетинг и таргетинг.
  • Триггер — условие, при котором начинает выполняться или блокироваться тег. Когда страница загружается, срабатывает триггер, который уже запускает тег с целевым действием.
  • Переменная — блок с информацией, параметр, значение для которого передаётся в процессе работы.
Телеграм-канал Вани Буявца

Кому и когда нужен сервис

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

  • Владельцам маленьких сайтов настройка Google Tag Manager позволит сэкономить на услугах программиста и самостоятельно управлять системами аналитики.
  • Интернет-маркетологам поможет внедрить и настроить программы аналитики на сайт клиента и отслеживали их показатели.
  • Таргетологам и экспертам контекстной рекламы поможет оценить результаты рекламных объявлений и догнать аудиторию, которая пришла на сайт, но не совершила целевого действия.

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

Tag Manager — это бесплатный сервис Google, разобраться и работать с ним может каждый владелец сайта самостоятельно. Вот основные плюсы работы с сервисом.

Плюсы

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

В работе с сервисом нужно знать основы языков HTML, CSS и Javascript, а чтобы освоить некоторые функции — понадобится время. Перечислим возможные трудности в работе.

Минусы

  • если вы вносили правки на сайт и повредили код самого контейнера, то любой тег, привязанный к нему, перестанет действовать;
  • чтобы выложить код сервиса на сайт и работать с более тонкими настройками, нужны знания в JavaScript и HTML;
  • Google Tag Manager — это сервис для внедрения других служб. Самой аналитики и отчётов там нет.

Как зарегистрироваться в Google Tag Manager

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

Шаг 1. Зайдите на официальный сайт Tag Manager.

Шаг 2. Если вы не авторизованы в Google, зарегистрируйте новый аккаунт, а если зарегистрированы — войдите в свой.

Шаг 3. Создайте аккаунт — нажмите на кнопку в верхнем правом углу.

Кнопка «Создать аккаунт»

Кнопка «Создать аккаунт»

Шаг 4. Заполните данные: название аккаунта, страну и согласие на передачу данных. Далее укажите название контейнера — лучше указать сайт, для которого вы его делаете. Затем выберите «Целевую платформу» — веб-сайт, IOS, Android, AMP или Server. Настройка завершена — нажмите «Создать».

Когда настройка завершена — нажимаем «Создать»

Когда настройка GTM завершена — нажимаем «Создать»

Шаг 5. Перед вами появится пользовательское соглашение — прочитайте и подтвердите.

Шаг 6. Подождите, пока сгенерируется код. Чтобы его скопировать, нажмите на значок в правом верхнем углу каждого фрагмента.

Скопировать код можно в два клика

Скопировать код можно в два клика

Шаг 7. Окно с кодом можно закрыть, он сохраняется в личном кабинете. Нажмите на его название в верхней строке.

Расположение окна с кодом

Расположение окна с кодом

Шаг 8. Теперь можно установить код диспетчера на сайт. Добавьте код диспетчера на главную страницу сайта через любой HTML-редактор. Первая часть должна быть около тега <header>, вторая после <body>.

Если возникнут проблемы, обратитесь к разработчику или системному администратору сайта.

Как настроить Google Tag Manager

Настройку Tag Manager начните с левой колонки. Работает следующая цепочка: в каждом аккаунте есть контейнер → в нём находятся теги → каждый тег обладает триггерами → триггеры срабатывают на переменные. Настройку Tag Менеджера начинают с конца этой цепочки.

Начните настройку с тегов, триггеров и переменных

Начните настройку с тегов, триггеров и переменных

Как настроить переменные

Перейдите в раздел меню с соответствующим названием. Есть два понятия: встроенные и пользовательские переменные. Нас интересуют первые, переходим в «Настроить».

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

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

Сейчас среди переменных в Tag Менеджере есть 44 позиции: посмотреть полный список можно посмотреть в разделе Справка → «Встроенные переменные для веб-контейнеров». В меню поставьте галочки выбора. Когда закончите, нажмите на поле экрана, чтобы меню слева исчезло.

Конфигурация встроенных переменных

Конфигурация встроенных переменных

Только теперь можно приступить к созданию триггера. В его фильтре будут доступны те переменные, которые вы установили.

Как настроить триггеры

В левом меню выберите раздел «триггеры» и нажмите «Создать».

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

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

Заполните название и нажмите на значок настройки в центре страницы. В меню выберите событие.

Меню типа триггеров

Меню типа триггеров

Учитывайте, что триггеры бывают четырёх видов:

  1. Просмотр страницы — срабатывает когда пользователь нажал на ссылку, и страница стала загружаться.
  2. Клики — фиксируется нажатие на кликабельную ссылку страницы сайта.
  3. Взаимодействие пользователей — фиксируются данные взаимодействия: как глубоко пользователь прокрутил страницу, когда пользователь заполнил и отправил форму и др.
  4. Другие события — реагирует на ошибки кода и на заданные пользовательские события.

Для примера выберем триггер «Просмотр страницы». Нам не требуются «Все просмотры страниц», поэтому перенесём точку в позицию «Некоторые просмотры страниц».

Настройка триггера «Просмотр страницы»

Настройка триггера «Просмотр страницы»

В строке укажем страницу, которая нам интересна. Но для начала выберем переменную — условие, при котором срабатывает триггер. Мы Выберем «Page URL».

Выбор условия для триггера

Выбор условия для триггера

Во втором столбце выберем нужный параметр. Мы хотим указать конкретный адрес, поэтому установим значение «Равно».

Выбор дополнительного параметра

Выбор дополнительного параметра

Осталось написать адрес страницы. Выполняем.

Указание адреса страницы

Указание адреса страницы

Триггер «Просмотр страницы» срабатывает только в том случае, когда пользователь открывает страницу Checkroi.ru. Если вы хотите добавить ещё одну страницу в этот список, нажимаем на плюсик в конце строки.

Добавление новой страницы в список

Добавление новой страницы в список

На просмотр всех указанных страниц будет одна и та же реакция. Теперь нажимаем «Cохранить» и видим свой новый триггер в списке.

Финальный вид триггера в списке

Финальный вид триггера в списке

Как настроить тег в GTM

Выберите строку «Теги» в левом меню и нажмите «Создать».

Меню тегов

Меню тегов

Напишите название и нажмите на значок в центре поля «Конфигурация тега».

Выбор конфигурации тегов

Выбор конфигурации тегов

Выберите приложения, которые вы хотите привязать к своему сайту. Скажем, Google Analytics.

Выбор приложений

Выбор приложений

Чтобы запустить сервис, потребуется идентификатор отслеживания. Как его найти:

  1. Зайдите в Google Analytics.
  2. В левом меню выберите раздел «Администратор».

Раздел «Администратор» в нижнем левом углу

Раздел «Администратор» в нижнем левом углу

  1. Найдите строку «Настройки ресурса» и нажмите на неё.

Раздел «Настройка ресурса»

Раздел «Настройка ресурса»

  1. Скопируйте идентификатор отслеживания.

Добавление идентификатора отслеживания

Добавление идентификатора отслеживания

Теперь вернёмся к Tag Manager.Заполните строки так: оставьте «Просмотр страницы», поставьте галочку в строке, введите тот самый идентификатор и нажмите на выбор триггера.

Схема настройки тегов

Схема настройки тегов

Диспетчер предложит вариант All Pages — все страницы или триггер, который мы делали до этого. Если нужно отслеживать весь сайт, выберите первый вариант. Если вы настроены получать данных только с определённых страниц, установите свой триггер.

Выбор страниц для триггеров

Выбор страниц для триггеров

Осталось нажать «Сохранить» — готово.

Как проверить привязанные к сайту приложения

Нажмите на «Предварительный просмотр» в верхней строке.

Предварительный просмотр подключённых сервисов

Предварительный просмотр подключённых сервисов

Если всё сделано верно, в браузере загрузится сайт, для которого вы создали контейнер, и внизу страницы вы увидите данные о подключённых сервисах. В нашем случае это только Google Analytics.

Подключённый сервис появляется в списке

Подключённый сервис появляется в списке

Теперь можно публиковать контейнер — запускать его в действие.

Как опубликовать контейнер

На обзорной странице нажмите «Отправить» в верхнем правом углу.

Как опубликовать контейнер

Как опубликовать контейнер

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

Заполнение данных перед отправкой на публикацию

Заполнение данных перед отправкой на публикацию

Хотите научиться оценивать эффективность работы сайта? Переходите в подборку курсов по веб-аналитике. Вы научитесь строить гипотезы и тестировать их, анализировать трафик, настраивать цели, освоите профессиональные инструменты.

Это всё — вы настроили на своём сайте первое приложение для анализа данных.

Google Tag Manager в связке с Google Analytics даёт вам гибкую систему аналитики и позволяет настроить сбор практически любых данных с сайта. По такому же принципу можно настраивать и другие приложения.

Расскажите, пользуетесь ли вы сервисом и если да — поделитесь, как настраивали его сами.

Телеграм-канал Вани Буявца, только внизу
0 Коментариев
1

Почитаем еще?

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

Мы иногда используем cookie-файлы, чтобы получше узнать вас и персонализировать контент :) Замечательно!