google tag manager обучение

Как использовать Google Tag Manager

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

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

Давайте разберемся, что умеет этот инструмент и как им воспользоваться.

Что такое Google Tag Manager

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

Стоит также понимать, что GTM – это не единственный сервис в своем роде, существуют такие системы, как Tealium, Adobe Dynamic Tag Manager, Yahoo Tag Manager. Но почему же все выбирают Google? Рассмотрим далее.

Почему Google Tag Manager

Обычно выделяют следующие преимущества сервиса:

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

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

Первое, что от нас потребуется, – это пройти регистрацию и разместить код контейнера на своем сайте. Давайте быстренько сделаем это, а затем уже перейдем к основным настройкам. Так сказать, будем знакомиться по ходу дела.

В данном случае файл, в котором был прописан код, называется index.html. Также он может именоваться как header.php или как-то иначе, если сайт расположен на CMS.

Основные параметры

Прежде чем переходить к настройкам сервиса, давайте остановимся на некоторых понятиях, относящихся к GTM. Это контейнер, тег, триггер и переменная – именно они нас встречают на главной странице сервиса.

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

Объясняю на пальцах: в каждом аккаунте есть как минимум один контейнер. В нем располагается один или несколько тегов – например, код Google Analytics. Для него устанавливается триггер, который определяет условия срабатывания тега и отправки им данных. После того как триггер срабатывает, он считывает определенную переменную. Например, встроенная переменная Click Text содержит текст, а Click URL — URL. Данный триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.

Именно с переменных и начинается базовая настройка Google Tag Manager.

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

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

Процесс настройки довольно прост. По умолчанию у нас уже установлены некоторые переменные, готовые к работе – посмотреть их можно в разделе «Переменные».

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

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

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

Пройдемся по каждому типу встроенных переменных:

Для того чтобы добавить новую переменную, достаточно отметить ее в меню конфигуратора, после чего она автоматически отобразится в рабочей области.

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

Для начала давайте рассмотрим основные параметры триггеров, а затем перейдем к их настройке. Всего их 4 типа:

Просмотр страницы

Клик

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

Другое

Вот такой функционал поддерживают триггеры. Давайте создадим один триггер, который будет взаимодействовать с переменной. Для этого выполним следующее:

Готово! Мы создали свой первый триггер. При необходимости вы можете настроить более точное срабатывание с помощью дополнительных параметров.

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

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

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

В меню конфигуратора мы увидим два блока «Конфигурация тега» и «Триггеры». Первым делом нам понадобится верхний раздел – перейдем в него и посмотрим, что там находится.

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

Здесь мы можем выбрать один из тегов, который соответствует нужному нам сервису. Пусть это будет «Google Аналитика: Universal Analitics».

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

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

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

Теперь нам нужно привязать к этому тегу триггер – для этого на этой же странице открываем блок «Триггеры» и выбираем тип отслеживания просмотра страниц «All Pages». В данном случае мы используем триггер, который был автоматически сгенерирован сервисом. Если вы ранее создавали собственный тег, то можете добавить его, но только в том случае, если он подходит под данное действие.

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

В завершение сохраняем созданный нами тег.

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

Готово! Тег был создан, теперь давайте проверим его работоспособность – для этого в Google Tag Manager есть специальная функция «Предварительный просмотр».

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

На отобразившейся странице вводим ссылку на свой сайт и жмем «Start».

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

После этого будет выполнен переход на сайт. Если на панели отладки появится тег, то поздравляю. Все получилось!

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

Осталось опубликовать контейнер с созданным тегом. Для этого на главной странице выбираем «Отправить».

google tag manager обучение. Смотреть фото google tag manager обучение. Смотреть картинку google tag manager обучение. Картинка про google tag manager обучение. Фото google tag manager обучение

На этом настройка Google Tag Manager завершена. Как только вы нажмете на кнопку «Отправить», перед вами отобразится новое окно, в котором можно указать название версии и ее описание. После внесения изменений останется нажать на кнопку «Опубликовать».

Теперь вы знаете, как можно использовать Google Tag Manager. Спасибо за внимание!

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *