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

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

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

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

Преимущества и недостатки Google Tag Manager

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

• 
  
  Можно интегрировать практически любые теги. Помимо шаблонов Google Analytics, тут есть готовые решения для самых популярных сервисов и систем аналитики и рекламы. Если вы не нашли подходящий шаблон, можно воспользоваться шаблоном «Пользовательский HTML».
  

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

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

Теперь перейдем к недостаткам:

• 
  
  Отсутствует интеграция с некоторыми сервисами. Если у вас подключен Jivosite и «Яндекс.Метрика» устанавливалась через GTM, данные по взаимодействию с Jivosite не будут попадать в «Метрику».
  
• 
  
  Проблема с настройкой целей на виджеты Getcourse. Недавно сам столкнулся с такой проблемой. Для настройки пришлось сначала настраивать взаимодействие GetCourse с Google Analytics 4, и только потом подключать цель в Google Tag Manager. Возможно, такая же проблема будет и с другими сервисами, предлагающих использовать сторонний код в виджетах и формах заявки.
  
• 
  
  Необходимость использовать почту Google. Вам нужно будет зарегистрировать аккаунт, который точно останется с вами, если специалист, работающий с сайтом, уйдет.
  

В целом преимуществ у Google Tag Manager больше, чем недостатков. Имеющиеся минусы локальны и не каждый предприниматель и специалист по рекламе с ними сталкивается.

Термины, используемые в GTM

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

Установка Google Tag Manager на сайт

Сейчас мы рассмотрим два способа — подходящий для всех, а также специфический способ установить на сайт под управлением WordPress.

Универсальный способ подключения к сайту

Дальше нам нужно зайти на сайт Google Tag Manager, чтобы выполнить первичную настройку. Для регистрации в сервисе вам потребуется почта Gmail. Нажимаем на кнопку Start for free:

Стартовая страница

Добавляем новый аккаунт:

Создаем аккаунт

Указываем название аккаунта: у меня это имя автора блога, на который будет установлен GTM.

Настройка аккаунта: обязательно указываем страну:

Создаем контейнер: указываем название и выбираем целевую платформу для работы. В моем случае это «Веб-сайт»:

При создании контейнера указываем, что у нас веб-сайт

После нажатия на кнопку «Создать» открывается окошко с двумя фрагментами кода. Сейчас нас интересует первый фрагмент — скопировать и вставить на сайт.

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

Открываем код нужного сайта в редакторе. У вас это может быть редактор хостинга, мне же удобнее пользоваться программой Notepad++. Вставляем первый код как можно ближе к открывающему тегу <head>. Это делается для того, чтобы вы смогли отследить даже пользователей, закрывших сайт до момента его полной загрузки. Вот так выглядит код на сайте:

Первая часть кода устанавливается сразу после тега <head>

Копируем второй код. Его нужно разместить сразу после открывающего тега <body>. Логика тут такая же. Чем быстрее будет прогружаться тег Google Tag Manager, тем более полной будет статистика.

Вторая часть кода после тега <body>

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

Установка Google Tag Manager на WordPress

Существует несколько способов подключения:

• 
  
  Установка контейнера в код сайта.
  
• 
  
  Установка с помощью плагина или модуля.
  

Выбор конкретного метода зависит от технических особенностей вашего сайта, а также от используемой CMS. В некоторых случаях вам придется воспользоваться услугами разработчика. Я же рассмотрю установку системы на самой популярной CMS — WordPress. Необязательно лезть в код сайта, можно воспользоваться готовым плагином Google Tag Manager for WordPress.

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

Что такое глобальный тег

Традиционный путь установки систем аналитики подразумевает использование глобального тега сайта gtag.js. Такой способ не очень гибкий, потому что все правки придется делать руками непосредственно в коде сайта и устанавливать все сторонние скрипты с помощью разработчика ресурса. Это дополнительные затраты для бизнеса.

Для нового сайта мы рекомендуем сразу использовать Google Tag Manager. Но возникает вопрос: что делать, если на сайте уже стоит глобальный тег? Можно без проблем применять эти два способа одновременно — удалять уже установленный код gtag.js необязательно.

Читайте также:

Подробный гайд по оптимизации сайта на WordPress

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

Так как у нас в качестве примера взят сайт на движке WordPress, для установки использовался плагин «Google Tag Manager for WordPress» от Thomas Geiger. Найти и установить его можно прямо из административной панели сайта. У себя в WordPress зайдите во вкладку «Плагины» и нажмите на кнопку «Добавить новый». Дальше в поисковой строке наберите название плагина, и система сама найдет его:

Плагин для установки

Активируем плагин и переходим опять во вкладку «Плагины». Находим установленный плагин и нажимаем на ссылку «Настройки»:

Настройка плагина

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

Вам нужен идентификатор аккаунта, находящийся на вкладке «Администрирование». Скопируйте идентификатор, который у вас там отображен. У меня он выглядит так:

Идентификатор аккаунта

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

Подключение аккаунта к плагину на сайте

Далее нам понадобится вкладка Integration. Google Tag Manager может интегрироваться с несколькими популярными плагинами, и на этой вкладке мы можем выбрать, с какими именно. У меня установлен плагин Contact Form 7, ставлю галочку в чек-боксе. Если у вас есть другие плагины из списка на вкладке, включите интеграции, это позволит им эффективно взаимодействовать.

Подключаемся к плагину Contact Form 7

Теперь остается только сохранить изменения.

Переходим в панель управления для настройки тега. Первое, что обычно делают — подключают к сайту Google Analytics 4. К сайту из приводимого примера подключен Analytics Universal. О совместном подключении двух аналитик рассказано в статье про настройку GA4. Я же сразу перейду к работе с Tag Manager.

В рабочей области сервиса нажимаем на плашку «Новый тег» или на ссылку «Добавить новый тег»:

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

Видите два поля? В одном мы конфигурируем тег, а в другом — выбираем триггер, который будет его активировать. На этом этапе нас интересует поле «тег».

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

Идем в Google Analytics 4 и находим идентификатор потока. Заходим как администратор и кликаем на «Потоки данных».

Находим идентификатор Google Analytics 4

Выбираем нужный поток данных: в моем случае он один — «Личный блог Романа Тарасова — GA4». У вас может быть несколько потоков.

Открываем вкладку потоки данных

Далее мы попадаем на вкладку «Сведения о потоке». Тут нужно скопировать идентификатор потока данных:

Копируем идентификатор потока данных

Возвращаемся на страницу Tag Manager. Даем название тегу и кликаем на конфигурацию. Открывается окно, где вставляем скопированный из GA4 идентификатор:

Вставляем идентификатор в соответствующее поле тега

Теперь проведем настройку в плашке «Триггеры»:

Настраиваем триггер для активации настроенного тега

Здесь предлагаются три стандартных триггера. Нам нужно настроить простое отслеживание, поэтому выбираем All Pages:

Выбираем триггер «Все страницы»

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

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

Далее сконфигурированные настройки нужно опубликовать. Для этого на главной странице нажимаем кнопку «Опубликовать». Здесь можно увидеть одно из преимуществ — когда вы можете присвоить любое название версии настроек и при необходимости вернуться к ним в любой момент:

Даем название версии и публикуем изменения

Первичная настройка занимает 20–30 минут, причем не требует никаких особенных знаний и навыков. Вам даже может не потребоваться клавиатура, потому что все действия можно выполнить при помощи клавиш мыши. Такой подход значительно расширяет возможности и упрощает жизнь начинающему интернет-маркетологу.

Читайте также:

Полный гайд по «Яндекс.Метрике» для начинающих

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

На моем сайте есть контактная форма, и мне нужно настроить сбор конверсий при ее отправке. Поскольку для создания формы использовался плагин Contact Form 7, это значительно упрощает задачу по настройке тега события.

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

1 — выбираем вкладку с переменными. 2 — нажимаем кнопку с их настройками.

Я обычно включаю все переменные — мешать они не будут. Исключение составляет группа переменных Error, потому что они редко требуются.

Настройка переменных

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

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

После нажатия на кнопку откроется окно, показанное ниже. Вводим туда URL сайта или страницы и нажимаем на кнопку Connect:

Так мы запускаем предпросмотр

После этого откроется новое окно или вкладка — в зависимости от настроек вашего браузера. Ищем нужную форму, заполняем ее и отправляем:

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

Теперь возвращаемся в панель управления, заходим на вкладку предпросмотра и слева в разделе Summary смотрим, какие события там отразились. Нас интересует событие, которое связано с плагином Contact Form 7: в нашем случае оно было последним (на скриншоте подчеркнуто):

Смотрим на произошедшие на сайте события

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

Находим подходящее значение переменной

Копируем значение, которое передает переменная _event, это позволит нам создать триггер, который запустит тег. Создаем тег, для чего повторяем процедуру с новым тегом, как это было описано выше. Только в этот раз нужно выбрать тип тега «Google Аналитика: Событие GA4».

Для подключение нам потребуется тег «Событие для GA4»

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

Настраиваем событие в конфигураторе

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

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

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

Настраиваем «Специальное событие»

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

Проверка работоспособности тега: все в порядке:

Если все верно, публикуем изменения и при этом не забываем давать версии оригинальное имя. Иногда имеет смысл сделать вообще подробное описание, чтобы знать, что поменяли.

Подключение Google Tag Manager к сервисам Google

Помимо взаимодействия с Google Analytics 4, вам может потребоваться подключение и других сервисов. Чаще всего подключают Universal Analytics и Google Ads.

Связываем Google Tag Manager с Universal Analytics

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

Выбор тега для Universal Analytics

В настройках в качестве типа отслеживания оставляем «Просмотр страниц». Также в настройках Google Аналитики указываем выбор новой переменной.

Выбираем переменную настроек

Нам нужен идентификатор аккаунта. Найти его можно в аккаунте Universal на странице «Google Аналитики» .

Заходим во вкладку «Администратор». Далее переходим по ссылке «Настройки ресурса», где будет искомый идентификатор вида «UA-XXXXXXXX-X», который нужно скопировать:

Заходим в настройки Universal Analytics

Переходим в настройки тега. Вставляем идентификатор в соответствующее поле окна «Конфигурация переменной». Далее нужно сохранить переменную.

Вставляем найденный идентификатор в поле «Идентификатор отслеживания»

Остается настроить триггер. Делается это аналогично работе с GA4: выбираем событие All Pages и дальше настраиваем так же, как выше делали при настройке триггера в GA4. Больше ничего сложного в процессе настройки нет.

Связываем Google Tag Manager с Google Ads

Начало работы аналогично описанным выше настройкам связки GTM и Universal Analytics. Отличие будет только в выбранном шаблоне для тега: здесь предлагаются «Отслеживание конверсий в Google Рекламе» или «Ремаркетинг в Google Рекламе». Я выбрал «Отслеживание конверсий».

Для связывания с Google Рекламой предлагается два варианта

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

Выставляем настройки как на скриншоте

Далее выполняем настройку тега. Обратите внимание на идентификатор конверсии: он должен соответствовать реальному событию, которое настроено в GTM. К примеру, это может быть просмотр страниц All Pages или клик по ссылке Click URL. Пример настройки события мы показали при работе с отправкой формы Contact Form 7.

Вот такие настройки я выбрал. Вы можете подобрать более подходящие для вас

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

Теперь проверьте, как работает настроенное событие через «просмотрщик».

Использование связки GTManager и сервисов Google позволяет оптимизировать передачу данных и снижает риск потери важной информации о клиентах.

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

Как подключить сторонний код к Google Tag Manager

Дополнительным удобством стоит назвать возможность подключения стороннего кода. Это может быть скрипт «Яндекс.Метрики» или пиксель социальной сети для сбора аудитории. Ниже мы рассмотрим два наиболее распространенных случая его использования.

Подключение «Яндекс.Метрики» к Google Tag Manager

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

Выбор тега для подключения «Яндекс.Метрики»

Теперь нам требуется зайти в аккаунт «Яндекс.Метрики». В настройках искомого счетчика нужно найти его код и скопировать:

Окно «Яндекс.Метрики» с кодом счетчика: чтобы его скопировать, надо нажать соответствующую кнопку

Возвращаемся в панель управления, и в настройках конфигурации тега вставляем код счетчика «Яндекс.Метрики»:

Вставляем скопированный из «Метрики» код

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

Правильность установки мы проверяем через заход на любую из страниц сайта. Примерно через 10 минут этот визит отобразится в соответствующих отчетах «Метрики».

При таком способе установки кода «Яндекс.Метрики» стоит помнить, что некоторые сервисы дают сбои при передаче данных по такой связке.

Читайте также:

Как настроить цель в «Яндекс.Метрике»

Подключение пикселя «ВКонтакте» к Google Tag Manager

Чтобы подключить к сайту пиксель «ВКонтакте», сначала нужно выполнить настройку сбора аудитории. Для этого заходим в аккаунт «ВК», где у вас есть рабочий рекламный кабинет. В меню своей страницы находим ссылку «Реклама»:

Находим рекламный кабинет «ВКонтакте»

Переходим на вкладку «Ретаргетинг»:

Здесь находится вкладка «Ретаргетинг», на которую требуется нажать

В этой вкладке нам нужны «Пиксели». Именно в этой вкладке настраивается новый пиксель для сбора аудитории:

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

Нажимаем на кнопку «Создать пиксель»:

Так выглядит вкладка рекламного кабинета «ВКонтакте» со списком созданных пикселей

В окне создания пикселя даем ему название и указываем домен, к которому он будет привязан. Рекомендую также выбрать тематику сайта. После выполнения всех настроек нажимаем на кнопку на «Создать»:

Настраиваем пиксель во всплывающем окне

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

Копируем код пикселя

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

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

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

Выбираем нужный триггер: это снова All Pages

На этом настройка завершена. Через несколько часов, как только на сайт придет первый посетитель — пиксель заработает в штатном режиме.

Использование пикселя «ВКонтакте» позволяет «догонять» пользователей, эффективнее с ними взаимодействовать, а значит снижать стоимость целевого лида.

Выводы

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

Польза для экспертов очевидна:

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

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

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

Подробный обзор Google Tag Manager. От понятий и принципа работы, до настройки инструментов веб-аналитики.

• Что такое Google Tag Manager?
• Для каких целей используется Google Tag Manager?
• Основные понятия Google Tag Manager
• Как работает Google Tag Manager?
• Создание аккаунта и контейнера Google Tag Manager
• Как добавить тег в Google Tag Manager
• Как выполнить отладку в Google Tag Manager
• Версии и публикация в Google Tag Manager
• Администрирование в Google Tag Manager
• Как менялся Google Tag Manager

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

Google Tag Manager – инструмент управления тегами на сайте или в мобильном приложении. Через контейнер Google Tag Manager в удобном, интуитивно понятном интерфейсе осуществляется управления тегами таких сервисов как Google Analytics, Яндекс Метрика, Google Ads, Facebook, ВКонтакте и многих других. Вы можете выполнять отладку без внесения изменений в исходный код на сайте, оперативно добавлять или отключать теги. При необходимости настройки Google Tag Manager другим специалистом с помощью делегирования прав доступа можно предоставить соответствующий уровень доступа.

Для каких целей используется Google Tag Manager?

С его помощью внедряют на сайте сервисы веб-аналитики (например, Google Analytics, Яндекс Метрика), настраивают пиксели для сбора данных по аудиториям (Facebook, ВКонтакте), запускают тестирования (Google Optimize), а также любые другие системы, для интеграции которых необходимо в исходном коде страниц сайта разместить код JavaScript.

Преимущества Google Tag Manager

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

Недостатки Google Tag Manager

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

Настройки, интеграции, примеры реальных задач, пошаговые инструкции, узнавайте первыми в моем Telegram канале. Не пропустите новые материалы, подпишитесь сейчас!

Основные понятия Google Tag Manager

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

Тег — фрагмент кода на языке JavaScript. Примеры: код счетчика Google Analytics, пиксель Facebook и т.п.

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

Переменная — обхект, который в зависимости от действия на сайте принимает некоторое значение. Например, url адрес текущей страницы, текст или идентификатор кнопки.

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

Как работает Google Tag Manager?

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

Создание аккаунта и контейнера Google Tag Manager

Давайте приступим к установке этого удобного инструмента на свой сайт. Для начала перейдите на главную страницу проекта расположенную по адресу https://marketingplatform.google.com/about/tag-manager/  , если у вас уже есть учетная запись на Google  пройдите по кнопке Sign in to Tag Manager в правом верхнем углу, если нет, нажмите кнопку Start for free и завершите несложную процедуру создания аккаунта.

Главная страница Google Tag Manager

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

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

Создание аккаунта и контейнера Google Tag Manager

Я рекомендую давать название аккаунту и контейнеру идентичное доменному имени сайта.

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

Если вы согласились с условиями использования Google Tag Manager для вас будет сгенерирован код, который необходимо разместить на всех страницах вашего сайта сразу после открывающего тега <body>. Если вы сами занимались разработкой сайта, сложностей у вас не возникнет, во всех других случаях обратитесь к специалистам, которые могут провести эту процедуру за несколько минут. Обратите внимание, что внесение изменений в исходный код страниц сайта может привести к неработоспособности сайта, будьте внимательны.

Код контейнера Google Tag Manager

На этом создание аккаунта и установка Google Tag Manager на сайт завершены. Можно приступать к первым настройкам, обычно это добавление тега Google Analytics и Яндекс Метрики.

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

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

Добавление тега в Google Tag Manager

Второй, с главной страницы контейнера:

Главная страница контейнера

Внедрим Google Analytics и Яндекс Метрику через Google Tag Manager. Перейдем к настройкам счетчика Google Analytics и скопируем идентификатор счетчика:

Номер счетчика Google Analytics

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

Переменная настройки Google Analytics

В открывшемся окне в поле Идентификатор отслеживания вставляем номер счетчика и сохраняем переменную:

Минимальные настройки

После этого создаем тега типа Google Analytics — Universal Analytics со следующими настройками:

Первый тег Google Analytics

Теперь добавим Яндекс Метрику. Перейдите в настройки счетчика Яндекс Метрики и скопируйте код счетчика. После этого повторите действия по созданию тега, только в качестве типа укажите Пользовательский HTML . В содержимое тега вставьте код счетчика Метрики, добавьте триггер All Pages и сохраните тег:

Тег Яндекс Метрики

После описанных действий мы получаем два тега, которые внедряют на сайт через Google Tag Manager такие сервисы как Google Analytics и Яндекс Метрику:

Яндекс Метрика и Google Analytics в Google Tag Manager

При необходимости аналогичные действия выполняются и для других систем.

Как выполнить отладку в Google Tag Manager

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

Запуск отладчика Google Tag Manager

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

Информация в отладчике

Отлично! Все работает. Но проверим еще в отчетах в режиме реального времени Google Analytics:

Проверка в реальном времени

Google Analytics получил отправленных хит с сайта, выполненные настройки в Google Tag Manager корректны. Для Яндекс Метрики такого отчета нет, но можно использовать дополнительный параметр _ym_debug=1 в URL текущей страницы, открыть инструменты разработчика в браузере, перейти в консоль и получить подтверждение отправки обращения в Метрику.

Версии и публикация в Google Tag Manager

Проверили — все работает, но пока эти изменения доступны только нам в режиме предварительного просмотра или отладки. Сделаем их доступными для всех, опубликовав контейнер Google Tag Manager. В правом верхнем углу выбираем Отправить и видим следующее окно:

Публикация контейнера Google Tag Manager

Теперь у нас есть выбор опубликовать изменения и сохранить версию, либо только создать версию. В чем отличие?

• Публикация и создание версии — сохраняется текущее состояние контейнера и становится доступно всем посетителям сайта
• Новая версия — сохраняется текущее состояние контейнера

Со временем в вашем контейнере появится ни одна версия. Если по какой=то причине придется вернуться к ранее выполненным настройкам отменив все изменения после нее, то вы можете в списке выбрать необходимую версию и опубликовать ее, т.е. вернуться к ней. При желании можно одну из ранних версий сделать актуальной и работать в ней.

Администрирование в Google Tag Manager

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

Настроить доступ в Google Tag Manager можно достаточно гибко, но самое важное я не рекомендую выдавать на уровне аккаунта права администратора!

Управление доступом в Google Tag Manager

Представьте себе задачу — перенести настройки из одного контейнера в другой. Выполнять вручную аналогичную конфигурацию не самое приятное занятие, особенно если выполнено много различных настроек в Google Tag Manager, выручает возможность импорта\экспорта в Google Tag Manager:

Импорт контейнера Google Tag Manager

Соответствующая опция доступна на уровне настроек контейнера.

Как менялся Google Tag Manager

Я давно работаю с Google Tag Manager, этот блог я начал вести в 2013 году. С того времени у меня собралась коллекция скриншотов с интерфейсом Google Tag Manager, давайте вместе вспомним  как развивался этот инструмент.

2013 год

Таким был интерфейс при создании контейнера:

Теги, триггеры и переменные раньше назывались Теги, правила, макросы:

Примерно так происходило добавление нового тега:

Таким было окно, в котором происходила конфигурация тега:

2014 год

Создание нового тега происходило по следующей схеме:

Запуск отладчика происходил иначе:

2015 год

Типы тегов и выбор необходимого происходил на первом шаге конфигурирования тега:

Конфигурация тега Google Analytics выполнялась согласно следующего порядка:

2016 год

Фрагмент из отладчика:

2017 год

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

Как отслеживать переходы к цели с помощью Диспетчера тегов Google

Поздравляем! Вы привлекли людей на свой сайт. Теперь хитрость заключается в том, чтобы отслеживать их с помощью аналитики, и Диспетчер тегов Google может помочь.

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

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

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

Что такое цель?

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

Вы можете найти и настроить эти цели на экране «Администрирование > Просмотр целей» в своей учетной записи Google Analytics. Установите любую цель, которую вы хотите конкретно измерить/отследить, и которая относится к типу вовлеченности пользователей, который вы ищете. Например, мы хотим успешно зарегистрировать «конверсию», когда кто-либо заполняет общую форму на некотором наборе целевых страниц:

Эта цель относится к типу «Событие», поскольку она предназначена для измерения конкретного действия, инициированного пользователем. В данном случае это действие происходит всякий раз, когда кто-то отправляет форму, которую он видит на данной целевой странице. Существует множество других типов целей, включая назначение (каждый раз, когда просматривается конкретная страница), продолжительность (каждый раз, когда пользователь проводит определенное время на странице) и Страницы/Экраны.

Настройка отслеживания в Диспетчере тегов Google.

Как и для всех элементов Диспетчера тегов Google, вам понадобятся две определенные части: (1) триггер срабатывания и (2) сам тег. Вообще говоря, тег, который вы настраиваете, будет отображаться только в соответствии с параметрами его запускающего триггера. Триггер запуска может быть чем-то глобальным, например, «все просмотры страниц», или детальным, например нажатием определенной кнопки. Именно здесь вступает в игру мощь Диспетчера тегов, поскольку вы можете выполнять все эти конкретные настройки без необходимости копаться в базовом исходном коде вашего сайта.

В нашем примере мы создадим «Триггер целевой страницы». Этот триггер настроен на срабатывание при соблюдении следующих условий: (1) страница содержит «/lp/» в URL-адресе (наша структура постоянных ссылок для целевых страниц, которая предотвращает срабатывание тега в других областях веб-сайта) и (2 ), который пользователь нажимает на элемент с идентификатором «lpFormClick» (конкретный идентификатор, связанный с кнопкой отправки формы нашей целевой страницы). В целом, этот триггер будет срабатывать только на определенных страницах, в URL-адресе которых есть «/lp/», и только в том случае, если пользователь нажмет кнопку отправки формы.

После создания триггера нам нужно настроить тег «Конверсия цели целевой страницы». Используйте тип тега по умолчанию «Universal Analytics». Соответственно, остальные поля должны совпадать с конкретными параметрами изначально созданной вами цели Google Analytics. После настройки этих значений вам просто нужно связать конкретный триггер с тегом:

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

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

Простое создание целей с помощью Google Tag Manager

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

Цели в Google Analytics

4 типа целей:

Пункт назначения

Цели назначения основаны на достижении определенной страницы на веб-сайте или определенного экрана в мобильном приложении. Когда пользователь достигает этого пункта назначения, цель активируется в Google Analytics. Целевые цели — это единственный тип целей, который позволяет настроить воронку. Это делается путем ввода URL-адреса каждого шага воронки. Если вы выберете «Обязательный» для первого шага воронки, то только пользователи, которые входят в воронку на этой странице, а затем переходят к месту назначения цели, будут учитываться как конверсия цели в отчете последовательности целей Google Analytics.

Продолжительность

Цели продолжительности — это просто цели, основанные на том, как долго пользователь находится на вашем сайте. Однако важно понимать, как рассчитывается продолжительность сеанса. Google Analytics отслеживает время между страницами, когда есть несколько просмотров страниц, а затем добавляет любое время между последним просмотром страницы и любыми взаимодействиями (событиями и т. д.). Это не точная мера, но единственный способ, с помощью которого Google Analytics может ее рассчитать. Подробнее об этом читайте в блоге Джастина Кутрони, в котором объясняется, как рассчитывается время в Google Analytics.

Страниц/экранов за сеанс

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

Событие

Цели события запускаются, когда в Google Analytics происходит указанное вами событие. События обычно имеют связанные с ними категории, действия и метки (метки необязательны). Они также иногда будут иметь значение. Это будет зависеть от того, как реализованы ваши события.

Использование Диспетчера тегов Google для упрощения достижения целей

Виртуальные просмотры страниц

Виртуальные просмотры страниц позволяют использовать целевые цели, когда фактический URL-адрес страницы не меняется. Это может быть удобно в различных ситуациях: корзины покупок, процессы регистрации и любой другой процесс, состоящий из нескольких шагов, где URL-адрес не меняется. По сути, вам нужно сообщить Google Analytics, что просматривается новая страница, когда это не так. В старые времена вам приходилось жестко кодировать просмотр страницы в исходном коде, чтобы сделать это. Но с Google Tag Manager теперь легко настроить виртуальные просмотры страниц. Как только вы выяснили, где вы хотите, чтобы ваш виртуальный просмотр страницы срабатывал, это несложно настроить в Диспетчере тегов Google.

Шаг 1:

Создайте новый тег в контейнере:

Нажмите красную кнопку «Новый» и выберите «Тег».

Шаг 2:

Выберите свой вариант Google Analytics

*Примечание* Если вы готовы выбрать «Классический Google Analytics», нажмите здесь, и давайте поговорим о переходе на Universal, чтобы получить максимально использовать ваши данные

Шаг 3:

Свяжите это со своим номером отслеживания Google Analytics и выберите «Просмотр страницы» в качестве «Тип отслеживания».

Шаг 4:

Назначьте виртуальный URL для вашего виртуального просмотра страницы

Шаг 5:

Назначьте правило активации

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

Шаг 6:

Тестирование и публикация

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

Шаг 7:

Совместите цель в Google Analytics с вашим виртуальным просмотром страницы

Теперь работа подходит к концу. Просто введите виртуальный URL-адрес из вашего тега в URL-адрес цели (или URL-адрес шага последовательности) в Google Analytics.

Автособытия

Используйте автоматические события в Диспетчере тегов Google для запуска целей событий. Для большинства автоматических событий вам потребуется настроить основные теги прослушивателя событий. Чтобы узнать, как это сделать, посетите блог Джастина Кутрони, посвященный отслеживанию автоматических событий. После настройки выполните следующие шаги, чтобы отправить события в Google Analytics для запуска целей.

Шаг 1:

Создайте новый тег события Google Analytics

Заполните параметры «Категория», «Действие» и «Метка» соответствующей информацией для события вы стреляете.

Шаг 2:

Создайте правило активации

См. описание выше, как настроить правило активации.

Шаг 3:

Протестируйте и опубликуйте свой контейнер.

Живи, если работает!!! Подробнее о тестировании Диспетчера тегов Google здесь.

Шаг 4:

Совместите цель Google Analytics с параметрами события ваш тег Диспетчера тегов Google.

This entry was posted in Популярное