Google Tag Manager: универсальный инструмент для работы с тегами

Для чего нужен Google Tag Manager? Как установить и настроить Google Tag Manager? Как решать задачи с помощью Google Tag Manager? Как работать с Яндекс.Метрикой и Гугл Аналитикс через Google Tag Manager?
Google Tag Manager: универсальный инструмент для работы с тегами
Время чтения: 16 минут
Отправим материал вам на:

Вопросы, рассмотренные в материале:

  • Для чего нужен 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 (e-commerce) официально был представлен компанией Google 1 октября 2012 года. Это бесплатная программа, призванная управлять рекламными мероприятиями и отслеживать теги на вашем сайте. Если говорить простым языком, это метки, но не для тегирования материалов. Здесь речь идет о тегировании посетителей.

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

Чтобы четко понимать, что такое GTM, или Google Tag Manager (GTM), приведем простой пример. Как нам известно, диспетчеры — обязательное звено в процессе обработки заказов в интернет-магазинах, такси, сервисах доставки еды. Именно они координируют и обеспечивают работу всей организации. Такую же роль играет GTM. Благодаря ему отпадает необходимость разрываться между приложениями, задачами и программами. Можно объединить все в одно целое и раздавать команды централизованно.

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

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

По какому принципу работает Google Tag Manager?

  • Сначала вам нужно разместить на своем веб-сайте или в мобильном приложении код Google Tag Manager.
  • Далее через интерфейс Google Tag Manager разместить на сайте нужные сервисы (Google Analytics или Яндекс.Метрику, программы ретаргетинга/ремаркетинга и т. д.), а также события (триггеры), при которых будет происходить активация сервисов: загружаться страница, отправляться форма, нажиматься кнопка и т. д.

Google Tag Manager позволяет размещать на веб-сайтах коды разных программ и специализированных служб: Google Analytics, Яндекс.Метрики, Google.Карт, социальных сетей и т. д. Благодаря этому использовать сторонние ресурсы и повышать эффективность действия сайта становится намного проще.

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

Google Tag Manager в управлении тегами

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

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

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

  • Google Analytics — само собой.
  • Kiss Metricks — чтобы более глубоко изучать аудиторию.
  • AdRoll — для ремаркетинга.
  • fi — тоже для ремаркетинга.
  • Optimizely — чтобы тестировать CRO (conversion rate optimization).
  • Наверняка они также располагают интеграциями сторонних кодов на страницах конверсий, как при работе с AdWords или любыми другими сервисами, где нужно размещать код в виде некоторого пикселя.

Как вы считаете, к чему приводит желание кого-то из маркетинговой команды откорректировать теги?

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

Это негибкий и невеселый процесс.

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

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

10 достоинств GTM:

  • Легкая настройка Google Analytics через Tag Manager, а также Яндекс.Метрики. Программа работает с различными программами сбора данных, к примеру DoubleClick, AdRoll, Kiss Metrics и другими.
  • Простота и удобство в работе. Программа требует от юзера минимум сведений: большинство функций автоматизировано, а настроить основные скрипты можно в 2-3 шага. Также позволяет оперативно изменять настройки аналитики.
  • Бережет время веб-мастеров. Как правило, для настройки счетчика на сайте необходимо поменять код. Здесь нужно разработать техническое задание разработчику или исполнителю. Каждое новое звено в цепи — дополнительные временные затраты. Даже небольшие правки замедляют решение вопроса на несколько дней.
  • Зачастую программа влияет на цену услуг подрядчика, так как специалист быстрее решает задачу. С помощью Google Tag Manager временные затраты удалось сократить от 2 до 4 часов. Это дает возможность клиенту экономить от 3 тыс. рублей и более.
  • Программа имеет удобную и понятную структуру. В ней есть единый контейнер со всеми нужными скриптами. В связи с этим размещать в коде сайта несколько счетчиков нет необходимости. Хватает одного — от Google Tag Manager.
  • Позволяет управлять несколькими аккаунтами. Очень выручает, когда у дилерского центра в рамках одного предприятия есть автосалоны разных брендов.
  • Дает гостевой доступ для показа настроек без возможности их изменения.
  • Собирает информацию с сайтов и мобильных приложений. Одна программа собирает информацию для анализа из различных источников.
  • Хранит предыдущие версии настроек и дает возможность возобновить их, если нужно. Поэтому вносить правки можно почти безболезненно и в сжатые сроки.
  • Не влияет на работу веб-страницы и ее элементов — при условии корректной установки.

Какой бизнес нуждается в управлении тегами с помощью Google Tag Manager

Какой бизнес нуждается в управлении тегами

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

Google Tag Manager (GTM) (Диспетчер тегов) — бесплатная программа от Google, с помощью которой можно:

  • размещать пользовательские JavaScript и HTML-скрипты на сайте, не вмешиваясь в его код;
  • устанавливать правила выполнения скриптов;
  • интегрировать информацию о поведении юзеров с аналитическими системами, например, Google Analytics и Яндекс.Метрикой, инструментами управления рекламой в Интернете, к примеру, Google AdWords, и прочими внешними программами, которые используются в работе;
  • вместе с аналитическими программами отслеживать и анализировать поведение пользователей веб-сайта и эффективность каналов рекламы.

Настраивать и управлять размещением скриптами можно через пользовательский интерфейс инструмента. Участие программистов не требуется. Исключение составляет лишь установка кода GTM на сайте.

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

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

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

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

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

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

  • На лендингах GTM помогает точнее замерить процент отказов (все знают: Google Analytics считает, что пользователь пробыл на сайте 0 секунд, если открыл его и больше ничего не сделал (например, не подал заявку). Однако человек мог прочесть отзывы или записать телефон или email).
  • На более сложных сайтах (корпоративных, интернет-магазинах), которые хотят контролировать целевые действия, учитывать в офлайн-конверсии (GTM позволяет удобно настраивать любые цели в Google Analytics самостоятельно) и передавать идентификатор пользователя в CRM.

Поговорим о Google Tag Manager подробнее.

С чего начать работать с Google Tag Manager

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

  • Аккаунт.
  • Контейнер.
  • Теги.
  • Правила.
  • Макросы.

Эти термины вы встретите и далее в статье, и в любых документах Google.

Аккаунт есть аккаунт. Рассказывать о нем, думаем, не нужно.

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

Тег — фрагмент JS-кода. Все те скрипты, которые ранее мы вручную размещали на страницах сайта, например код Google Analytics, код отслеживания конверсий AdWords, пользовательский код и т. д.

Правило — условие, при котором будет вызван или выполнен тег или наоборот (заблокирован). Так, для кода Google Analytics правилом вызова будет: «на всех страницах».

Макросы — пары типа имя/значение, для которых передаются значения в ходе работы. Применяются при настройке правил.

Макросы

Менеджер тегов по умолчанию состоит из трех макросов:

  • URL-макрос

Имя — URL, значение — URL вне зависимости от верхнего уровня. Пример:

If URL = /confirmation.html send our 'Conversion' tags.

На ваших страницах конверсий наверняка множество кодов типа AdWords, eCommerce, аналитических систем и других трекеров.

  • HTTP Referrer

Имя — HTTP Referrer, значение — предыдущая веб-страница, на которой побывал человек.

Пример:

If referring page matches Twitter or Facebook, send the 'Referred by Social' tags.

Может быть, вы захотите применить значение пользовательской переменной (custom variable) из Google Analytics.

  • Event-макрос

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

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

Пример кода:

dataLayer.push({'event': 'event_name'});

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

<form id="user_data" class="ignore_dblclick" method="post" action="https://www.seomoz.org/cart/purchase_checkout">

<form id="user_data" class="ignore_dblclick" method="post" action="https://www.pomidori.org/cart/purchase_checkout" onsubmit="dataLayer.push({'event': 'form_submitted'});">

If event = 'abandonedFunnel' — send the 'Cart Abandoned' tags.

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

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

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

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

  1. Зарегистрируйтесь и создайте контейнер

Для добавления на сайт контейнера GTM авторизуйтесь на странице сервиса и заведите новый аккаунт.

Регистрация

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

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

Далее нужно скопировать код и вставить его на сайт. Если вы работаете с сайтом, который управляет CMS WordPress, используйте плагины для вставки кода, например Head, Footer and Post Injections. Первую часть кода необходимо вставить в хедер максимально близко к открывающему тегу, а вторую — в тело веб-страницы, сразу после тега <body>.

Тело веб-страницы

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

  1. Использование переменных Google Tag Manager

Теги в диспетчере активируются, когда значения триггера и переменной, которую задал пользователь, совпадают. К примеру, во встроенной переменной Click Text всегда есть какой-то текст, а переменная Click URL — URL. Здесь триггер Google Tag Manager активируется, если значение переменной совпадает с параметрами, заданными посетителем: с помощью клика по элементу с указанным текстом или URL.

Чтобы управлять переменными, выберите нужный раздел в меню.

Чтобы управлять переменными, выберите нужный раздел в меню

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

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

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

  • Страницы. Переменной может быть полный URL (Page URL), относительный URL (Page Path), имя хоста страницы (Page Hostname), источник запроса (Page Referrer).
  • Утилиты. Переменные этого типа состоят из событий, ID и версии контейнера, названия рабочей области и ID HTML-тега.
  • Ошибки. Эти встроенные переменные состоят из просмотра контейнера в режиме отладки, сообщения об ошибке, ее URL и номера строки.
  • Клики. Переменной могут быть HTML-элементы, классы элементов, URL, текст элемента, атрибуты target и ID элемента.
  • Формы. Можно использовать как переменную элементы и классы формы, атрибуты target и href и текст формы.
  • История. Переменные этого типа поддерживают активацию триггера, если меняется хеш URL. Переменной могут быть новый и старый фрагменты URL, новое и старое состояние истории, а также ее источник.

Когда переменная включается, она появляется в фильтре при формировании триггера.

  1. Используйте триггеры Google Tag Manager

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

Триггеры Google Tag Manager

На странице настройки триггера обозначьте название и выберите вид.

На странице настройки триггера обозначьте название и выберите вид

В Google Tag Manager есть триггеры следующих типов:

  • Просмотр веб-страницы. Активация этого типа происходит по готовности объектной модели инструмента («Модель DOM готова»), после того, как все элементы страницы загружены («Окно загружено»), или сразу после того, как пользователь перешел на страницу.
  • Клик. Триггер этого типа отслеживает клики по ссылкам и любым элементам веб-сайта, на которые можно кликать.
  • Другие виды. Здесь можно выделить «Ошибку JavaScript», «Таймер», «Пользовательские события», «Отправку формы» и «Изменение в истории».

Итак, вы выбрали тип триггера. Теперь настройте условия его активации: выберите переменную и укажите, что она означает. К примеру, для отслеживания переходов по определенному URL, нужно выбрать тип переменной Click URL и указать значение URL.

Настройте условия активации триггера

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

Как использовать Google Tag Manager для решения конкретных маркетинговых задач сайта

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

  1. Добавляйте на сайт теги ретаргетинга и ремаркетинга

    Для добавления кода ретаргетинга «ВКонтакте» через Google Tag Manager сформируйте новый тег. Затем выберите тип «Пользовательский HTML». Поместите в предложенном поле код ретаргетинга. Его можно сформировать в разделе «Ретаргетинг» кабинета рекламодателя «ВКонтакте». Обозначьте в поле «Триггеры активации» вариант All Pages. Если нужно, чтобы код срабатывал при посещении определенных веб-страниц, указывайте их URL в триггере типа «Просмотр страницы». Далее нужно сохранить изменения и опубликовать тег.

    Добавляйте на сайт теги ретаргетинга и ремаркетинга

  2. Подтверждайте права на веб-сайт через Google Tag Manager

    Если ваши права на сайт еще не подтверждены в кабинете вебмастера Google, воспользуйтесь для этого диспетчером тегов. В Search Console нужно выбрать соответствующий способ и нажать «Подтвердить».

    Подтверждайте права на веб-сайт через Google Tag Manager

  3. Если нужно, аналогично подтвердите все версии сайта.

  4. Добавляйте кнопки шеринга на изображения

    Это один из распространенных способов мгновенно интегрировать веб-сайт со сторонними площадками при помощи Tag Manager. Нужно скопировать код кнопок шеринга выбранной площадки, к примеру AddThis, создать тип тега «Пользовательский HTML» и вставить код кнопок. Триггером активации может быть вариант All Pages. Далее нужно сохранить изменения и опубликовать контейнер.

    Добавляйте кнопки шеринга на изображения

    Затем проверить, корректно ли работают кнопки шеринга.

  5. Отслеживайте внутренние переходы на веб-сайте

    Для удобного мониторинга внешних кликов можно использовать UTM-метки. А для отслеживания внутренних переходов — события в Google Analytics.

    Ваша задача — представить, что нужно отследить клики по определенной ссылке. Выберите в GTM меню «Переменные — Настроить — Click URL». Это позволит активировать необходимую переменную.

    Отслеживайте внутренние переходы на веб-сайте

    Сформируйте новый триггер в разделе «Триггеры». Выберите тип «Клик — Только ссылки».

    Сформируйте новый триггер в разделе «Триггеры»

    На следующей веб-странице проставьте галочку на опциях «Ждать теги» и «Все клики по ссылкам». Условием выполнения триггера обозначьте ссылку целевой страницы и сохраните изменения.

    Условием выполнения триггера обозначьте ссылку целевой страницы

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

    Чтобы мониторинг был удобен, необходимо, чтобы значение в поле «Ярлык» соответствовало выбранному действию

    Когда контейнер будет опубликован, вы сможете мониторить выбранное событие в главе Google Analytics «Поведение — События».

    «Поведение — События»

  6. Отслеживайте переходы по всем внешним ссылкам

    Здесь мы имеем в виду переходы по любым внешним ссылкам, которые присутствуют на сайте. Создайте пользовательскую переменную, выбрав тип компонента «Имя хоста» для переменной типа URL. Поставьте флажок в опции «Убрать www». В дополнительных настройках вам нужно указать в поле «Источник URL» значение Click URL.

    Переходы по всем внешним ссылкам

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

    «Клик — Все элементы»

    Создайте тег активации триггера. Выберите тип Universal Analytics. Выберите форму отслеживания, заполните поля «Категория», «Действие» и «Ярлык». Разместите тег в контейнере.

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

  7. Отслеживайте клики по конкретной внешней ссылке

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

    Тип URL и указать тип компонента «Полный URL»

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

    Выберите в условиях активации значение «Некоторые ссылки»

    Далее нужно сохранить триггер. Создайте тег Universal Analytics и разместите его в контейнере.

  8. Уточняйте количество отказов

    Google Analytics не способен точно подсчитать значение этого показателя, если пользователь за сеанс просматривает только одну веб-страницу. Подсчитать показатель может Google Tag Manager.

    Сделайте новый триггер, указав тип «Таймер».

    Сделайте новый триггер, указав тип «Таймер»

    В поле «Интервал» впишите время активации триггера. Так, чтобы активировать таймер через 30 секунд, вам нужно указать 30 000 миллисекунд. В поле «Ограничение» обозначьте значение «1» — для активации таймера один раз для каждой сессии.

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

    Обозначьте условия активации триггера

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

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

    Вы сможете следить за уточненным процентом отказов в Google Analytics

  9. Отслеживайте взаимодействия с контактной формой

    При наличии контактных форм на сайте отслеживать заполнения можно при помощи GTM. Для этого в меню «Переменные» нужно активировать переменную Form Classes.

    Отслеживайте взаимодействия с контактной формой

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

    Тип «Отправка формы»

    Перейдите в настройки триггера и переключите флажок в положение «Некоторые формы». В качестве условий активации необходимо указать «Фильтр Form Classes содержит» и написать значение атрибута Form Classes.

    «Фильтр Form Classes содержит»

    Затем нужно создать соответствующий тег Universal Analytics, сохранить изменения и опубликовать контейнер. Значение атрибута Form Classes есть в коде веб-страницы.

  10. Отслеживайте клики по социальным кнопкам и виджетам

    Почти на всех сайтах есть социальные плагины, к примеру виджеты страниц в Facebook и «ВКонтакте», кнопки Follow Me. Диспетчер тегов Google Tag Manager позволяет отслеживать клики по конверсионным кнопкам виджетов типа «Мне нравится» и «Подписаться». Так, вы можете настроить отслеживание кликов Google Tag Manager по иконке Twitter в блоке Follow Me.

    Отслеживайте клики по социальным кнопкам и виджетам

    В меню «Переменные» нужно активировать переменную Click Classes.

    В меню «Переменные» нужно активировать переменную Click Classes

    Вам необходимо создать триггер, выбрать тип «Клик — все элементы», поставить галочку в положение «Некоторые клики». В фильтре активации укажите значение атрибута class кнопки Twitter из блока Follow Me. Он есть в коде элемента.

    Затем вы должны добавить информацию в фильтр диспетчера тегов и сохранить изменения. Сделайте соответствующий тег Universal Analytics и опубликуйте измененный контейнер.

    Информация в фильтр диспетчера тегов

  11. Отслеживайте переходы по тексту клика

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

    Отслеживайте переходы по тексту клика

    Создайте триггер, выберите тип «Клик — все элементы». Поставьте флажок в положение «Некоторые клики». Далее нужно выбрать фильтр Click Text. Отметьте «Содержит» как условие для активации и укажите необходимый текст.

    Тип «Клик — все элементы»

    Сформируйте и разместите тег Google Analytics.

  12. Мониторьте конкретные источники трафика извне

    Google Tag Manager позволяет в удобном режиме отслеживать число посетителей с конкретных веб-сайтов. Обозначьте переменную Referrer. Правилом для активации сделайте «Содержит» и добавьте ссылку источника, который хотите мониторить.

    Переменная Referrer

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

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

  13. Используйте GTM, чтобы внедрять микроразметку

    Следуйте этому совету, если внедряете на веб-сайт микроразметку уникальных видов. В них содержится одинаковая информация вне зависимости от страницы сайта. Так, вы можете внедрить микроразметку Organization.

    Используйте генератор Schema JSON — LD или аналогичный инструмент для получения кода. Вам нужно создать тег типа «Пользовательский HTML» и вставить код разметки. Далее — выбрать триггер активации All Pages.

    Используйте GTM, чтобы внедрять микроразметку

  14. Отслеживайте источники трафика, используя события Google Analytics

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

    Требуется создание пользовательской переменной типа «Источник ссылки HTTP» и указать тип компонента «Имя хоста».

    Переменная типа «Источник ссылки HTTP»

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

    Сделайте и разместите в контейнере тег Google Analytics. Далее в разделе «События — Обзор — Категория событий» Google Analytics сможет мониторить источники трафика.

    «События — Обзор — Категория событий» Google Analytics сможет мониторить источники трафика

    И это отнюдь не все, на что способен диспетчер Tag. Благодаря вышеуказанным примерам вы сможете научиться работать с GTM и без посторонней помощи отбирать критерии для отслеживания, используя аналитические службы и размещать на сайте коды интернет-сервисов.

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

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

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

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

Чтобы узнать селектор CSS, можно просмотреть код элемента. Правой кнопкой мыши необходимо кликнуть на необходимый элемент и выбрать пункт «Посмотреть код»:

Селекторы CSS

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

Пункт Copy > Copy selector

Скопируйте селектор и вставьте в Click Classes триггера. Важно: выберите — Соответствует селектору CSS. Сохраните.

Важно: выберите — Соответствует селектору CSS

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

Работа с Яндекс.Метрикой и Google Analytics через Google Tag Manager

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

Чтобы лучше понять, как работать с тегами, посмотрите, как ресурс интегрируется с аналитическими системами Яндекс.Метрика и Google Analytics.

  1. Google Tag Manager и Google Analytics

    Как подключить Google Tag Manager? Сначала нужно подключить сайт к Google Analytics. В рабочей области выберите функцию «Добавить новый тег». Далее — выбрать тег типа Universal Analytics или «Классический Google Analytics» в разделе «Конфигурация». Google советует пользоваться Universal Analytics.

    Google Tag Manager и Google Analytics

    Обозначьте идентификатор ресурса. Он указан в аккаунте Google Analytics в разделе «Администратор — Ресурс — Код отслеживания». В разделе «Тип отслеживания» необходимо выбрать «Просмотр страницы».

    В разделе «Тип отслеживания» необходимо выбрать «Просмотр страницы»

    В разделе «Триггеры» нужно выбрать «Все страницы» и сохранить изменения.

    Если на сайте реализованы AMP, диспетчер позволяет подключить ускоренные страницы к аналитическим сервисам. Если сайт работает на WordPress, нужно установить надстройку AMP for WordPress. Включите в главе Analytics отслеживание при помощи Tag Manager, обозначьте ID контейнера, вид аналитической службы и идентификатор аккаунта в Google Analytics.

    Включите в главе Analytics отслеживание при помощи Tag Manager

    По такому же принципу ресурс можно интегрировать с другими сервисами.

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

  2. Google Tag Manager и Яндекс.Метрика

    Google Tag Manager, Метрика также успешно интегрируются. Необходимо подключить веб-сайт к Яндекс.Метрике. Для этого требуется добавление нового тега. Обозначьте в настройках конфигурации тип «Пользовательский HTML».

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

    Разместите код счетчика Яндекс.Метрики в соответствующем поле. Он представлен в разделе «Настройки» аналитического сервиса. Далее нужно выбрать триггер All Pages.

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

    Перед тем как опубликовать контейнер, примените функцию «Предварительный просмотр и отладка».

    Функция «Предварительный просмотр и отладка»

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

    Теги Google Analytics и Яндекс.Метрики работают правильно:

    Теги Google Analytics и Яндекс.Метрики работают правильно

    Разместите контейнер. Убедитесь в том, что аналитические службы работают корректно. В Analytics вы можете отправить тестовый трафик в разделе «Администратор — Ресурс — Код отслеживания». В Яндекс.Метрике правильность работы счетчика можно проверить при помощи кнопки, которая отмечена на иллюстрации.

    В Яндекс.Метрике правильность работы счетчика можно проверить при помощи кнопки

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

Благодаря GTM мониторить и анализировать эффективность сайта становится намного легче. Комплект встроенных и пользовательских переменных дает хорошие возможности для быстрой настройки отслеживания почти любых событий на ресурсе.

article_banner.png
google tag managergoogle tag manager настройкаgoogle tag manager метрикаgoogle tag manager установкаgoogle tag manager как установитькод google tag managerдиспетчер тегов google tag managerтриггер google tag managerкак подключить google tag managergoogle tag manager электронная коммерцияпример использования google tag managergoogle tag manager e commerceотслеживание кликов google tag managerнастройка google analytics через tag manager

Статья опубликована:

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

Генератор Продаж
Опубликовано
Генератор Продаж
г. Рязань, Куйбышевское шоссе, 25
Телефон: 8 (800) 775-43-06