Европейские методы пополнения: Paypal и банковский перевод с VAT Подробнее

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

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

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

Что такое Google Tag Manager

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

Подробнее о том, что такое Google Tag Manager и как он работает в связке с Google Analytics, вы можете узнать в нашей статье. Не будем терять времени и перейдем к установке GTM.

Если кратко, то для установки Google Tag Manager вам потребуется:

1. Создать аккаунт и контейнер в Google Tag Manager.

2. Установить код Google Tag Manager на сайт.

3. Опубликовать контейнер.

4. Проверить работу Google Tag Manager.

Для каких целей используется GTM?

Сервис помогает в решении огромного количества задач, благодаря ему:

  • мониторят клики по кнопкам соцсетей; 
  • внедряют микроразметку; 
  • контролируют переходы на сайт по внешним линкам; 
  • отслеживают взаимодействие с формой контактов; 
  • мониторят определенные каналы трафика извне; 
  • следят за показателями отказов.

Как создать аккаунт и контейнер в Google Tag Manager?

Шаг 1. Перейдите на сайт сервиса Google Tag Manager → На стартовой странице Диспетчера тегов нажмите кнопку «Начать бесплатно». 

Шаг 2. Войдите, используя свой Gmail адрес или любой другой Google аккаунт.

Как установить на сайт и настроить Google Tag Manager. Пошаговая инструкция

Шаг 3. Теперь нужно завести аккаунт непосредственно в Диспетчере тегов. Для это нажмите «Создать учетную запись» или круглую картинку в центре:

Установка на сайт и настройка Google Tag Manager. Инструкция

Шаг 4. Придумайте название для аккаунта — здесь удобнее всего использовать название вашей компании. Затем выберите страну, установите галочку напротив «Передавать анонимные данные в Google и другие службы» (опционально), выберите целевую платформу, к примеру Интернет и нажмите «Создать»:

Google Tag Manager. Что это

Так мы настроили контейнер. Если сравнивать структуру Google Tag Manager со структурой Google Analytics, то контейнер — это аналог ресурса в GA. В нем хранятся теги, триггеры и переменные для всего сайта. В одном аккаунте GTM может быть несколько контейнеров: для сайта, для мобильного приложения, для AMP-страниц и т.д. Чтобы было удобно, контейнер лучше назвать именем того ресурса, для которого он создается. К примеру, это может быть адрес вашего сайта. 

Шаг 5. Ознакомьтесь с правилами использования Диспетчера тегов. Поставьте галочку внизу страницы, подтверждающую, что вы согласны с условиями обработки данных в соответствии с GDPR, и нажмите кнопку «Да»:

Понятие Google Tag Manager

Шаг 6. После этого вы увидите окно с фрагментом кода GTM, который нужно установить на ваш сайт:

Определение Google Tag Manager

Вы можете сразу скопировать код и установить его на все страницы сайта, которые хотите отслеживать, или нажать «Ок» и сделать это позже, когда добавите в контейнер первые теги. Посмотреть и скопировать код можно в любой момент в меню «Администрирование» → «Установить Диспетчер тегов Google»:

Какие цели применения GTM

Как установить код Google Tag Manager на сайт?

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

Шаг 1. Код Google Tag Manager состоит из двух фрагментов и загружается асинхронно. То есть основная часть страницы продолжает загружаться, не дожидаясь загрузки GTM контейнера. Первую часть кода необходимо разместить в хедер страницы, как можно ближе к открывающему тегу <head>:

Как создать аккаунт и контейнер в Google Tag Manager. Пошаговая инструкция

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

Шаг 2. Вторая часть кода работает как резервная и помогает отслеживать действия пользователей, у которых отключен JavaScript. Ее нужно расположить сразу после открывающего тега <body>:

Создание аккаунта и контейнера в Google Tag Manager. Инструкция

Важно! Код GTM должен быть размещен непосредственно на странице, которую вы собираетесь отслеживать, другими словами на всем вашем сайте. Размещение кода в скрытом iframe или его развертывание в другой системе управления тегами не позволит корректно отслеживать теги на основной странице.

Особенности установки Google Tag Manager на AMP страницы

Если вы используете технологию AMP для быстрой загрузки и адаптации страниц под мобильные устройства, то первую часть кода нужно разместить перед закрывающим тегом </head>:

Как установить код Google Tag Manager на сайт. Пошаговая инструкция

А вторую часть кода следует вставить сразу после открывающего тега <body>:

Установка кода Google Tag Manager на сайт. Инструкция

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

Даже если вы не добавили в контейнер ни одного тега, рекомендуем опубликовать его сразу после установки кода GTM на сайт. Иначе контейнер будет вызывать ошибку 404. Это не критично, однако если вы отслеживаете JavaScript ошибки с помощью определенных сервисов, например TrackJS, то ошибки 404 будут отображаться в отчетах и засорять их. Чтобы не вызывать лишний стресс у разработчиков, лучше опубликовать пустой контейнер — это никому не навредит.

Шаг 1. Чтобы опубликовать контейнер, зайдите на вкладку «Рабочая область» в Диспетчере тегов и нажмите кнопку «Отправить» в правом верхнем углу:

Какие есть особенности установки Google Tag Manager на AMP страницы

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

  • Контейнер – это некая оболочка, где хранятся все теги сайта или мобильного приложения. Его основной контент – код, используемый на сайте и отвечающий за активацию тегов прочих ресурсов. 
  • Тег – часть кода JavaScript, которую необходимо выполнить. С помощью данной операции можно провести отслеживание трафика и поведения посетителей, анализ эффективности рекламы, ремаркетинга и таргетинга. 
  • Триггер – выполняет или блокирует тег. Он включает в себя определенное событие, например, загрузку страницы или переход по ссылке. Также триггер позволяет настроить фильтры; один из них – показ URL страниц, где должен срабатывать тег. 
  • Переменная – основной параметр, получающий определенные значения.

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

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

Шаг 2. Выберите пункт «Публикация и создание версии». Поскольку это первая версия вашего контейнера, поле «Описание версии» можно не заполнять. Далее нажмите «Опубликовать»:

Как опубликовать контейнер. Пошаговая инструкция

Готово, контейнер опубликован.

Как проверить работу Google Tag Manager?

Шаг 1. После добавления кода Диспетчера тегов на сайт вы можете проверить, корректно ли передаются данные, с помощью специального аддона Google Tag Assistant → Это дополнение к браузеру Chrome, которое показывает, какие теги продуктов Google установлены на вашем сайте и как они работают.

Опубликование контейнера. Инструкция

Шаг 2. После того, как вы скачаете и установите аддон, у вас на панели инструментов в браузере появится вот такой значок Как проверить работу Google Tag Manager. Пошаговая инструкция. Кликните по нему и выберите, теги каких систем вы хотите проверять и на каких страницах. Нажмите «Done».

Проверка работы Google Tag Manager. Инструкция

Шаг 3. Затем перейдите на страницу, которую хотите проверить, и кликните по значку Tag Assistant. Чтобы активировать аддон, нажмите кнопку «Enable»:

Полезные советы по работе с Google Tag Manager

Шаг 4. Обновите текущую страницу, и Tag Assistant покажет, какие теги установлены на странице и как они работают. Зеленый цвет значка говорит о том, что данные передаются без нареканий, синий — что есть не критичные рекомендации, красный сигнализирует о серьезных проблемах:

Плюсы Диспетчера тегов

Если кликнуть по конкретному тегу, вы увидите возможные причины ошибки и подсказки, как ее исправить:

Минусы Диспетчера тегов

Больше информации о Tag Assistant вы найдете в справке Google.

Несколько полезных советов по работе с Google Tag Manager

При установке кода GTM на сайт попросите разработчика добавить заодно и сниппет Google Optimize. Это не будет лишним, даже если сейчас вы не собираетесь экспериментировать с контентом сайта. Зато потом, когда вы захотите провести A/B тест, все уже будет готово.

Этот фрагмент кода нужен, чтобы асинхронно загружать контейнер Google Optimize и не показывать оригинальную страницу до тех пор, пока не загрузится контейнер. Таким образом пользователи не будут видеть исходный контент страницы, пока не загрузится страница с изменениями.

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

Плюсы и минусы Диспетчера тегов

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

  • GTM — полностью бесплатный инструмент.
  • Огромное количество готовых интеграций с другими сервисами. Перечень всех поддерживаемых тегов вы можете посмотреть в справке. 
  • Диспетчер тегов положительно влияет на скорость сайта — код становится короче, благодаря чему страницы загружаются быстрее.
  • В GTM есть режим проверки и отладки. Вы можете протестировать работу тегов прежде, чем добавлять их на сайт.
  • Google Tag Manager сохраняет все изменения в настройках. Вы в любой момент можете вернуться к предыдущей версии, если опубликовали код с ошибками, например. Также можно узнать, кто именно, когда и какие изменения внес.
  • Удобная совместная работа — вы можете выдать доступы разного уровня к аккаунту в Диспетчере тегов своим сотрудникам или маркетологам из рекламного агентства, с которым вы сотрудничаете.
  • С помощью GTM легко подтвердить права на сайт для Search Console.
  • У Диспетчера тегов есть большое комьюнити, официальный форум и справка, где вы всегда найдете ответ на свой вопрос.

К недостаткам Google Tag Manager можно отнести такие пункты:

  • Если при внесении правок случайно повредить код контейнера GTM, то все теги, развернутые с его помощью, перестанут работать. Придется искать ошибку в коде и исправлять.
  • Для установки кода GTM на сайт и более гибких настроек (например, пользовательских тегов) необходимо знание HTML, JavaScript и DOM.
  • Нет онлайн-поддержки и отчетов внутри сервиса.

Похожие вопросы

Похожие вопросы

  • Google Search Console

    Как работать в Google Search Console. Советы и рекомендации
    12 вопросов
  • SEO пузомерки

    Ключевые метрики SEO: где и как смотреть
    7 вопросов
  • Для новичков

    Ответы на самые часты вопросы SEO-специалистов уровня junior
    22 вопроса
  • Линкбилдинг

    Все про построение ссылочного профиля, крауд-маркетинг и аутрич
    10 вопросов
  • Для опытных

    Вопросы для продвинутых SEO-специалистов и новые подходы в SEO
    12 вопросов
  • Контент

    Вопросы по SEO-копирайтингу. Какими должны быть SEO-тексты
    4 вопроса
  • Другое

    Общие вопросы по SEO. Все, что связано с поисковой оптимизацией
    1 вопрос