Диспетчера тегов google как загрузить файл

Обновлено: 06.07.2024

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

Из этой статьи вы узнаете, как:

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

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

С серверными контейнерами можно использовать как Менеджер тегов, так и глобальный тег gtag.js.

Менеджер тегов

Чтобы теги передавали информацию в серверный контейнер, задайте в настройке Указать URL отправки адрес конечной точки в своем домене.

Добавьте в тег URL отправки для серверной обработки данных, выполнив приведенные ниже инструкции.

Google Аналитика 4

Universal Analytics

Глобальный тег (gtag.js)

Если на сайте используется gtag.js, настройте команду config в теге Universal Analytics или Google Аналитики 4 так, чтобы события отправлялись в серверный контейнер.

В обоих случаях нужно добавить в тег параметры transport_url и first_party_collection :

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

Когда вы укажете URL отправки, данные начнут поступать клиенту в серверном контейнере Менеджера тегов. Такие контейнеры по умолчанию содержат клиенты Universal Analytics и Google Аналитики 4.

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

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

Критерии активации определяют, в каких случаях клиент отвечает на запросы.

Пути по умолчанию в Universal Analytics: клиент активируется, если запрос содержит пути, которые файлы JavaScript используют для передачи данных в Google Аналитику ( /collect , /r/collect и т. д.). Эта настройка активна по умолчанию.

Пути по умолчанию для конкретных идентификаторов в gtag.js: с помощью этой настройки можно включить передачу скрипта JavaScript gtag.js по URL добавления тегов на стороне серверного контейнера. Если настройка активна, клиент будет отвечать только на запросы, содержащие стандартные пути gtag.js (например, /gtag/js?id=G-XXXXXX ). Чтобы добавить идентификаторы отслеживания Google Аналитики, нажмите Добавить идентификатор показателя.

Загрузка скриптов Google

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

Изменение исходного домена в настройках gtag.js

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

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

  1. В серверном контейнере нажмите Клиенты. Откроется список клиентов.
  2. Нажмите на название нужного клиента.
  3. Выберите Заданные по умолчанию пути gtag.js для определенных идентификаторов.
  4. Нажмите Добавить идентификатор показателя и введите нужный идентификатор.
  5. Сохраните конфигурацию клиента и опубликуйте контейнер.

Изменение исходного домена в настройках gtm.js

Скриншот фрагмента Google Менеджера тегов для вставки gtm.js и ns.html

Перед тем, как загрузить веб-контейнер Менеджера тегов с сервера тегов, выполните приведенные выше инструкции, чтобы активировать настройку Заданные по умолчанию пути gtag.js для определенных идентификаторов в клиентах Google Аналитика: GA4 или Google Аналитика: Universal Analytics. Это необходимо, чтобы обеспечить правильную загрузку скриптов продуктов из серверного контейнера.

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

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

  1. В серверном контейнере нажмите Клиенты. Откроется список клиентов.
  2. В разделе Клиенты нажмите Создать.
  3. Чтобы выбрать тип клиента, нажмите на раздел Настройка клиента.
  4. В списке доступных клиентов выберите Google Менеджер тегов: веб-контейнер.
  5. Нажмите Добавить идентификатор контейнера и введите идентификатор веб-контейнера Google Менеджера тегов. Он должен совпадать с идентификатором, который использовался в приведенном выше фрагменте HTML.
  6. Сохраните конфигурацию клиента и опубликуйте контейнер.

Включение дополнительных данных для других тегов

Менеджер тегов

Если определенный параметр (например, уникальный идентификатор) необходимо передавать для всех событий, добавьте его в разделе "Поля, которые необходимо задать" тега конфигурации Google Аналитики 4.

  1. Добавьте в веб-контейнер тег конфигурации Google Аналитики 4 или измените существующий.
  2. Нажмите Поля, которые необходимо задать > Добавить строку.
  3. Добавьте параметр, который необходимо передавать в каждом событии, в таблицу названий и значений параметров.
  4. Настройте активацию триггера на всех страницах и сохраните тег.

Если определенный параметр необходимо передавать только для некоторых событий, добавьте его в разделе "Параметры события" тега события Google Аналитики 4.

  1. Добавьте в веб-контейнер тег события Google Аналитики 4 или измените существующий.
  2. Нажмите Параметры события > Добавить строку.
  3. Добавьте параметр в таблицу названий и значений параметров.
  4. Настройте триггер и сохраните тег.

gtag.js

С помощью API gtag можно указать дополнительные параметры, добавив их как параметры команд. Подробная информация приведена в документации по API gtag.js.

Настройка параметров, которые необходимо передавать для всех событий:

Настройка параметров, которые необходимо передавать для определенных событий:

Чтобы настроить параметры, которые необходимо передавать только для событий page_view , добавьте параметр send_page_view со значением false в команду конфигурации и создайте отдельное событие page_view .

Получение дополнительных данных серверными контейнерами Google Менеджера тегов

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

Отправка данных из других источников

Платформа Measurement Protocol в Google Аналитике позволяет использовать серверные контейнеры для таких источников, как мобильные и межсерверные приложения.

Мобильные приложения

Чтобы в серверный контейнер поступали данные из приложения для Android или iOS, создайте пользовательский тег изображения и включите в нем Measurement Protocol:

Межсерверные приложения

Чтобы на ваш сервер Google Менеджера тегов поступали обращения Measurement Protocol, настройте клиент Measurement Protocol:

  1. В серверном контейнере нажмите Клиенты > Создать.
  2. В разделе Конфигурация клиента выберите тип Measurement Protocol.
  3. В поле Путь для активации укажите адрес конечной точки сервера.
  4. Сохраните конфигурацию клиента и опубликуйте контейнер.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Кому полезен GTM. Установка Google Analytics и Яндекс.Метрики через GTM, отслеживание событий.

Маркетологи используют разные вспомогательные сервисы: системы аналитики, сервисы A/B тестирования, ретаргетинговые, рекламные и коллтрекинговые платформы, виджеты, онлайн-мессенджеры и многие другие. Для их работы необходимо внедрять коды (теги) на сайт, что вызывает ряд проблем.

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

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

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

В 2012 году Google запустил Диспетчер тегов (Tag Manager), созданный специально для маркетологов. Он позволяет из одного интерфейса управлять всеми тегами различных сервисов. На сайт интегрируется только один код, а остальные коды маркетолог самостоятельно добавляет в Диспетчер без участия IT-специалиста.

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

Оцените, нужен ли вам Google Tag Manager

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

  • Если у вас установлена Яндекс.Метрика или Google Analytics и вы отслеживаете только базовые показатели, то вряд ли вы оцените простоту и гибкость Tag Manager. В таком случае удобней добавить коды напрямую на сайт и не возвращаться к этому вопросу.
  • В Диспетчере нет необходимости, если вы не экспериментируете с разными сервисами, не выбираете оптимальный для себя, не тестируете функционал. Вы один раз установите коды на сайт и забудете о них на долгое время.

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

Как начать работу

Google Tag Manager: что это такое и как его использовать

После нажатия кнопки «Создать» нужно подтвердить условия пользовательского соглашения, после чего будет доступен код для интеграции на сайт. Обратите внимание, что код состоит из двух частей: первая часть размещается в разделе <head>, вторая — в разделе <body>.

Google Tag Manager: что это такое и как его использовать

Не знаете, что такое теги <head>, <body> и где их искать в коде? В помощь вам — статья о самых важных HTML тегах для SEO.

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

Для правильной работы сервиса на сайте рекомендуется размещать только код Диспетчера тегов. Если у вас установлена Яндекс.Метрика, Google Analytics и прочие системы, следует все теги перенести с сайта в созданный контейнер. При этом все данные, собранные ранее, сохранятся. Возможна короткая (обычно не более минуты) «просадка» в сборе статистики на время переноса тега, но это не критично.

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

Структура Диспетчера тегов

Интерфейс Google Tag Manager довольно простой. Меню рабочей области содержит такие вкладки:

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

Google Tag Manager: что это такое и как его использовать

Теги. Это фрагменты кода, которые выполняются (активируются) на вебсайте. Теги имеют различное предназначение, но в Tag Manager они преимущественно применяются для передачи данных. Так, теги Google Analytics и отслеживания конверсий Google Ads передают данные о действиях посетителей вебсайта.

В Диспетчере есть готовая система шаблонов тегов. Она существенно упрощает работу с рядом поддерживаемых сервисов: AdRoll, Google Ads, Clicky, Crazy Egg, Criteo, DoubleClick, Google Оптимизатор, Hotjar, Twitter и мн. др. Также можно задавать пользовательские HTML-теги.

Триггеры. Это действия посетителей сайта, в ответ на которые активируются теги. Так, триггер «Глубина прокрутки» при значении 50 % запускает тег ремаркетинга, если пользователь просмотрит более половины страницы.

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

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

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

Нет желания вдаваться в детали и заниматься рутиной? Запустите SEO-оптимизацию сайта на полном автомате с помощью модуля SEO системы PromoPult. Специалисты настроят аналитику, сделают сайт удобней для посетителей, повысят его привлекательность для поисковиков.

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

1. Подключение Google Analytics

Вначале нажмите «Новый тег» / «Конфигурация тега». В появляющемся списке активируйте «Universal Analytics».

Google Tag Manager: что это такое и как его использовать

В пункте «Настройки Google Analytics» нажмите «Новая переменная…»:

Google Tag Manager: что это такое и как его использовать

Задайте ваш идентификатор отслеживания. Для этого перейдите в Google Analytics в раздел «Администратор» / «Код отслеживания». Код имеет формат UA-хххххххх-хх — просто скопируйте его:

Google Tag Manager: что это такое и как его использовать

Вставьте код в соответствующее поле менеджера тегов:

Google Tag Manager: что это такое и как его использовать

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

Теперь нужно задать правило его активации, то есть триггер. Кликните по области «Триггер» под областью «Конфигурация тега», выберите в списке триггер «Просмотр страницы (All pages)» и кликните «Сохранить»:

Google Tag Manager: что это такое и как его использовать

Google Tag Manager: что это такое и как его использовать

Укажите название версии и краткое описание (чтобы вы понимали, в чем суть внесенных изменений) и нажмите «Опубликовать»:

Google Tag Manager: что это такое и как его использовать

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

Google Tag Manager: что это такое и как его использовать

Теперь система аналитики начнет собирать данные (при условии, что код Диспетчера тегов интегрирован на все страницы сайта).

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

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

Google Tag Manager: что это такое и как его использовать

Теперь перейдите в сервис Яндекс.Метрика в раздел «Настройка» / «Код счетчика» и скопируйте код в поле внизу:

Google Tag Manager: что это такое и как его использовать

Вставьте этот код в поле в менеджере тегов, добавьте триггер (как вы делали при настройке Google Analytics) и нажмите «Сохранить»:

Google Tag Manager: что это такое и как его использовать

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

3. Отслеживание событий

В Google Analytics есть отчет в разделе «Поведение» / «События»:

Google Tag Manager: что это такое и как его использовать

По умолчанию он пустой. Для сбора данных необходимо настроить события с помощью Tag Manager.

События могут быть нескольких типов:

  • клик по конкретной или одной из указанных ссылок;
  • клик по элементу (например, изображению, баннеру или кнопке);
  • срабатывание по таймеру;
  • отправка формы.

Рассмотрим настройку события на примере клика по элементу страницы — кнопке «Подробнее». Для этого вначале необходимо узнать класс элемента. Для этого откройте страницу, выделите элемент и кликните в контекстном меню в браузере «Просмотреть код» и найдите название класса (в нашем примере — more-link):

Google Tag Manager: что это такое и как его использовать

Выберите в Диспетчере раздел «Переменные», нажмите «Настроить» и активируйте переменную «Click Classes»:

Google Tag Manager: что это такое и как его использовать

Создайте новый триггер (тип — «Все элементы») с условием активации «Некоторые клики». В выпадающем списке выберите переменную «Click Classes» и укажите название класса элемента. Если вы хотите, чтобы событие срабатывало только при клике по элементу на конкретной странице, то нажмите +, выберите переменную Page URL и укажите полный адрес страницы (при условии «равно») или часть страницы (при условии «содержит»):

Google Tag Manager: что это такое и как его использовать

Нажмите «Сохранить» и назовите триггер «GA — триггер — клик по кнопке Подробнее».

Теперь создайте новый тег (тип — «Universal Analytics»), укажите тип отслеживания — «Событие», Категория — «Кнопка», Действие — «Клик», Ярлык — >:

Google Tag Manager: что это такое и как его использовать

Добавьте к этому тегу триггер «GA — триггер — клик по кнопке Подробнее».

Остается проверить, чтобы не было ошибок («Предварительный просмотр») и опубликовать триггер. После этого в отчет «События» в Google Analytics начнут поступать данные.

Другие возможности Google Tag Manager

Кроме приведенных примеров использования GTM, с его помощью можно:

  • добавлять семантическую разметку на сайт (вот подробная инструкция);
  • отслеживать конверсии и настраивать ремаркетинг в Google Ads;
  • мониторить звонки после конверсии на сайте;
  • интегрировать платформу Google Optimize для A/B-тестирования;
  • связывать конверсии на разных доменах;
  • подключать сторонние сервисы (Adometry, comScore, FoxMetrics, Infinity, MouseFlow, Placed и мн. др.).

Подводим итоги

Google Tag Manager — это важный инструмент для онлайн-бизнеса, который делает работу с аналитикой намного проще и безопаснее. Он позволяет быстро управлять тегами отслеживания, оптимизации, ремаркетинга и т. п. Вы можете добавлять и изменять коды Google Ads, Google Analytics и прочих сервисов без необходимости изменения исходного кода сайта и привлечения программистов.

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

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

Создание аккаунта Менеджера тегов

Для подключения к диспетчеру тегов Google Tag Manager потребуется зайти на главную страницу сервиса, после чего нажать на кнопку «Войти».

Теперь необходимо войти в свой Google-аккаунт или создать новый. После заполняем следующие данные:

Теперь нажимаем на кнопку «Создать».

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

Все готово, контейнер создан.

Установка GTM вручную (Способ №1)

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

Если Вы обладаете необходимым уровнем знаний потребуется зайти на хостинг или через FTP перезаписать соответствующие файлы. Например, в случае с WordPress нужно посетить консоль управления и во вкладке «Внешний вид»-«Редактирование» внести изменения в файл header (название может быть изменено в зависимости от темы).

Когда речь идет об opencart потребуется изменить документ через файловый менеджер на хостинге или через FTP, посетив директорию «/catalog/view/theme/default/template/common/header.tpl».

Установка Гугл Таг Менеджер при помощи плагинов/модулей (Способ №2)

Упрощенный способ, не требующий знаний иерархии файлов CMS и HTML, подходит лишь для сайтов, использующих стандартные CMS. Для того, чтобы использовать GTM, потребуется установить соответствующий плагин или модуль для собственной CMS.

Для этого необходимо зайти в административную панель (для примера WordPress) и выбрать вкладку «Плагины»-«Добавить новый». После этого в строке поиска вводим «Google Tag Manager» и подобрав подходящий модуль устанавливаем его.

Как использовать Google Tag Manager

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

Давайте разберемся, что умеет этот инструмент и как им воспользоваться.

Что такое Google Tag Manager

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

GTM будет полезен:

  1. Веб-аналитикам или маркетологам – для самостоятельного внедрения внешних сервисов, создания эффективной системы аналитики и отслеживания KPI.
  2. Тем, кто связан с контекстной рекламой – для оценки эффективности рекламных компаний.
  3. Для самостоятельного управления аналитикой.
  4. Маркетинговым агентствам – в помощь быстрой и эффективной работе с профилями клиента.

Стоит также понимать, что GTM – это не единственный сервис в своем роде, существуют такие системы, как Tealium, Adobe Dynamic Tag Manager, Yahoo Tag Manager. Но почему же все выбирают Google? Рассмотрим далее.

Почему Google Tag Manager

Обычно выделяют следующие преимущества сервиса:

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

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

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

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

  1. Переходим на официальную страницу Google Tag Manager и нажимаем на «Start for free». Проверьте, чтобы вы были авторизированы в аккаунте Google – это понадобится, чтобы зарегистрироваться на сервисе. Если у вас нет аккаунта, то можете создать его здесь.
  2. Следующим шагом выбираем «Создать аккаунт».
  3. Указываем все необходимые параметры и жмем «Создать». Обратите внимание на целевую платформу – здесь необходимо указать то, для чего будет использоваться инструмент, например, для приложения или веб-сайта. После этого потребуется принять пользовательское соглашение – просто жмем «Да».
  4. В результате перед нами отобразится наш личный аккаунт и небольшое окно, в котором содержится весь необходимый код. Он нам и потребуется – копируем его.
  5. Если вы случайно закрыли окно, нажмите на уникальную надпись, отмеченную на скриншоте ниже.
  6. Осталось разместить указанный код в шапку (<head>) вашего сайта.

В данном случае файл, в котором был прописан код, называется index.html. Также он может именоваться как header.php или как-то иначе, если сайт расположен на CMS.

Основные параметры

Прежде чем переходить к настройкам сервиса, давайте остановимся на некоторых понятиях, относящихся к GTM. Это контейнер, тег, триггер и переменная – именно они нас встречают на главной странице сервиса.

 Личный кабинет Google Tag Manager

  • Контейнер – это некая оболочка, где хранятся все теги сайта или мобильного приложения. Его основной контент – код, используемый на сайте и отвечающий за активацию тегов прочих ресурсов.
  • Тег – часть кода JavaScript, которую необходимо выполнить. С помощью данной операции можно провести отслеживание трафика и поведения посетителей, анализ эффективности рекламы, ремаркетинга и таргетинга.
  • Триггер – выполняет или блокирует тег. Он включает в себя определенное событие, например, загрузку страницы или переход по ссылке. Также триггер позволяет настроить фильтры; один из них – показ URL страниц, где должен срабатывать тег.
  • Переменная – основной параметр, получающий определенные значения.

Объясняю на пальцах: в каждом аккаунте есть как минимум один контейнер. В нем располагается один или несколько тегов – например, код Google Analytics. Для него устанавливается триггер, который определяет условия срабатывания тега и отправки им данных. После того как триггер срабатывает, он считывает определенную переменную. Например, встроенная переменная Click Text содержит текст, а Click URL — URL. Данный триггер активируется, если значение переменной совпадает с заданными пользователем параметрами: кликом по элементу с указанным текстом или URL.

Именно с переменных и начинается базовая настройка Google Tag Manager.

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

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

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

Переменные в Google Tag Manager

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

 Как в Google Tag Manager добавить встроенную переменную

Пройдемся по каждому типу встроенных переменных:

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

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

Для начала давайте рассмотрим основные параметры триггеров, а затем перейдем к их настройке. Всего их 4 типа:

Просмотр страницы

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

Клик

  • Все элементы – действие по любому кликабельному элементу.
  • Только ссылки – действие по клику на ссылку.

Взаимодействия пользователей

  • Видео на YouTube – срабатывает при просмотре видео.
  • Видимость элемента – срабатывает в зависимости от видимости элемента; выбрать отслеживание можно по ID элемента либо CSS-селектору.
  • Глубина прокрутки – позволяет определить скролл страницы в вертикальной или горизонтальной прокрутке.
  • Отправка формы – триггер запускается при отправке форм, при этом срабатывание можно настроить только на успешную отправку формы.

Другое

  • Группа триггеров – позволяет добавить несколько триггеров в одну группу.
  • Изменение в истории – отслеживает изменения в хэше URL-страницы.
  • Ошибка JavaScript – срабатывает при появлении ошибки в JavaScript; также можно настроить триггер на ошибку в определенной строке кода.
  • Специальное событие – лучшим примером пользовательского события является установка кода Яндекс.Метрики и Google Analytics для отслеживания формы, если стандартный тип триггера «Отправка формы» не сработал.
  • Таймер – предназначен для срабатывания события через определенный отрезок времени. Примером может служить срабатывание таймера каждые 25 минут для продления отслеживания сеанса Google Analytics.

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

Готово! Мы создали свой первый триггер. При необходимости вы можете настроить более точное срабатывание с помощью дополнительных параметров.

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

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

Как создать тег в Google Tag Manager

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

Создание тега в Google Tag Manager

Здесь мы можем выбрать один из тегов, который соответствует нужному нам сервису. Пусть это будет «Google Аналитика: Universal Analitics».

Как создать новый тег в Google Tag Manager

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

Найти идентификатор можно в аккаунте Google Analytics, Администратор -> Настройки ресурса -> Идентификатор отслеживания.

Как настроить аналитику с помощью Google Tag Manager

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

Как подключить триггер к тегу в Google Tag Manager

В завершение сохраняем созданный нами тег.

Как создать новый тег в Google Tag Manager

Готово! Тег был создан, теперь давайте проверим его работоспособность – для этого в Google Tag Manager есть специальная функция «Предварительный просмотр».

Как проверить работоспособность тега в Google Tag Manager

На отобразившейся странице вводим ссылку на свой сайт и жмем «Start».

Как проверить работу Google Tag Manager

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

Проверка работы Google Tag Manager

Как опубликовать контейнер в Google Tag Manager

Теперь вы знаете, как можно использовать Google Tag Manager. Спасибо за внимание!

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