Всё для рекламы
и про рекламу
Аналитика

Пошаговая настройка Google Tag Manager для начинающих

68839
2

Google Tag Manager позволяет легко управлять тегами на сайте, не беспокоясь о коде – без навыков программирования. Как его настроить – смотрите в этой статье.

Что такое Google Tag Manager (Менеджер тегов)

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

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

То же самое относится к любому другому стороннему плагину, скрипту. 

Чтобы избавить аудиторию от подобных «головняков», Google создал Менеджер тегов (Google Tag Manager). С ним нет нужды вручную добавлять и проверять работу кодов сторонних сервисов и программ.

Что такое теги

Тегами называют фрагменты кода тех самых плагинов – скриптов, что вы ставите себе на сайт. Обычно они помещаются в часть страницы. Чаще всего это упомянутый Google Analytics; настройка ретаргетинга; авторассылка по брошенным корзинам в интернет-магазине; сервисы a/b тестов, тепловых карт, динамического контента и т.д.

Несколько инструментов одновременно. Код каждого из них должен стоять в правильном месте, чтобы не мешать друг другу и работать без сбоев. А если нужно внести изменения и перенастроить правило отслеживания конверсий, к примеру? Вот здесь и начинается «трэш и угар». Не у всех, конечно, но достаточно часто.

Что сделал Google 

Разработчики Google решили упростить жизнь «простым смертным» и создали Менеджер для управления тегами в одном месте. Теперь вы не вставляете каждый сторонний скрипт отдельно, а размещаете всё и работаете в панели управления Менеджера тегов. В результате вы:

1) Видите все скрипты и к каким событиям они привязаны (отслеживание конверсий по клику на кнопку «Оставить заявку», например);

2) Не лезете в код страниц на сайте. Добавление и настройка Google Analytics, отслеживание конверсий Google Ads, настройка ремаркетинга и много другого происходит из личного кабинета Google Tag Manager;

3) Любые изменения можно с легкостью отменить и вернуть на более ранний уровень, а также следить за тем, кто, где и когда их вносил;

4) Можете дать доступ к управлению тегами нескольким пользователям (сотрудникам своей компании или специалистам стороннего агентства, что делает вам рекламу).

Итак, переходим к процессу настройки.

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

1) Открываете страницу проекта.

Google Tag Manager – вход

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

2) Дальше вы создаете личный аккаунт уже конкретно в Менеджере тегов. Для начала даете ему название:

Настройка Google Tag Manager – создание аккаунта

В качестве имени контейнера лучше всего указать доменное имя сайта.

Поставьте галочку «Передавать анонимные данные в Google и другие службы» и переходите к следующему шагу.

3) Задайте настройки контейнера:

Настройка Google Tag Manager – создание представления

Это выбор платформы, где будет использоваться Google Tag Manager – веб-сайт, мобильная версия под iOS или Android , либо страницы AMP-формата.

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

4) GTM сгенерирует персональный код, который нужно вставить на любую страницу сайта, где требуется установка и отслеживание скриптов. Чаще всего это не одна, а все страницы.

Обратите внимание: код ставим в раздел <head> и сразу после открывающего тега <body>.

Настройка Google Tag Manager – код Менеджера тегов

Если сомневаетесь в своих силах, попросите сделать это программиста – задача на несколько минут. 

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

Как добавлять теги в Google Tag Manager

Чтобы добавить новый тег, выберите «Теги» из левого вертикального меню, которое покажет все доступные теги в текущем контейнере. Нажмите ссылку «Новый», чтобы продолжить.

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

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

Google Tag Manager – типы конфигураций

Так, через Менеджер тегов Google можно в пару кликов добавить, например, тег Google Аналитики:
Настройка Google Tag Manager – тег Google Аналитики

Также активировать встроенные и добавить пользовательские переменные при необходимости.

Например, переменную настроек счетчика Google Аналитики. Это пользовательская переменная.

Настройка Google Tag Manager – добавление пользовательской переменной

Настройка Google Tag Manager – добавление утилиты Настройки Google Analytics

Подмена контента с помощью Google Tag Manager

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

Чтобы настроить подмену контента на странице, установите код GTM на неё, как мы описывали раньше. Дальнейший алгоритм такой:

1) Создайте триггер типа «Просмотр страницы»:

Google Tag Manager – создание триггера для настройки подмены

Укажите условие, при котором триггер будет срабатывать (в третьем поле напишите слово, которое есть в ссылке на лендинг):

Google Tag Manager – условие для триггера

2) Создайте тег типа «Пользовательский тег HTML»:

Google Tag Manager – создание пользовательского HTML-тега

В появившееся окно вставьте следующий код:

Google Tag Manager – код для пользовательского HTML-тега

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

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

Если вы хотите подменять, допустим, текст кнопки, в окно для HTML тега вставьте следующую строку:

<script>

document.getElementById(‘button1′).innerHTML=’Новое название кнопки’;

</script>

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

И еще одна сложность: по умолчанию нельзя посмотреть, как сработала каждая подмена. Придется отдельно подключать сбор статистики, например, через системы аналитики.

Дополнительные преимущества Google Tag Manager

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

  • Теги Гугла будут служить приманками для «пауков» – как следствие, отличная индексация страниц для SEO-продвижения.
  • Увеличение и точность конверсионных целей в Google Ads, потому что копаться в тысячах UTM-меток – та ещё задача. Для ремаркетинга – бесценно.
  • Подключение одного сервиса управления и отслеживания вместо десятков плагинов отдельных веб-приложений существенно «облегчает» весь сайт и отдельные страницы – то есть, ускоряет его работу.
  • Помимо сбора данных с помощью GTM вы также можете настроить теги ремаркетинга и событий / конверсий, чтобы было проще настраивать аудитории для ремаркетинга и передавать информацию о целевых действиях в рекламные системы.
     

Удобной вам работы!

Хотите тоже написать статью для читателей Yagla? Если вам есть что рассказать про маркетинг, аналитику, бизнес, управление, карьеру для новичков, маркетологов и предпринимателей. Тогда заведите себе блог на Yagla прямо сейчас и пишите статьи. Это бесплатно и просто
Опубликовано редакцией Yagla
68839
2
16
Написать комментарий
Михаил ПодройкинOctober 9, 2019 в 12:24 PM
Только вдруг выясняется, что поставить ваш код на сайт через GTM нельзя.
Александр ЯглаNovember 15, 2019 в 4:25 PM
Можно, но работать он будет некорректно.