Google Tag Manager (GTM): что это, зачем он нужен, как настроить и использовать

Россия+7 (495) 960-65-87
Шрифт:
0 7081

Основные понятия

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

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

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

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

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

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

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

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

  • Установка кода ретаргетинга и ремаркетинга
  • Установка кнопок шаринга
  • Мониторинг внутренних переходов
  • Отслеживание переходов по всем внешним ссылкам
  • Отслеживание переходов по конкретной внешней ссылке
  • Уточнение показателя отказов
  • Мониторинг отправки форм
  • Отслеживание кликов по социальным кнопкам и виджетам
  • Отслеживание кликов по элементам с тем или иным текстом
  • Мониторинг конкретных источников внешнего трафика
  • Мониторинг всех источников внешнего трафика
  • Подмена номера на сайте

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

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

Google-Tag-Manager1.jpg

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

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

Google-Tag-Manager2.jpg

Google-Tag-Manager3.jpg

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

Google-Tag-Manager4.jpg

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

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

Google-Tag-Manager5.jpg

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

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

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

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

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

Google-Tag-Manager6.jpg

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

Google-Tag-Manager7.jpg

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

Google-Tag-Manager8.jpg

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

Google-Tag-Manager9.jpg

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

Google-Tag-Manager10.jpg

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

Google-Tag-Manager11.jpg

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

Google-Tag-Manager12.jpg

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

Google-Tag-Manager13.jpg

Google-Tag-Manager14.jpg

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

Google-Tag-Manager15.jpg

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

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

Google-Tag-Manager16.jpg

Google-Tag-Manager17.jpg

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

Google-Tag-Manager18.jpg

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

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

Google-Tag-Manager19.jpg

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

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

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

Google-Tag-Manager20.jpg

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

Google-Tag-Manager21.jpg

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

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

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

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

Google-Tag-Manager22.jpg

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

Google-Tag-Manager23.jpg

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

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

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

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

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

Google-Tag-Manager24.jpg

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

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

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

Google-Tag-Manager25.jpg

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

Google-Tag-Manager26.jpg

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

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

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

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

Google-Tag-Manager27.jpg

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

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

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

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

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

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

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

Google-Tag-Manager28.jpg

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

Google-Tag-Manager29.jpg

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

Google-Tag-Manager30.jpg

Сохраняем.

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

Тип тега – Universal Analytics.

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

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

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

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

Называем тег и сохраняем. Публикуем.

Google-Tag-Manager31.jpg

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

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

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

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

Google-Tag-Manager32.jpg

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

Google-Tag-Manager33.jpg

Сохраняем.

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

Переходим в «Отчеты в режиме реального времени». Открываем «Отчет Конверсии». И здесь можем увидеть срабатывает ли созданная цель.

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

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

Google-Tag-Manager34.jpg

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

<script>

yaCounterXXXXXXXX.reachGoal(‘click’);

</script

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

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

Google-Tag-Manager35.jpg

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

Называем тег и сохраняем. Публикуем.

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

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

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

Google-Tag-Manager36.jpg

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

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

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

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

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

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

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

Google-Tag-Manager37.jpg

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

Google-Tag-Manager38.jpg

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

Google-Tag-Manager39.jpg

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

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

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

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

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

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

Google-Tag-Manager40.jpg

Google-Tag-Manager41.jpg

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

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

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

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

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

Google-Tag-Manager42.jpg

Сохраняем.

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

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

Настройка отслеживания успешной отправки форм на сайте при передаче данных с помощью 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)}, значит установлен на сайте.

Google-Tag-Manager43.jpg

Создаем новую переменную типа «Собственный код 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 формы

Google-Tag-Manager44.jpg

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

‘#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 и при необходимости другие правила.

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

Google-Tag-Manager45.jpg

Триггер с Classes:

Google-Tag-Manager46.jpg

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

Google-Tag-Manager47.jpg

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

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

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

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

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

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

Google-Tag-Manager48.jpg

Сохраняем.

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

Google-Tag-Manager49.jpg

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

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

Google-Tag-Manager50.jpg

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

Google-Tag-Manager51.jpg

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

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

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

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

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

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

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

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

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

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

0
0

Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Тест: Кто как пробежал, или Итоги клиентского рейтинга SEOnews 2018
    Анна Макарова
    335
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Друзья, спасибо всем за участие! Мы определили победителей. Кто ими стал - вы найдете по ссылке: www.seonews.ru/events/darim-knigi-ot-mif-pobediteli-opredeleny/ Если вы стали одним из победителей, обязательно свяжитесь с нами по указанной в новости (по ссылке выше) почте. Всем хороших выходных! =)
    SEO глазами клиентов 2018
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - То есть *** пойми кто подался заявками и в итоге рейтинг должен называться seo глазами клиентов *** пойми каких компаний. Молодцы!
    Комплексный аудит интернет-магазина от «Ашманов и партнеры». Часть 1
    Александр Сова
    1
    комментарий
    0
    читателей
    Полный профиль
    Александр Сова - А вот и сеошники подъехали, покидать на вентилятор :D
    Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
    Кирилл Щербаков
    3
    комментария
    0
    читателей
    Полный профиль
    Кирилл Щербаков - "даже пришлось подключить отслеживание звонков с сайта" "Даже" - как будто это что-то нереальное
    Стартовал сбор заявок на участие в рейтинге «Известность бренда SEO-компаний 2018»
    Артем Первухин
    1
    комментарий
    0
    читателей
    Полный профиль
    Артем Первухин - Make KINETICA Great Again!
    Эксперимент: как уникальность контента влияет на продвижение сайта
    Ilia Nazmutdinov
    2
    комментария
    0
    читателей
    Полный профиль
    Ilia Nazmutdinov - Кстати, ПФ не работают на нулевом трафике. Пока на сайт не льются тысячи показов по одним и тем же запросам влияние оказывает ток ссылочное\внешнее и внутреннее\ и внутренняя оптимизация.
    Яндекс перестал индексировать сайты, созданные на Wix
    Константин Даткунас
    3
    комментария
    0
    читателей
    Полный профиль
    Константин Даткунас - Было бы интересно посмотреть саму выборку из 10 000 и методику анализа.
    Прощай, тИЦ! Яндекс переходит на новый показатель качества
    Дмитрий Кондратенко
    3
    комментария
    0
    читателей
    Полный профиль
    Дмитрий Кондратенко - PR уже год как отменили, ТИЦ пол года не обновляется... Вы или "не те книги читали", или Вас кинули ушлые СЕОшники... www.internet-reklama.pp.ua
    Расчет трафика из поисковых систем по брендовым и небрендовым запросам
    Дарья Калинская
    0
    комментариев
    0
    читателей
    Полный профиль
    Дарья Калинская - А вот и статья :) www.seonews.ru/analytics/raschet-trafika-po-nebrendovym-zaprosam-pri-pomoshchi-r/
    Как за 4 шага создать в Яндекс.Метрике удобный дашборд для десятка сайтов сразу
    DirectLine Digital Agency
    5
    комментариев
    0
    читателей
    Полный профиль
    DirectLine Digital Agency - Точность действительно не активна, вы правы. Однако с вашей проблемой наши специалисты не сталкивались. У одного из наших ведущих SEO-специалистов настроены 10 графиков (больше 5 сайтов), и всё работает отлично. Вы не упомянули, сколько графиков на вашем дашборде. Возможно, дело в их большом количестве.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    335
    Комментариев
    262
    Комментариев
    240
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    91
    Комментариев
    80
    Комментариев
    67
    Комментариев
    61
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55
    Комментариев
    54

    Отправьте отзыв!
    Отправьте отзыв!