Google Tag Manager

Что это за фрукт такой и зачем нам он нужен?

Давайте начнём с определения Google Tag Manager (далее GTM) и вообще немного введу вас в курс дела по этому прекрасному инструменту.

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

Что вы можете делать с помощью Диспетчера тегов:

Настроить отправку данных в Google Analytics, Яндекс.Метрику и другие аналитические системы;
Размещать на сайте теги ремаркетинга Google Ads, DoubleClick, Facebook и другие;
Размещать на сайте кастомные события Facebook;
Быстро вносить изменения в установленные теги;

Сам GTM выглядит вот так: https://tagmanager.google.com/

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

Грубо говоря, вы сможете прилепить скрипты и отслеживание ко всем элементам сайта от текста, до URL.

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

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

Структура GTM

Наша работа будет идти с двумя направлениями - теги и триггеры:

Тег - это определенная папка, куда вы складываете все свои скрипты. Каждому тегу вы закладываете отдельный скрипт.

Триггер - обозначает где нужный скрипт должен быть вызван или где он должен сработать на вашем сайте.

Когда вы будете регистрировать контейнер - GTM предложит выбрать условие либо под WEB (Сайты), либо под Mobile Applications (Приложения)

Чаще всего мы работаем с WEB, как вы понимаете)

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

Это подготовка GTM. Для дальнейшей работы нам необходимо установить сам контейнер на ресурс, если сайт не на платформе, то пишем прогерам клиента, просим установить контейнер на сайт. Но сейчас уже большинство платформ поддерживают интеграцию (Tilda, LP) - просто находим окошечко GTM и вставляем туда код контейнера. Все как с пикселем Facebook) вы же научились?

Код, который закидываем находится вот тут:

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

После установки проверяем как все работает через расширение - Google Tag Assistant ( Не забудьте отключить блокировщики рекламы при проверке). Если сталкиваетесь с расширениями впервые, то советую скачать бразуер от Google и заодно установить расширение от Facebook.

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

Далее переходим обратно в наш Tag Manager и начинаем скриптовать сайт.

1) Создаем новый тег, описываем его FB-Pixel

2) Идем в тэг конфигурацию. Google хочет все поджимать под свои платформы, поэтому для FB вы конкретного варианта не найдете, поэтому выбираем Cutom HTML

И в открывшийся бокс закидываем код пикселя. Именно код, который длинный и выглядит как штука для прогеров.

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

Мы выбираем All Pages. Сохраняем.

Теперь у нас есть в контейнере пиксель и триггер, где он скрипт должен срабатывать.

Нажимаем отправить.

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

Но все же обозначив версии вы можете переключаться между ними.
Нафакапили что-то? - Откатываемся в версию 1.0

Как все проверить?
Нажимаем предварительный просмотр и открываем наш сайт.
Должно быть вот так:

Снизу сводка от GTM, которая показывает все теги, которые у нас поставлены и какие триггеры работают.

Чтобы добавить больше кастомных событий - переходим в Facebook в ручные настройки пикселя:

Далее выбираем любой из вариантов и копируем его.

Выглядеть должно так:

Например

Указать можно все, что угодно. Зависит от ваших/клиента потребностей и фантазии.

НО СТРУКТУРА СКРИПТА ДОЛЖНА ОСТАТЬСЯ ТАКОЙ ЖЕ.

То есть меняем только то, что в кавычках.Надеюсь это понятно.

Переходим в GTM Добавляем новый тег.
Все те же действия - пользовательский HTML и закидываем туда кусок кода:

Теперь по триггерам

По умолчанию только PageView, поэтому создаем новый:

Выходит список возможных вариантов. Под мою цель - клик на кнопку, я выбираю раздел клик (все элементы):

А теперь мы переходим к самому интересному.

Переходим на сайт.
Задача найти ID элемента к которому будем цеплять скрипт и вписать его в триггер.

Нажимаем правой кнопкой мыши на нужный элемент и нажимаем посмотреть код. Выделяется код, который отвечает за этот элемент. В моем случае - могу прицепить код только по классу, его вы видите по стрелке.

Ставлю класс в GTM:

Сохраняем, обязательно нажимаем опубликовать и обновить предпросмотр, обновляем страницу сайта ииии... ТАДААААААААМ!

При нажатии на сайте все работает исправно:

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

Таким образом вы без программистов сможете обеспечить себе настройку базовых и кастомных событий самостоятельно за 15-20 минут. Чаще всего инструмент нужен либо в сложных сайтах, либо в моментах, где инструмент установки от Facebook уже не вывозит какие-либо элементы.

Как говорится: Пользуйтесь на здоровье и делитесь потом результатами!)

P.S. Скоро будет короткая статья по Google Analytics:)