Как работать с Google Tag Manager — руководство не только для начинающих

Как-работать-с-Google-Tag-Manager_01

Сегодня снова поговорим о Google Tag Manager. Если вы только начинаете работу с этим инструментом, или у вас есть вопросы, которые давно не дают вам покоя, то эта статья для вас. Итак, приступим.

  1. Что же такое Google Tag Manager?
  2. Зачем нужен Google Tag Manager?
  3. Как проверить стоит ли на сайте тег менеджер?
  4. Как начать работу с GTM?
  5. Что такое теги, зачем они нужны?
  6. Что такое тригеры в GTM или как избежать нежелательного выполнения тега?
  7. Зачем в GTM нужны переменные?
  8. Как использовать переменные в GTM?
  9. Как создавать пользовательские переменные и зачем?
  10. Data Layer — что это?
  11. Зачем в диспетчере тегов нужны папки?
  12. Как могут помочь версии?
  13. Что такое контейнер и зачем нужно создавать новые?
  14. Как добавить контейнер в существующий аккаунт?
  15. Рабочие области в диспетчере тегов, что это и зачем?
  16. Установка Google Analytics через Google Tag Manager
  17. Как поставить пиксель Facebook?
  18. Установка Яндекс Метрики через Google Tag Manager
  19. Как отследить клики по кнопке или элементе с помощью диспетчера тегов?
  20. Как использовать режим отладки в Google Tag Manager для проверки правильности настроек?
  21. Как отслеживать события на сайте с помощью пользовательских событий уровня данных?
  22. Как отслеживать формы на AJAX с помощью диспетчера тегов?
  23. Настройка целей Google Analytics при помощи Google Tag Manager
  24. Лайфхак: Как ускорить работу с диспетчером тегов, если вы работаете со многими проектами?
  25. Что может пойти не так при работе с Google Tag Manager?

Google Tag Manager start

Что же такое Google Tag Manager?

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

Зачем нужен Google Tag Manager?

Вы можете продолжать писать огромные ТЗ для программистов, ждать по несколько дней/недель/месяцев (нужное подчеркнуть), проверять их выполнение, находить ошибки, писать ТЗ на ТЗ и так до бесконечности…

Зачем нужен Google Tag Manager

Или все-таки начать использовать в своей работе Google tag manager. Это не панацея и он не решит всех ваших задач, но позволит вам в 90% случаев обойтись без вмешательства программиста при настройке Google Analytics и других инструментов , что сэкономит и время, и нервы, и деньги:)

Как проверить стоит ли на сайте тег менеджер?

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

правильно установленный код диспетчера тегов на сайте

При этом обязательно первая часть должна находиться в разделе <head>, а вторая непосредственно после открывающего тега <body>.

Ну а если вы гуманитарий и поиски кода не ваш профиль, то для удобства можно воспользоваться расширением для Google Chrome — Google Tag Assistant.

Если открыв расширение вы видите следующую картину, и значок возле Диспетчера тегов зеленый, то он установлен, и установлен даже правильно.

Проверяем правильность установки диспетчера тегов с помощью Google Tag Assistant

Как начать работу с GTM?

Чтобы начать работать с диспетчером тегов нужно выполнить два действия:

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

Добавление нового аккаунта gtm

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

Выбираем тип ресурса для отслеживания

Пример того, как это в дальнейшем будеть выглядеть в аккаунте:

Предпросмотр аккаунта диспетчера тегов

Выше в пункте 1 указано название аккаунта, а в пункте 2 — название контейнера.

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

Код Google Tag Manager

Проверить правильность установки Google Tag Manager можно с помощью расширения Tag Assistant, о котором уже говорилось ранее.

ВАЖНО! Если сразу после установки кодов вы будете производить проверку через Tag Assistant, то скорее всего увидите вот такую ошибку:

Пустой контейнер гтм

В ней нет ничего страшного, она сообщает, что контейнер, который стоит на сайте, пуст. Ошибка исчезнет как только вы опубликуете свой первый тег.

Первый успешный тег в Google Tag Manager

Что такое теги, зачем они нужны?

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

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

Пример практического создания и использования тега мы рассмотрим ниже.

Что такое тригеры в GTM или как избежать нежелательного выполнения тега?

Тригер — это условие, которое используется для срабатывания определенного тега. Приведу пример: при создании контейнера у вас автоматически создается тригер “All Pages”. Если такой тригер подключить к тегу, то он (тег) будет срабатывать на каждой странице вашего сайта с установленным кодом диспетчера тегов. Например, именно такой тригер нужен для правильной работы Google Analytics установленной через gtm.

Пример настройки тригера мы рассмотрим ниже.

Зачем в GTM нужны переменные?

Переменная в Google Tag Manager — это пара “ключ-значение”. Они используются для хранения данных, если вам приходится много раз использовать одно и тоже значение.

Как использовать переменные в GTM?

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

  • для хранения данных, которые используются при активации тригеров;
  • для хранения и передачи данных, которые используются при работе тегов.

Во многих случаях для работы достаточно активации встроенных переменных, которые постоянно обновляются. Сейчас доступны следующие категории: Страницы, Утилиты, Ошибки, Клики, Формы, История, Видео, Прокрутка, Видимость.

Как создавать пользовательские переменные и зачем?

Создавать пользовательские переменные нужно тогда, когда встроенных недостаточно для реализации ваших целей — спасибо кэп :). Например при расширенной настройке Google Analytics очень часто создается несколько тегов в которых используется значение идентификатора аккаунта, для ускорения и удобства работы это значение можно ввести в переменную. Для этого нужно сделать следующее:

  1. Выбрать в стартовом окне диспетчера тегов пункт “Переменные” и в подпункте “Пользовательские переменные” нажать на кнопку “Создать”.
    Создание пользовательской переменной в Google Tag Manager - шаг 1
  2. В открывшемся окне выбрать необходимый тип переменной, в нашем случае это Настройки Google Analytics.
    Создание пользовательской переменной типа Настройки Google Analytics - шаг 2
  3. После этого вводим в пункте 1 идентификатор аккаунта Google Analytics, пишем имя переменной в пункте 2 и не забываем нажать на кнопку “Сохранить”.
    Создание пользовательской переменной типа Настройки Google Analytics - шаг 3

На этом процесс создания переменной с идентификатором Universal Analytics закончен.

Успешное создание пользовательской переменной типа Настройки Google Analytics

Data Layer — что это?

Data Layer — это название переменной Java Script, из которой Google Tag Manager получает данные, которые напрямую ему не доступны. В этой переменной содержится информация о текущем состоянии страницы, а также данные о пользовательской сессии. Кстати, имя этой переменной можно изменить, так что правильнее будет говорить “уровень данных”.

С технической точки зрения, уровень данных (Data Layer) — это обычный объект Java Script, а если быть более точным, то это массив, который содержит в себе значения фиксирующиеся с помощью переменных уровня данных. Ниже представлен пример Data Layer для события “Добавление товара в корзину”:

Data Layer для события “Добавление товара в корзину”

где, в переменные записываются следующие значения:

  • name — Название товара;
  • id — идентификатор товара (SKU);
  • price — цена товара;
  • category — категория товара;
  • quantity — количество товара добавленного в корзину.

Более подробно об уровне данных можно почитать на Google Developers.

Зачем в диспетчере тегов нужны папки?

Как и в файловых менеджерах папки служат местом хранения определенных файлов. В случае с диспетчером тегов такими файлами являются теги, тригеры и переменные. Для более удобной работы вы можете соединять все эти сущности, отвечающие за одну задачу в одной папке. Например в одну папку можно собрать все теги, тригеры и переменные, которые отвечают за передачу данных в Google Analytics, во вторую — которые передают данные в Facebook Analytics.

Как могут помочь версии?

Версия — это сохраненная копия контейнера GTM. Сделать такое сохранение можно в любой момент времени, также есть автоматическое сохранение, которое происходит в момент публикации версии. Для сохранения версии нужно в меню выбрать пункт “Отправить” (тот который используется для публикации контейнера) и переключиться с публикации на сохранения версии, как показано на скриншоте ниже. Не забываем при этом указать имя и описание к версии.

Создание новой версии в Google Tag Manager

Если вдруг во время работы вы опубликовали версию с ошибкой, вы всегда можете вернуться к предыдущей версии, которая работала.

Что такое контейнер и зачем нужно создавать новые?

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

Как добавить контейнер в существующий аккаунт?

Для добавления нового контейнера можно воспользоваться двумя методами:

  • в первом случае, в главном меню, в нужном аккаунте выбрать пункт “Создать контейнер”:
    Создание нового контейнера в главном окне диспетчера тегов
  • второй вариант, это перейти в раздел администрирование и в пункте контейнер нажать на “+”:
    Добавление нового контейнера на вкладке администрирование в диспетчере тегов

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

Окно создания нового контейнера в gtm

 

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

Рабочие области в диспетчере тегов, что это и зачем?

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

Установка Google Analytics через Google Tag Manager

Если вы используете диспетчер тегов, то с вероятностью 99% первое, что вы сделаете с его помощью, это установите на сайт Google Analytics. Чтобы подключить стандартный аналитикс нужно:

  1. зарегистрировать аккаунт Google Analytics;
  2. создать переменную типа “Настройки Google Analytics” (этот пункт не обязательный, это скорее рекомендация). О том, как это сделать говорилось выше.
  3. создать тег со следующими настройками:
  • Тип тегаUniversal Analytics;
  • Тип отслеживанияПросмотр страницы;
  • Настройки Google Analytics — в этом пункте выбираем переменную, которую мы создали на предыдущем пункте или же вводим идентификатор ресурса в формате UA-XXXXXXXX-X;
  • в пункте Тригеры выбираем All Pages.

Настройка тега Google Analytics в диспетчере тегов

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

Установка Google Analytics через Google Tag Manager

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

Обычно одного поискового трафика для сайта мало, поэтому вопрос установки кодов отслеживания с других ресурсов является очень актуальным. Рассмотрим это на примере Facebook Pixel.

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

  1. создать Pixel и скопировать его код;
  2. создать тег со следующими настройками:
  • Тип тегаПользовательский HTML;
  • в поле HTML вставить код, который мы скопировали;
  • в Настройке активации тега выбрать Один раз на страницу;
  • в пункте Тригеры выбираем All Pages.

Как поставить пиксель Facebook чеез диспетчер тегов

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

Установка Яндекс Метрики через Google Tag Manager

Яндекс Метрика также является одной из популярных систем аналитики. Его установка очень похожа на установку кода Facebook Pixel, и рассмотрена ниже:

  1. необходимо скопировать код Яндекс Метрики, лучше сразу брать с включенным вебвизором. Если у вас еще и интернет-магазин то подключите отправку данных электронной торговли.
  2. создайте тег со следующими настройками, все аналогично пикселю FB:
  • Тип тегаПользовательский HTML;
  • в поле HTML вставить код, который мы скопировали;
  • в Настройке активации тега выбрать Один раз на страницу;
  • в пункте Тригеры выбираем All Pages.

яндекс метрика через google tag

Как отследить клики по кнопке или элементе с помощью диспетчера тегов?

Очень часто нужно передавать данные о кликах по определенных элементах на сайте в различные системы аналитики. Ниже мы разберем, как это сделать на примере передачи таких данных в Google Analytics. Если вкратце, то алгоритм следующий:

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

А теперь давайте рассмотрим эти пункты на практике. Предположим нам нужно отследить нажатие на кнопку, например эту:

Выбор кнопки для отслеживания

Следующим шагом кликаем по нужному элементу, в нашем случае по кнопке, правой кнопкой мыши и выбираем пункт Просмотреть код:

Как просмотреть код страницы

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

Код кнопки в исходном коде

в коде ищем данные, которые могут помочь нам идентифицировать этот элемент: это могут быть идентификатор или класс. С последним нужно быть осторожным, так как он может повторяться на странице несколько раз. Если в элементе нет ни класса ни идентификатора, или класс на странице повторяется несколько раз, можно воспользоваться CSS-селекторами, более подробно о них я писал в этой статье — Как выжить без программистов или как использовать селекторы CSS в Google Tag Manager.

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

  1. Открываем Tag Manager, переходим в раздел тригеров и нажимаем на красную кнопку “Создать”;
  2. В поле Тип тригера выбираем — “Клик > Все элементы”;
  3. В пункте Триггер активируется на следующих страницах“Некоторые клики”;
  4. В следующем пункте Активировать триггер при наступлении события и выполнении всех этих условийClick Classes равно btn btn-lg btn-success;
  5. Не забываем указать имя тригера и нажать кнопку сохранить.

Выглядеть все это должно, как на скрине ниже:

Пример тригера для отслеживания клика по кнопке

ВАЖНО! Перед тем как использовать встроенную переменную Click Classes при создании тригера её нужно активировать. Для этого нужно перейти в раздел Переменные > Встроенные переменные и нажать на кнопку “Настроить”. В открывшемся окне поставить галочку возле пункта Click Classes.

Подключение встроенной переменной Click Classes

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

Теперь давайте создадим тег, который будет передавать нужную нам информацию в Google Analytics:

  1.  В пункте Тип тега вибираем — Universal Analytics;
  2.  Тип отслеживанияСобытие;
  3.  Категория — Указываем общую группу для нашего события, например “button”. Более подробно о компонентах событий можно почитать по ссылке;
  4.  Действие — здесь обычно прописывают действие, которое сделал пользователь, в нашем случае Click;
  5.  Ярлык — указываем дополнительную информацию о событии, например, на какую именно кнопку кликнул пользователь brif;
  6.  Настройки Google Analytics — указываем переменную Google Analytics, которую мы создали ранее;
  7.  Тригеры активации — выбираем тригер, который только что создали;
  8. Вводим название и жмем кнопку “Сохранить”. На этом всё.

пример тега для отслеживания клика по кнопке

Теперь переходим в Google Analytics > В режиме реального времени > События и ждем:

События в режиме real time в google analytics

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

Как использовать режим отладки в Google Tag Manager для проверки правильности настроек?

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

Как включить режим отладки в гтм

Теперь в соседнем окошке открываем наш сайт и наблюдаем, что снизу появилось дополнительное окно:

Как выглядит режим предварительного просмотра в дисметчере тегов

Итак, что же мы видим в этом окне:

  1. Вкладка Теги, которая на скрине является открытой.
  2. Вкладка Переменные, на которой отображается текущее значение всех ваших переменных. Выглядит она следующим образом:
    Вкладка переменные в режиме предпросмотра google tag manager
  3. Вкладка Data Layer в которой отображены текущие значения Data Layer. Выглядит вот так:
    Вкладка data layer в отладчике диспетчера тегов
  4. События, которые уже сработали на текущей странице. При клике на событие все данные во вкладках Теги, Переменные и Уровень данных принимают значения, которые были в момент срабатывания события.
  5. Перечень тегов, которые сработали во время события 5 gtm.click (в текущем случае это был клик по кнопке “Заполнить анкету”, нажатие на которую мы отслеживали ранее). Как видим наш тег “test brif button” сработал.
  6. Перечень тегов, которые не сработали при событии 5 gtm.click
  7. Если нажать на пункт Summary то мы увидим общую информацию о тегах, которые сработали на текущей странице, также общую инфу можно увидеть на вкладке Data Layer. Общая информация о значениях переменных недоступна, так как их значение уникально при каждом событии.

Зная информацию, которая передается в определенный момент времени вам будет намного проще найти ошибку. Пользуйтесь на здоровье 😉

Как отслеживать события на сайте с помощью пользовательских событий уровня данных?

Иногда разметка сайта очень “прикольная”, настолько “прикольная”, что настройка события при помощью стандартных переменных невозможна. И в таких случаях нам все же необходимо обратиться за помощью к программисту, который установит код пользовательского события на сайт. Например, вот такой код, для событие order при успешной отправке формы:

dataLayer.push({‘event': ‘order’});

Установка кода пользовательского события на сайт

В нашем случае мы использовали onsubmit=»dataLayer.push({‘event': ‘order’});»

пользовательское событие отправляется только при успешной отправке формы.

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

Создание тригера в gtm на пользовательское событие

Как отслеживать формы на AJAX с помощью диспетчера тегов?

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

Обработчик формы в коде сайта

Дальше ищем наш обработчик формы, например по вхождению текста send-form-ajax

В нашем случае это файл bmk.js. Код события необходимо ставить после прохождения валидации полей.

Обработчик формы ajax

Осталось только настроить тег и трегер, но это мы уже проходили.

Настройка целей Google Analytics при помощи Google Tag Manager

Настроить передачу событий в Google Analytics, это конечно хорошо, но лучше все таки работать с целями. Алгоритм их создания н основе событий следующий:

  • в пункте Установка цели выбираем Специальная цель;
  • В пункте Описание цели вводим название и выбираем Тип целиСобытие;
  • Подробные сведения о цели — в этом пункте вводим такие же значения, как и в теге диспетчера тегов.

Настройка цели в Google Analytics

На этом настройку цели можно считать законченной.

Лайфхак: Как ускорить работу с диспетчером тегов, если вы работаете со многими проектами?

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

  1. Открываем аккаунт с нужными нам настройками и переходим во вкладку Администрирование > Экспортировать контейнер:
    Экспортировать контейнер в диспетчер тегов
  2. В открывшемся окне жмем на большую кнопку “Выберите версию или рабочую область” и, как бы это не было ожидаемо — выбираем таки нужную нам версию или рабочую область (спасибо кэп):
    Выбираем, что нужно экспортировать с диспетчера тегов
  3. На следующем этапе жмем синюю кнопку “Экспортировать” и сохраняем json файл себе на компьютер:
    Предварительный просмотр экспорта контейнера в диспетчере тегов
  4. Теперь переходим в наш новый аккаунт, который и нужно настроить, аналогично первому пункту переходим во вкладку “Администрирование”, но на этот раз выбираем пункт “Импортировать контейнер”:
    Импорт контейнера в Google Tag Manager
  5. Осталось выбрать нужный файл и определиться со способами его загрузки. Здесь уже все зависит от ваших потребностей, останавливаться на этом не будем. Выглядит все, как на скрине ниже:

Окна импорта контейнера в диспетчере тегов Google

После импорта рекомендуется проверить корректность данных в системах рекламы и аналитики.

Что может пойти не так при работе с Google Tag Manager?

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

Но, не стоит отчаиваться. Как говориться: “Не ошибается только тот, кто ничего не делает”. Поэтому, при работе с диспетчером тегов не забывайте о режиме отладки. Если и он не помог — свои вопросы можете задавать в комментариях под этим постом или писать в Сообщество рекламодателей Google. Высоких вам конверсий!

Если статья была для вас полезной, не поленитесь поставить лайк и пошерить её друзьям в социальных сетях.

  • Over 9000

    хорошая статья. до всего этого пришлось допирать самому ))

    • Maks Hapchuk

      Спасибо, очень рад, что статья вам понравилась)