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

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

Что такое GTM

Google Tag Manager (GTM, Диспетчер/Менеджер Тегов) – инструмент для просмотра и быстрого изменения скрипта путем поиска нужного места и вставки фрагментов кода. GTM позволил владельцам сайтов не прибегать к услугам специалистов при доработке мелких деталей – любой человек, понимающий азы работы с веб-страницами, теперь может менять структуру своих ресурсов без вреда и угрозы их состоянию. Не потребуется знание HTML, JS и других языков – достаточно следовать инструкции, подробно описанной в данной статье.

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

Преимущества GTM для держателей сайтов:

• Бесплатно – Гугл не берет денег за использование своего инструмента;
• Доступно каждому – даже новичок может разобраться с механикой;
• Шанс ошибки сведен к минимуму – Менеджер поможет найти нужное место и расскажет, как правильно вставить тег;
• Экономия времени – за счет быстрой и упрощенной работы со скриптом;
• Упрощение установки пикселя Facebook, TikTok и других рекламных сетей, ведь пиксель – это такой же шаблон тега;
• Наличие готовых шаблонов тегов – под самый разный функционал;
• Передача данных в метрику – GTM интегрируется с Google Analytics, Яндекс Метрикой и другими системами анализа данных;
• Наличие API для работы с тегами и шаблонами, управлением аккаунтами и разрешениями.

Весь функционал Диспетчера Тегов описан на странице Google. Короткие фрагменты кода могут отвечать не только за внешние элементы вроде рекламных баннеров, форм и фрагментов контента, но и за невидимые простому посетителю параметры – A/B-тестирование, отслеживание конверсий и др. На одной из страниц есть небольшая презентация GTM со всеми достоинствами инструмента и пользой тегов.

Интеграция с сервисами также происходит через тег – для этого в таблице приведены все доступные шаблоны. Достаточно выбрать нужный инструмент, получить скрипт и вставить его в место, которое укажет Диспетчер. Он умеет работать не только с классическими веб-страницами, но и с AMP (ускоренные мобильные страницы), приложениями для Android и IOS. Вот-вот будет добавлена новая функция – работа с серверами.

Чтобы добавлять в скрипт любые теги, сначала нужно добавить главный фрагмент – тег самого Google Tag Manager. С его помощью система сможет подсказывать вам, куда вставлять последующие теги. Об этой настройке ниже.

Создание Менеджера Тегов

Пошаговый процесс запуска GTM описан в форме ответов Google. Здесь будут подробно описаны все этапы настройки сервиса.

• Войдите в аккаунт Google с помощью почты Gmail. Это можно сделать заранее либо на главной странице GTM. Профиль настройки пока что пустой – необходимо создать аккаунт.

Вход и создание аккаунта GTM

Аккаунт GTM – это профиль для работы с шаблонами (далее шаблон = тег). Нажмите на свободную область, придумайте название и укажите страну.

• Теперь нужно создать контейнер.

Создание контейнера тегов

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

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

Выберите платформу в зависимости от того, куда хотите добавить Контейнер – веб-сайт, приложение и т.д. Обратите внимание на сервер – разработка данной платформы находятся на стадии бета-тестирования, поэтому могут возникать ошибки. Для надежности можно воспользоваться одним из сервисов-аналогов GTM (Ensighten, Tealium Satellite, Tagman и др).

• По окончании первичной настройки нажмите “Создать”, согласитесь с Политикой обработки данных и всеми требованиями системы.

Новый аккаунт GTM создан и готов к работе, но впереди основная часть – манипуляции со скриптом Контейнера и шаблонами тегов.

Настройка шаблонов тегов

После создания Аккаунта и первого Контейнера, вы окажетесь в Диспетчере Тегов. Сразу появится окно. В нем система предоставляет главный скрипт – скрипт GTM.

Главный скрипт GTM

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

Более подробное объяснение этого и других этапов можно найти в Руководстве по настройке. Будет намного проще, если имеется базовое понятие о структуре сайта. Получить его можно бесплатно, например, на курсах от Яндекс Практикум за несколько часов.

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

Повторное открытие окна настройки GTM

Замазанная область – идентификатор. Для каждого Контейнера GTM он свой. Нажав на него, вы снова увидите окно со скриптами Контейнера.

Так выглядит добавление контейнера для веб-страниц и AMP. Установка для приложений происходит через Firebase SDK (Android и IOS).

Пора добавить на сайт дополнительные теги для улучшения работы сайта (собственно, для чего вы и зарегистрировались в GTM).

• Слева в меню навигации найдите кнопку “Теги”.

• Нажмите “Создать”.

• Задайте имя.

Приступите к настройке шаблона (тега). Она состоит из двух частей – создание фрагмента скрипта (непосредственно кода) и триггеров. Разберем каждый этап.

Конфигурация тега – это последовательность букв, цифр и символов. Вместе они сформируют шаблон (он же тэг и фрагмент скрипта).

Его можно получить тремя способами:

• Написать самостоятельно – потребуется немало знаний и усилий (по ссылке – настройка собственного тега);
• Найти на сторонних ресурсах – на других сайтах или у разработчиков;
• Взять из шаблонов GTM.

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

Кнопка “Подробнее” в окне Конфигурации отправит вас на страницу с информацией о тегах – она бессмысленна, но здесь есть ссылка на шаблоны, с которыми работает Google. Здесь весь список, их более 60 штук.

Поддерживаемые теги

В таблице представлены компании и их подразделы. Например, Для Гугла это Гугл Реклама и Гугл Аналитика. Нажав на любой подраздел, перейдем к информации о доступных тегах.

Поддерживаемые теги 2

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

Инструкция настройки тега

Так и сделаем: вернемся в “Новый тег” – окно Конфигурации.

Конфигурация тега

Кликнем любом месте или на рисунке карандаша.

Выбор тип тега

И справа на экране появится окно с шаблонами. В списке есть несколько категорий – “Рекомендуемые”, “Специальные” и “Еще”. Здесь находятся основные шаблоны скриптов от более-менее крупных компаний, в том числе Google. Нужный нам шаблон “Конверсии” доступен по кнопке “Отслеживание конверсий в Google Рекламе”. Таким же образом (найти нужный тег в таблице и проследить, где расположен скрипт) можно найти любой шаблон.

Выбор тип тега. Настройка

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

Когда этап Конфигурации пройден, нужно настроить триггеры.

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

• Срабатывает сразу после загрузки страницы на устройстве пользователя;
• Срабатывает после клика – по определенной кнопке, ссылке, баннеру или просто любому месту на странице;
• Индивидуальный – с параметрами, которые укажет администратор GTM-аккаунта;
• Срабатывает после определенного действия – выбора товара, долистывания страницы до определенного места, попытки закрыть сайт и т.д.

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

После настройки Триггеров нажмите кнопку “Сохранить” в правом верхнем углу. Задайте тегу имя.

Добавление тега

Созданный тег находится в соответствующей папке в меню слева.

Добавления тега

Здесь же можно создавать новые теги.

Чтобы вставить фрагмент скрипт на сайт, вернитесь на главную страницу кабинета GTM (кнопка “Обзор” в меню слева). Найдите большую зеленую кнопку справа – это Контейнер. Сюда и добавляются все созданные для сайта теги. Остальная работа за Гуглом – система сама определит, куда нужно вставить фрагмент, и, с вашего позволения, сделает это.

Переменные

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

• Встроенными – готовыми;
• Пользовательскими – созданными самостоятельно.

Для настройки встроенной функции перейдите во вкладку “Переменные” в меню слева, в отделе встроенных переменных нажмите “Настроить” и флажками выберите те, которые хотите использовать.

Для настройки пользовательской функции во вкладке “Переменные” перейдите в отдел пользовательских и нажмите “Создать”. Они отличаются для сайтов и мобильных устройств , и здесь потребуются навыки программиста. Зато ручные переменные могут решить куда больше проблем.

Удаление контейнера и аккаунта

Чтобы удалить аккаунт GTM, перейдите на главную страницу.

Удаление аккаунта GTM. Шаг 1

Напротив названия аккаунта нажмите на три точки и перейдите в настройки.

Удаление аккаунта GTM. Шаг 2

Еще раз нажмите на три точки и нажмите “Удалить”.

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

Удаление аккаунта GTM. Шаг 3

Нажмите на три точки и кнопку “Удалить”.

Удаление аккаунта GTM. Шаг 4

После удаления и аккаунт, и контейнеры перемещаются в корзину.

Удаление аккаунта GTM. Удаление в корзину

При удалении аккаунта автоматически удаляются и его контейнеры.

Удаление аккаунта GTM. Удаление контейнеров

На восстановление каждого элемента дается 30 дней. После этого срока они окончательно исчезнут.

Заключение

Google Tag Manager – бесплатный инструмент, позволяющий владельцу менять структуру сайта без навыков программирования. Он сводит к нулю вероятность ошибки, тем самым защищая ресурс от прекращения работы, а большое количество шаблонов позволяет работать с десятками параметров одновременно.

Менеджер повышает качество ресурса не только для человека, но и для систем – Google, Яндекс и Facebook, анализируя код сайта и встречая в нем теги от GTM, понимают, насколько ответственен владелец, и добавляют сайту траст – а это означает лояльность в модерации рекламных кампаний, ранжировании при поисковой выдаче и многое другое. Несомненно, GTM – отличный помощник для маркетолога, вебмастера, SEO-шника и, конечно, владельца сайта.