0-800-759-750
Мы на связи с 7:00 до 24:00
office@elit-web.ua

Google Tag Manager: что это такое, как настроить и установить GTM

14 апреля 2024
10658
0
Поделитесь
Содержание

    Комплексная аналитика сайта — неотъемлемая часть его развития и продвижения. И от того, какие инструменты вы используете, напрямую зависит будущее вашего ресурса. Но, как вы и так знаете, даже базовый анализ сайта — процесс трудоемкий, длительный и не всегда одинаково эффективный. Но уже сейчас есть инструмент, который эту задачу упрощает, ускоряет и повышает его эффективность. Называется он Google Tag Manager.

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

    Google tag manager

    Что такое менеджер тегов Google Tag Manager

    Что такое менеджер тегов Google Tag Manager

    Google Tag Manager (GTM) — это сервис по управлению тегами, так называемый диспетчер тегов. Он позволяет добавить и настроить теги отслеживания пользовательской активности разных систем аналитики, а также размещать рекламные скрипты на сайте без помощи программистов.

    Главное преимущество этого инструмента — скорость. Он значительно ускоряет внедрение любых изменений в рекламные кампании и тестирование гипотез.

    Цели использования Google Tag Manager

    Итак, какие функции выполняет GTM и для чего его можно использовать:

    1. Для сбора информации Google Analytics, KISSMetrics и других сервисов аналитики.
    2. Для настройки ремаркетинга Facebook, Google Ads, AdRoll и др. сервисов.
    3. Для размещения HTML-скриптов под дальнейшее проведение сплит- и A/B-тестов или показ баннеров.
    4. Чтобы иметь возможность изменить в краткие сроки теги, размещенные на сайте.

    Цели использования Google Tag Manager

    Кроме того, менеджер тегов GTM позволяет мониторить статистику рекламы в социальных сетях (клики по кнопкам), внедрять микроразметку, отслеживать внешние каналы трафика, контролировать переходы на сайт по внешним ссылкам, следить за количеством отказов и многое другое.

    Таким образом диспетчер тегов ответит на ряд актуальных в продвижении вопросов:

    1. Какие места размещения лучше всего конвертируют трафик?
    2. Какие рекламные кампании недостаточно эффективны и их стоит исключить?
    3. Как более рационально распределить рекламный бюджет по основным источникам?
    4. Как выполнить отслеживание кликов в GTM, снизить стоимость клика, но при этом привлечь больше потенциальных клиентов?

    Задействовать Google Tag Manager для продвижения Вашего сайта

    Адрес сайта

    Главные преимущества данного инструмента:

    • экономит ваше время. Чтобы добавить или изменить тег, вам понадобится куда меньше времени, чем для составления ТЗ программисту. При этом вам не нужно ждать, пока специалист освободится и сможет приступить к вашей задаче. Часто это экономит по несколько рабочих дней;
    • простой в работе. Большая часть настроек состоит из 2—3 простых шагов. При этом большинство функционала автоматизировано, поэтому вам не придется самостоятельно вносить горы данных;
    • экономит маркетинговый бюджет. Используя данный сервис, вам не нужно постоянно обращаться к разработчикам или нанимать программиста для изменения настроек аналитики. Это существенно сокращает расходы, особенно если вы регулярно тестируете гипотезы и вносите изменения;
    • подходит для множества сервисов. С его помощью можно управлять тегами любых инструментов, использующих метки для отслеживания пользовательской активности;
    • позволяет управлять несколькими проектами. Вы можете одновременно работать с несколькими аккаунтами;
    • собирает аналитику из разных источников. Например, с мобильных приложений и корпоративных сайтов;
    • сохраняет ваши прежние настройки. Есть возможность быстро сбросить любые изменения и вернуться к предыдущим настройкам;
    • не сказывается на функционировании сайта. Если установка проведена правильно, сервис не замедляет загрузку страниц и не вызывает проблем в отображении ее элементов.

    При корректном использовании GTM становится не просто полезным, а незаменимым инструментом для интернет-маркетинга.

    Какие функции выполняет GTM

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

    Менеджер тегов Google имеет действительно массу достоинств, о которых мы не упомянули выше:

    1. «Гугл тег менеджер» совершенно бесплатный и не требует от вас дополнительных вложений.
    2. У GTM просто масса интеграций со сторонними ресурсами и платформами — как непосредственно от Google, так и от сторонних разработчиков.
    3. Диспетчер тегов позволяет существенно сократить код сайта, что положительно сказывается на его скорости работы.
    4. Для удобства можно использовать встроенный режим отладки.
    5. В GTM можно просматривать и при необходимости откатывать любые изменения. Даже если в коде обнаружится ошибка, это не станет серьезной проблемой.
    6. Вы можете открывать совместный доступ для работы с Google Tag Manager, что будет очень удобно для команд сотрудников.

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

    Раз уж мы рассматриваем плюсы и минусы диспетчера тегов, нужно сказать и о некоторых недостатках сервиса. Их немного:

    1. Если в ходе работы вы случайно повредили код контейнера GTM, это чревато хлопотами. Потому что так вы «сломаете» и все теги, которые с его помощью создали. Поиск и исправление ошибки порой занимают немало времени.
    2. Установка кода GTM на сайт требует от вас как минимум знаний в области верстки и программирования. Если таковых нет, придется обращаться к знающему специалисту.
    3. Определенные неудобства может создать и отсутствие онлайн-поддержки, а также отчетов непосредственно внутри Google Tag Manager.

    В каких случаях Google Tag Manager максимально эффективен?

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

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

    На текущий момент GTM — это незаменимый инструмент в следующих случаях:

    • вы задействуете несколько сервисов аналитики и интегрируете на свой сайт сторонние сервисы;
    • у вас нет разработчика в штате и вы пока что не планируете его нанимать;
    • вы хотите фиксировать максимум вариантов пользовательского взаимодействия с сайтом и использовать это для более эффективного продвижения;
    • вы активно используете ремаркетинг и регулярно проводите А/В тестирование.

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

    Как устроен Google Tag Manager

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

    Итак, чтобы зарегистрировать аккаунт, вам понадобится Gmail. К одной почте вы можете привязать несколько аккаунтов, что очень удобно для интернет-маркетологов и владельцев, занимающихся параллельным развитием несколько проектов.

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

    Теги в GTM — это фрагменты кода различных сервисов, которые выполняются, если интернет-пользователь совершает определенное действие. Используя интерфейс сервиса, вы можете добавлять и редактировать нужные вам теги. Они позволяют:

    • отслеживать поведенческую активность — посещенные страницы, пути перехода, время посещения, глубину просмотра, конверсии и т. д.;
    • настраивать показы ремаркетинговых объявлений;
    • демонстрировать пользователю нужный вариант контента для проведения A/B-тестов или колл-трекинга.
    • настраивать показ рекламных баннеров и других объявлений на сайте.

    Условие, которое активирует или прекращает выполнение тега, — триггер. Это действия, совершенные пользователями: посещение определенной веб-страницы, переход по URL, конверсия, прочее. Они также задаются через интерфейс Менеджера тегов, что не требует непосредственно изменения кода страницы. Также триггеры используют, чтобы прекратить выполнение тега. В GTM предусмотрены такие триггеры:

    • просмотр страницы — при загрузке до страницы в браузере пользователя;
    • видимость элементов — активирует тег, когда элемент появляется на экране пользователя;
    • клик — начинает выполнение тега, если пользователь кликнул по заданному элементу (кнопка, ссылка и т. д.);
    • отправка формы;
    • изменение в истории — тег активируется при изменении фрагмента URL;
    • ошибка JS — позволяет сохранить информацию об ошибках в аналитике;
    • прокрутка — отслеживает глубину скроллинга;
    • таймер — после истечения заданного времени;
    • видео YouTube — взаимодействия с YouTube роликами, расположенными на вашем сайте;
    • пользовательское событие — отслеживает типы взаимодействия, для которых не подходят остальные триггеры;
    • группа триггеров — активируют тег, если пользователь выполнил несколько условий.

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

    Установка Google Tag Manager

    Установка Google Tag Manager

    1. Создание аккаунта и контейнера в тег менеджере

    Для начала вам необходимо в браузере зайти в Google-аккаунт. Затем перейти в Tag Manager и нажать «Создать аккаунт». Далее нужно будет указать название аккаунта и вашу страну. Ниже в разделе «Создание контейнера» укажите его название и выберите тип платформы web-сайт. Нажимайте кнопку «Создать», примите Пользовательские условия, подтвердите свое согласие с правилами нажатием кнопки «Да» и переходите непосредственно к интеграции кода на сайт.

    2. Установка кода GTM на сайт

    Первым делом удалите все прежние теги с вашего сайта, затем в менеджере тегов открывайте раздел «Рабочая область» и кликните на ID контейнера — шестизначный код с префиксом GTM-… .

    Установка кода GTM на сайт

    Появившиеся строки кода интегрируйте на ваш сайт согласно инструкциям сервиса. Верхнюю часть кода (начинается с < script >) скопируйте в < head > страницы сразу под dataLayer, а нижнюю часть кода (начинается с < noscript >) вставьте после открывающего тега < body >.

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

    Чтобы опубликовать код Менеджера тегов, просто сохраните изменения. Но перед тем как сделать это, стоит проверить, работает ли контейнер. Можете воспользоваться браузерным расширением Tag Assistant, которое работает в Google Chrome и большинстве других браузеров на основе Chromium. В нем действительно масса удобных функций. В частности, режим предпросмотра, позволяющий проверить изменения до их публикации.

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

    В состав Гугл Тег Менеджер входят такие элементы:

    • контейнер (Container). Его реализуют в виде фрагмента кода JavaScript. Именно в нем содержатся все остальные элементы: теги, триггеры и переменные. Контейнер добавляют на все страницы сайта;
    • тег (Tag). Это части кода с внешних ресурсов, с помощью которых можно настроить отслеживание поведения пользователей, конверсии, узнать о результативности рекламы. Теги дают возможность установить критерии ЦА, протестировать, как пользователи реагируют на изменения, и выполнить множество других действий;
    • триггеры (Triggers). Это компоненты, определяющие условия, при которых активируются или, наоборот, блокируются теги. Примером может быть нажатие кнопки обратного звонка, добавление в корзину или другие действия;
    • переменные (Variables). Это связующее звено между двумя предыдущими компонентами. Если нужно передать информацию от тегов к триггеру или назад, то нужно правильно настроить пару «имя — значение».

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

    Как настроить Google Analytics при помощи Google Tag Manager

    Google Analytics — один из наиболее важных инструментов для сбора данных об активности юзеров. Чтобы выполнить его настройку, вам потребуется создать профиль в GA.

    Далее в Менеджере тегов открывайте «Рабочая область» → «Переменные» → «Создать». Слева выберите пункт «Настройка».

    Как настроить Google Analytics при помощи Google Tag Manager

    Следующее, что следует сделать, — указать ID отслеживания. Скопировать нужно в самом сервисе. Выберите «Администратор», пункт «Настройки ресурса». Там вы найдете идентификатор. Скопируйте и укажите его в GTM. После этого дайте имя переменной и примените все изменения.

    ID отслеживания

    Далее создайте тег для направления данных в Analytics: в GTM зайдите в раздел «Теги» → «Создать».

    Далее:

    1. Выберите универсальную аналитику. Вам нужен раздел Universal Analytics.
    2. Найдите пункт «Просмотр страницы» при выборе типа отслеживания.
    3. Назовите переменную уникальным именем.
    4. В пункте «Триггеры» укажите «Все страницы».
    5. Введите название созданного тега и нажмите «Сохранить».

    Теперь следует опубликовать тег: в раб. области кликните «Отправить», напишите название измененной версии для вашего контейнера и выберите «Опубликовать».

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

    Как установить пиксель Facebook

    Сначала необходимо создать сам пиксель «ФБ». Для этого перейдите в Events Manager. Кликните на кнопке в центре экрана «Подключить источник данных». В открывшемся окне выберите пункт «Интернет» и нажмите «Подключить»:

    Как установить пиксель Facebook

    Следуйте инструкции:

      1. Выбираем «Пиксель Facebook» и нажимаем «Подключить».
      2. Заполнив краткую форму, задав название пикселя и URL веб-ресурса, нажмите «Продолжить».

        Заполнив краткую форму, задав название пикселя и URL веб-ресурса

      3. Далее выбираем пункт «Добавить код пикселя на сайт вручную».

        Добавить код пикселя на сайт вручную

        1. В появившемся окне нажимаем «Скопировать код».

    Скопировать код

    Теперь заходим в свой аккаунт GTM, выбираем контейнер сайта и нажимаем «Добавить новый тег». Далее необходимо выбрать индивидуальную настройку HTML-тега, указать название и добавить код вашего пикселя, скопированный ранее.

    После этого откройте список с расширенными настройками вашего тега. Найдите пункт «Параметры срабатывания» и выберите «Один раз на странице», и пункт «Триггеры» — укажите All Pages, затем нажмите «Сохранить».

    Что сделать, если нужно добавить триггер в Гугл Тег Менеджер

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

    Добавить триггер в GTM можно следующим способом:

    • войдите в свой аккаунт;
    • выберите контейнер, в который нужно добавить новый компонент;
    • слева в боковой панели выберите блок «Триггеры»;

     

    • в правом верхнем углу появится кнопка «Добавить триггер» (Add Trigger);
    • далее нужно определиться с типом триггера и выбрать его из выпадающего списка;
    • следующий шаг — настройка дополнительных условий. К примеру, если выбран тип «Загрузка страницы», нужно ввести ее URL;
    • далее введите имя для нового триггера, чтобы легко было понять его назначение, и сохраните изменения.

    Аналогично можно добавить группу триггеров.

     

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

     

    Что нужно знать про настройку переменных в GTM

    Настройка GTM предусматривает указание переменных. Они необходимы для таких функций:

    • сохранение информации, которая укажет на активацию триггера;
    • передача данных в тег из различных источников, например, из DataLayer, переменных JS, cookies или других HTML-объектов;
    • установки связи с триггерами, которые определяют, при соблюдении каких условий будет активирован тот или иной тег. К примеру, запуск триггера «Глубина просмотра» сработает, если пользователь просмотрел 10, 50 или 90 процентов страницы. При настройке нужно будет указать точное число, при котором будет запущен триггер.

    Со встроенными переменными работать проще — их либо активируют, либо отключают. Для этого нужно зайти в одноименный раздел, перейти в блок настройки и установить или снять флажок напротив нужной переменной. Для контейнеров, предназначенных для работы с сайтами, можно выбирать среди 9 категорий. Аналогичные подборки есть для контейнеров AMP, Android, iOS и устаревших мобильных.

     

    Если есть необходимость получить дополнительные данные, работают в разделе пользовательских переменных. Новые условия можно задать в блоке «Переменные». Для работы с сайтами доступны 6 категорий пользовательских переменных: Панель навигации, Переменные страницы, Элементы страницы, Утилиты, Данные контейнера, Данные, предоставленные пользователем.

    Коротко о настройках целей в GTM

    Покажем на примере, как можно настроить отслеживание конверсий на веб-ресурсе при отправке формы обратной связи. Значительно упрощает дальнейшую настройку использования плагина Contact Form 7.

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

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

    После этого открывается новое окно или вкладка, где ищут нужную форму, заполняют ее и отправляют. Затем нужно вернуться в панель управления, перейти на вкладку предварительного просмотра и в разделе Summary просмотреть события. Интересует то, которое связано с плагином Contact Form 7.

    Далее переходим во вкладку Variables, где можно увидеть переменные, сработавшие во время события, и их значения. Нас интересует переменная _event, ее значение копируется, чтобы создать триггер, запускающий тег.

    Создаем тег, выбираем тип тега «GA: Событие GA4», называем его и указываем название, скопированное из переменной. Затем настраиваем триггер, выбирая «Специальное событие».

    В завершение осталось проверить работу созданного тега — заполняем форму в предварительном просмотре события. Если все верно, публикуем изменения и даем версии оригинальное имя.

    Возможные проблемы при работе с Google Tag Manager

    Проблема

    Отработка тегов нормально функционирует в режиме отладки, но информация не перенаправляется в GA.

    Чем вызвана

    Вероятно, вы неправильно прописали ID отслеживания.

    Как решить

    Проверить указанный идентификатор и при необходимости заменить его на корректный.

    Проблема

    После перехода на GTM стремительно увеличилось число сеансов и юзеров.

    Чем вызвана

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

    Как решить

    Полностью убрать насайтовый код.

    Проблема

    Нет изменений в режиме отладки, хотя изменения точно внесены.

    Чем вызвана

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

    Как решить

    Обновить настройки предпросмотра и еще раз проверить, для какой рабочей области выбран этот режим.

    Какие задачи реально решает Google менеджер тегов

    Этот инструмент незаменим при выполнении следующих задач:

        • обнаружение ошибок в JS;
        • гибкая настройка E-commerce для онлайн-магазина;
        • настройка ремаркетинга;
        • отслеживание использования пользователями фильтров на площадке, чекбоксов, форм и так далее.

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

    Выводы

    Итак, мы постарались максимально охватить структуру и термины Google Tag Manager, рассказать о базовой настройке Google Tag Manager и показать на реальных примерах, кому стоит использовать этот инструмент.

    И какой же вывод можно сделать?

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

    У Вас остались вопросы?
    Наши эксперты готовы ответить на них.
    Оставьте ваши контактные данные.
    Будем рады обсудить ваш проект!
    Получить консультацию
    Наш менеджер свяжется с Вами в ближайшее время
    Мы используем файлы cookie
    Мы оптимизируем работу сайта, создаем персонализированный маркетинговый опыт и собираем данные по использованию сайта и аналитику. Нажав «Принять», вы соглашаетесь использовать наши файлы cookie.