Как установить и настроить 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-шника и, конечно, владельца сайта.
- 176
- 0
- 0
- По рейтингу
- По порядку