отвечаем
в мессенджерах:

Как настроить Google Tag Manager: пошаговая инструкция

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

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


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


Содержание

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

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

Понятия, используемые при работе с GTM

Аккаунт — высший уровень иерархии в Диспетчере тегов. Как правило, для управления всеми рекламными тегами компании достаточно одного аккаунта.

Аккаунт содержит один или несколько контейнеров, по одному для каждого типа ресурсов: обычная или AMP-страница, приложение iOS или Android.

Контейнер — управляющий JavaScript-код, который вставляется на все страницы сайта.

Тег — размещенный на страницах сайта JavaScript- или HTML-код обеспечивающий выполнение необходимых функции: отслеживание трафика, поведения посетителей, анализ эффективности рекламы на сайте и т.д.

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

Триггер — условие, определяющее, при каких обстоятельствах будут выполняться созданные теги.

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

Задачи, которые можно решать с помощью Google Tag Manager

Создание аккаунта и установка Google Tag Manager

Чтобы начать настройку Google Tag Manager, необходимо зайти на страницу сервиса tagmanager.google.com и авторизоваться или зарегистрироваться.

Настройка Google Tag Manager

  1. После регистрации попадаете на экран создания контейнера.

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

Экран создания контейнера

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

После того, как создали контейнер, принимаете Соглашение об Условиях использования Диспетчера тегов Google.

Соглашение об Условиях использования Диспетчера тегов

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

Вы можете сделать это как сразу, так и после настройки контейнера.

Установка Диспетчера

  1. На этом создание аккаунта и установка Google Tag Manager на сайт завершены. Можно приступать к настройкам.

Рассмотрим самые востребованные функции Google Tag Manager.

Подключение Google Analytics через GTM 2-умя способами

Первый способ:

Для начала необходимо создать переменную, которая будет соответствовать вашему идентификатору отслеживания Google Analytics. Для этого открываем раздел «Переменные» и создаем новую Переменную.

Создание переменной

Указываем имя переменной и нажимаем на кнопку для редактирования. Выбираем тип переменной «Константа».

Константа

В поле значение нужно вписать ваш идентификатор отслеживания Google Analytics. Для этого войдите в аккаунт GA и выберите путь «Администратор → Отслеживание → Код отслеживания», скопируйте его, и вставьте в поле значение. Нажимаем Сохранить — Переменная создана.

Создание переменной

Переходим к размещению кода Google Analytics на вашем сайте. Для этого нужно создать соответствующий тег.

Создание тега

Называем тег и жмем на кнопку редактирования. Выбираем тип Universal Analytics.

Universal Analytics

Активируем галочку «Включить переопределение настроек в этом теге» и нажимаем на значок, как показано на скриншоте.

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

Выбираем переменную, созданную ранее.

Выбор переменной

Следующий шаг – выбрать условие, при котором будет срабатывать этот тег. Т.к. код отслеживания GA должен быть вставлен в код каждой страницы, выбираем в настройках триггера All Pages.

Триггеры

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

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

Настройка триггера

Необходимо сохранить изменения.

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

Публикация изменений

Внесение изменений

Готово. Код активирован. Это можно проверить в режиме Предварительного просмотра.

Предварительный просмотр

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

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

Выход из предварительного просмотра

Второй способ:

Создаем Новый тег. Называем его и нажимаем на кнопку Редактирования. Выбираем, как и в предыдущем способе, тип переменной Universal Analytics.

Затем указываем идентификатор отслеживания ресурса.

Создание нового тега

Следующий шаг – выбрать условие, при котором будет срабатывать этот тег. Т.к. код отслеживания GA должен быть вставлен в код каждой страницы, выбираем в настройках триггера All Pages.

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

Необходимо сохранить изменения.

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

Подключение Яндекс.Метрика через GTM

Создаем новый тег для добавления кода отслеживания Яндекс Метрики на страницы сайта. Называем, нажимаем на кнопку Редактирования и Выбираем тип переменной Пользовательский HTML.

Подключение Яндекс Метрики

В разделе «Настройки» в Яндекс.Метрика находим код счетчика Метрики и вставляем его в соответствующее поле. Выбираем условие, при котором будет срабатывать этот тег. Т.к. код отслеживания GA должен быть вставлен в код каждой страницы, выбираем в настройках триггера All Pages.

Настройки

Сохраняем. Опубликовываем.

Отправка событий по таймеру в GTM

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

Добавляем триггер типа Таймер.

В поле Интервал указываем время в миллисекундах, спустя которое должно активироваться событие. В поле “Ограничение” указываем максимальное число активаций события. Для того, чтобы таймер срабатывал на всех страницах добавляем соответствующее регулярное выражение .*. Выбираем все таймеры.

Таймер

Сохраняем. Следующий шаг – создание тега.

Добавляем новый тег типа Universal Analytics.

Выбираем тип отслеживания – событие. Указываем обязательные параметры Категория и Действие.

Создание тега

Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение “false” для этого параметра. В противном случае – устанавливайте значение “true”.

Таймеры

Не забываем заполнить поле Идентификатор отслеживания GA.

Сохраняем и Публикуем.

Отслеживание кликов в GTM

Первым делом активируем все переменные Клики и Формы во вкладке Переменные.

4. Отслеживание кликов в GTM

Создаем триггер типа Клики.

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

Далее задаем условие активации триггера.  Выбираем Некоторые клики и уточняем, по какому элементу хотим отслеживать клик, установив правило сопоставления с идентифицирующим этот элемент атрибутом (Click Classes, Click ID и т.д.).

Включаем Предварительный просмотр.

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

В левой части меню должны отражаться клики как отдельный элемент gtm.click.

Выбираем нужный из кликов и заходим во вкладку Variables, здесь мы видим все параметры клика, из всего множества находим Click Classes и копируем его значение из столбца Value.

Value

Если есть кнопка с таким же Click Classes на других страницах, но нам нужно активировать этот тег только на определенной странице, добавляем к Click Classes – Page Path.

Click Classes

Так выглядит настройка триггера:

Клик

Сохраняем.

Создаем тег для отправки события в Google Analytics.

Тип тега – Universal Analytics.

Тип отслеживания – Событие.

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

В пункте “Настройках Google Analytics” выбираем заранее созданную переменную с идентификатором отслеживания или ставим галочку напротив фразы “Включить переопределение настроек в этом теге” и вставляем его в появившееся поле.

В триггере выбираем ранее созданный триггер с переменной.

Называем Тег и Сохраняем. Опубликовываем.

Google Tag Manager

Настроим событие в GA.

Заходим в настройки Администратора. В столбце представления выбираем пункт Цели. Нажимаем на кнопку добавить цель.

Называем цель.

Тип – Событие.

Событие

В подробных сведениях о цели прописываем Категорию и Действие, которые указали в GTM.

Цели

Сохраняем.

Проверим событие в GA.

Переходим в Отчеты в режиме реального времени.

Открываем Отчет Конверсии.

И здесь можем увидеть срабатывает ли созданная цель.

Создаем тег для отправки события в Яндекс.Метрика.

Тип тега – Пользовательский HTML.

Пользовательский HTML

В поле вставляем этот фрагмент:

<script>

yaCounterXXXXXXXX.reachGoal(‘click’);

</script

Вместо XXXXXXXX – номер счетчика Яндекс.Метрика.

Вместо click – называем действие, как в настройке тега для GA, в нашем случае – more.

Номер счетчика Яндекс.Метрика

В триггере выбираем ранее созданный триггер с переменной.

Называем Тег и Сохраняем. Опубликовываем.

Настроим событие в Яндекс.Метрика.

Заходим в Настройки – Цели и Создаем цель.

Выбираем JavaScript-событие. В сведениях о цели прописываем Идентификатор цели, которые указали в GTM, – more.

JavaScript-событие

Сохраняем. Цель создана.

В случае, когда необходимо настроить отслеживание клика по какому-либо элементу на веб-странице, а у этого элемента нет идентифицирующих его атрибутов, таких как, например, ID, class или URL, задачу отслеживания можно решить с помощью селекторов CSS.

Как использовать селекторы CSS в Google Tag Manager

Cелектор CSS — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля.

Применять селекторы CSS в GTM можно для определения условий в триггерах, а также в пользовательских переменных типа Элемент DOM и Собственный код JavaScript. Для того, чтобы использовать селекторы CSS в триггерах, в настройках необходимо выбрать Click Element или Form Element.

Селектор CSS помогает не только, когда этого элемента нет идентифицирующих его атрибутов, также, если один и тот же Click Classes используется в нескольких элементах на одной странице, тогда тоже используем селекторы CSS.

Узнать CSS селектор можно с помощью просмотра кода элемента. Кликните на нужном элементе правой кнопкой мыши и выберите пункт Просмотреть код:

Cелектор CSS

После этого кликаем на коде нужного элемента правой клавишей и выберите пункт Copy > Copy selector.

Copy selector

Копируем селектор и вставляем в Click Classes Триггера. Обратите внимание, необходимо выбрать — Соответствует  селектору CSS. Сохраняем.

Click Classes

Создаем Тег по аналогии с предыдущими инструкциями. В триггере выбираем ранее созданный триггер с переменной. Опубликовываем.

Отслеживание отправки форм в GTM

Отправить данные с формы можно с помощью метода submit или же в фоновом режиме через ajax. В первом случае будет происходить перезагрузка страницы, во втором – нет.

Отслеживание форм, отправляющих данные посредством submit.

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

Создаем новый триггер, в качестве типа события триггера выбираем Отправка формы вместо Клик.

Отслеживание форм

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

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

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

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

Привязываемся к атрибуту, идентифицирующему нужную нам форму (Form ID, Form Classes и т.д.). Как узнать параметр элемента, описывалось выше.

В данном случае Form ID копируем и вставляем в Триггер.

Form ID

Сохраняем.

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

Сохраняем.

Публикуем.

Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью AJAX

Используем jQuery для проверки, и если jQuery не стоит, то можно сделать отдельный тэг типа Пользовательский HTML и вставить туда код:

<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script>

, где правилом активации этого тэга будет All Pages.

Проверить наличие jQuery можно через консоль, нажимаем правой кнопкой мыши на сайте, и выбираем пункт «Посмотреть код», затем в появившимся окне выбираете вкладку console и пишем туда: jQuery.

Если в ответ будет вот такая строчка: function (a,b){return new r.fn.init(a,b)}, значит установлен на сайте.

Настройка отслеживания успешной отправки форм

Создаем новую переменную, типа Собственный код JavaScript.

Пишем туда следующий код:

function(){

var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

var ContactForm = jQuery(‘#contact’);

if(ContactForm.find(«#data_contact»).val().length>0

&& emailReg.test((ContactForm.find(«#data_email»).val()))

&& ContactForm.find(«#data_comments»).val().length>0)

{

return true;

}

else

{

return false;

}

}

Разберем скрипт — первая значимая строчка:

var ContactForm = jQuery(‘#online-connection-services-wrapper’);   //указываем id формы

Собственный код JavaScript

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

‘#online-connection-services-wrapper’

В следующем значимом для нас коде, происходит валидация:

ContactForm.find(«#data_contact»).val().length>0

&& emailReg.test((ContactForm.find(«#data_email»).val()))

&& ContactForm.find(«#data_comments»).val().length>0

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

Данная переменная возвращает true, если валидация пройдена, и false, если нет.

Скрипт с id:

function(){

var emailReg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;

var ContactForm = jQuery(‘#online-connection-services-wrapper’);

if(ContactForm.find(«#data_contact»).val().length>0

&& emailReg.test((ContactForm.find(«#data_email»).val()))

&& ContactForm.find(«#data_comments»).val().length>0)

{

return true;

}

else

{

return false;

}

}

Не забывайте ставить #  перед id!

Скрипт c селектором:

function(){

var ContactForm = jQuery(‘#online-connection > form’);

if(ContactForm.find(jQuery(‘#sec-four > div > div.form-two > div > form > input[type=»text»]’)).val().length>0)

{

return true;

}

else

{

return false;

}

}

Не забывайте менять “ на ‘ в названии селектора!

Скрипт с class:

function(){

var ContactForm = jQuery(‘. hiddenpc’);

if(ContactForm.find(«.name «).val().length>1

&& ContactForm.find(«.tel_order_monia»).val().length>0)

{

return true;

}

else

{

return false;

}

}

Не забывайте ставить точки перед class!

Так как проверку мы реализовали самостоятельно, то триггером у нас будет Клик – Все элементы, куда мы добавляем проверку с id или class нужного элемента, нажатие, на которое отправляет форму, нашу новую переменную и значение true и при необходимости другие правила.

Код элемента:

Код элемента

Триггер с Classes:

Триггер с Classes

Триггер с селектором CSS:

Триггер с селектором CSS

Сохраняем. Создаем тег по принципу, указанному выше — в п.4.

Сохраняем и Опубликовываем.

Подмена номера телефона на Landing Page на сайте через Google Tag Manager

Нам необходимо показать другой номер телефона при переходе посетителя с рекламы AdWords.

Нам нужно определить содержимое параметра utm_source и если в нем google — то нужно заменить телефонные номера на сайте.

Создадим переменную, которая будет получать значение параметра utm_source. Тип переменной — URL, тип компонента — Запрос.

Подмена номера телефона

Сохраняем.

Создадим еще одну переменную, которая будет меняться в зависимости от значения utm_source. Для этого используем таблицу поиска:

utm_source

Получилось два номера — один по умолчанию и второй для Google. Но если нам потребуется еще одна замена, например, для Директа, то достаточно добавить еще одно значение в таблицу.

Теперь сделаем триггер, который будет активироваться по готовности DOM страницы, если в utm_source что-то есть:

DOM страницы

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

Автоподмена

Для нужного элемента просто указываем его CSS селектор.

Таким же способом можно менять заголовки, подставляя в них ключ или меняя их в зависимости от объявления.

Установка кодов ремаркетинга и ретаргетинга разных социальных платформ и рекламных систем

Просходит по сходному алгоритму.

Чтобы добавить код Ретаргетинга/Ремаркетинга нужно создать новый тег типа «Пользовательский HTML» и добавить в предложенное поле код ретаргетинга, созданный в рекламном кабинете или интерфейсе рекламных систем. В качестве триггера активации в данном случае используется вариант «Все страницы».

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

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

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

Кому пригодится Google Tag Manager? Владельцам сайта, маркетологам и всем IT-специалистам. Если у вас уходит много времени на установку новых тегов, ваш сайт стал медленным и громоздким из-за обилия тегов или вы не уверены в эффективности сбора данных, то Диспетчер тегов Google облегчит вашу работу.

Анастасия Анастасия Хаховская

Специалист по контекстной рекламе

25.01.2019