Как настроить передачу виртуальной страницы в Яндекс.Метрика и Google Analytics с помощью Google Tag Manager

Статья научит передавать данные по микроконверсиям в системы Google Analytics и Яндекс.Метрика с использованием виртуальных страниц. Материал расширит знания о применениях Google Tag Manager и будет полезен для интернет-маркетологов и начинающих веб-аналитиков.

Для каких целей используют виртуальную страницу?

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

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

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

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

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

Пример несложной квиз-механики на сайте
Пример реализации quiz-механик на странице

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

Стандартные методы передачи события

Настроить передачу виртуальной страницы в Google Analytics можно стандартным JavaScript кодом — просто «вешаем» на каждую кнопку следующую конструкцию, которая отправит просмотр виртуальной страницы по клику на кнопку:

ga('send', 'pageview', /virtual/page);

здесь: send, pageview – стандартные команды библиотеки analytics.js;
/virtual/page – путь виртуальной страницы, заданный вручную.

Для передачи события в Метрику использовать потребуется такую строчку кода:

yaCounterXXXXXXXX.hit('/virtual/page');

здесь: XXXXXXXX — номер вашего счетчика в Метрике;
/virtual/page — виртуальный адрес страницы, заданный вручную.

Код должен добавляться к элементу и инициировать отправку просмотра страницы /virtual/page при клике на элемент.

Адрес виртуальной страницы для каждого элемента должен быть уникальным.

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

Передача виртуальной страницы в Google Analytics

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

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

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

На этом этапе определим, к какому элементу кнопки нам лучше всего привязать срабатывание триггера. Мы можем использовать уникальный CSS селектор кнопки, но в данном случае проще «привязаться» к уникальному названию элемента — «Для менеджера» и «Для предпринимателя».

Выбор сценария на странице
Quiz-механика в рассматриваемом примере

Выполняем первые настройки на стороне Google Tag Manager.

  1. Перейдите в аккаунт Google Tag Manager и авторизируйтесь;
  2. Выберите контейнер и перейдите в Рабочую область;
  3. В меню слева выберите пункт Переменные;
  4. Нажмите кнопку Настроить;
  5. В конфигураторе настройки стандартных переменных включаем переменные в блоке Клики (если они до сих пор еще не активны).

Подключение стандартных переменных

  1. Теперь переходим в раздел Триггеры;
  2. Нажмите на кнопку Создать;
  3. Из списка доступных триггеров выберите Клик – Все элементы;
  4. В условиях активации триггера указываем правило Click Text – равно – ДЛЯ МЕНЕДЖЕРА;
  5. Указываем название для триггера и сохраняем триггер.

Создание триггера по клику на элемент

Важно! Название кнопки должно являться уникальным значением и не использоваться на других элементах на сайте. В противном случае потребуется «привязаться» к уникальному значению class или id.

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

Как мы уже поняли, триггер сообщает, когда и при каких условиях должно происходить срабатывание тега. Тег говорит Google Tag Manager, что именно нужно делать.

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

  1. Переходим в раздел Теги;
  2. Нажимаем на кнопку Создать;
  3. Придумываем понятное название для тега, например UA – Click – Manager;
  4. Выбираем из списка Google Аналитика – Universal Analytics;
  5. В настройках тега включаем галочку Включить переопределение настроек в этом теге;
  6. Указываем идентификатор отслеживания Google Analytics;
  7. Раскрываем вкладку Дополнительные настройки > Поля, которые необходимо задать;
  8. Добавляем новое +Поле и задаем условие Название поля — page и Значение /page/home/manager.

Создание нового тега GA

Здесь page — будет являться признаком передаваемого события, т.е виртуальной страницей, а /page/home/manager — виртуальный адрес нашей страницы, который заполняется в свободном формате. Этот адрес будет передаваться в системы веб-аналитики, по нему мы и настроем наши события на следующем шаге.

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

Конечная настройка тега для Google Analytics

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

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

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

Теперь на стороне Google Analytics необходимо проследить поступление виртуальной страницы и настроить цель.

В Аналитикс есть стандартный отчет В режиме реального времени, которые мгновенно отследит взаимодействие с кнопкой. Откройте отчет и перейдите в один из внутренних отчетов Контент. В этот отчет попадают все активные страницы на данную минуту.

Отслеживание контента в режиме реального времени

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

Важно! Убедитесь, что Представление в Google Analytics не фильтрует трафик по вашему IP-адресу. Иначе вы не увидите своих действий в отчете.

Теперь создадим новую Цель в Google Analytics.

  1. Перейдите во вкладку Администрирование;
  2. В нужном Представление выберите вкладку Цели;
  3. Нажмите на кнопку +Цель;
  4. На первом шаге «Установка цели» выберите Собственная цель;
  5. На шаге «Описание цели» укажите название цели и выберите тип события Целевая страницы;
  6. На третьем шаге «Подробные сведения о цели» указываем условие Равно > /page/home/manager;
  7. Сохраняем цель.

Добавление цели в Google Analytics

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

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

Передача виртуальной страницы в Яндекс.Метрику

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

  1. Возвращаемся в Менеджер тегов и открываем раздел Теги;
  2. Нажимаем на кнопку Создать;
  3. Придумываем название для тега, например YM – Click – Manager;
  4. В списке выбираем тег с типом Пользовательский HTML;
  5. Добавляем в поле специальный JavaScript код, который будет передавать данные о просмотре страницы в Метрику.
<script type="text/javascript">
      yaCounterXXXXXXXX.hit('/page/home/manager')
</script>

Здесь, XXXXXXXX — код счетчика Метрики в отчеты которого передается событие, а /page/home/manager — адрес виртуальной страницы

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

Настройка тега Яндекс.Метрики

Сохраняем и опубликовываем на сервер настройки.

Настройка цели в Яндекс.Метрика

На следующем шаге переходим в Яндекс.Метрику и в разделе Настройки открываем вкладку Цели. Здесь нам необходимо добавить новую цель типа Посещение страницы и указать URL-адрес виртуальной страницы с условием url: содержит. В нашем примере используем адрес – /page/home/manager.

Создание новой цели в Яндекс.Метрика

К сожалению, в Яндекс.Метрика вы не сможете проследить в режиме реального времени корректность передачи данных виртуальной страницы. Первые данные можно увидеть только в стандартном отчете Конверсии — статистика подтянется в отчет лишь через 3-5 минут, не раньше.

Отчет по совершенным конверсиям в Яндекс.Метрика

На этом наш рассказ окончен.

Мы подробно рассмотрели по шагам принципы настройки виртуальной страницы с помощью GTM и передачу данных в системы Яндекс.Метрика и Гугл Аналитикс.

Если у вас остались какие-то вопросы, то задавайте обязательно в комментариях ниже или пишите на почту info@konstantinbulgakov.com.

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

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

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

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

Создание и установка пикселя

Пиксель Facebook — это фрагмент JavaScript кода, который позволяет отслеживать посетителей сайта, измерять результативность, оптимизировать рекламу и создавать аудитории для рекламных кампаний.

Пример кода пикселя:

<!-- Facebook Pixel Code -->
<script>
 !function(f,b,e,v,n,t,s)
 {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
 n.callMethod.apply(n,arguments):n.queue.push(arguments)};
 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
 n.queue=[];t=b.createElement(e);t.async=!0;
 t.src=v;s=b.getElementsByTagName(e)[0];
 s.parentNode.insertBefore(t,s)}(window, document,'script',
 'https://connect.facebook.net/en_US/fbevents.js');
 fbq('init', '1864293041984268');
 fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=1864293041984268&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Пиксель позволяет:

  1. Убедиться, что вашу рекламу видят нужные люди, которые посетили конкретную страницу или выполнили определенное действие на сайте.
  2. Увеличить продажи, автоматически настроив ставки, чтобы охватить людей, которые с наибольшей вероятностью выполнят нужное действие (например, совершат покупку).
  3. Измерить результативность рекламы. Отслеживайте события, которые происходят в результате просмотра рекламы, чтобы лучше понимать, как она влияет на поведение людей.

Установка пикселя ничем не отличается от установки счетчика Яндекс.Метрики или кода отслеживания Google Analytics. Если у вас есть доступ к коду сайта, вы можете сами добавить пиксель Facebook перед закрывающим тегом </head>.

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

Для начала создадим пиксель отслеживания в рекламном аккаунте Facebook.

  1. Откройте рекламный аккаунт и выпадающем окне в блоке Events Manager выберите Пиксели.

Пиксели в Рекламном аккаунте Facebook

Теперь выполните последовательность действий:

  1. Нажмите Создать пиксель;
  2. Укажите название пикселя и нажмите Продолжить;
  3. Введите URL сайта и нажмите Продолжить.

Отлично! После создания пикселя Facebook вы можете разместить полученный код на своем сайте. Теперь самое время воспользоваться Google Tag Manager и выполнить следующие несложные настройки:

  1. Перейдите в аккаунт Google Tag Manager и авторизируйтесь;
  2. Выберите контейнер и перейдите в рабочую область;
  3. В меню слева выберите пункт Теги;
  4. Нажмите на кнопку Создать;
  5. Из списка доступных тегов выберите тег типа Пользовательский HTML;
  6. В пустое поле вставьте код пикселя полученного на предыдущем шаге;
  7. В нижнем блоке настроек тега добавьте стандартный триггер — All pages, который будет активировать пиксель на всех страницах сайта;
  8. Придумайте понятное название для нового тега, например FB — PIXEL и сохраните настройки.

В итоге должно получиться следующее:

Настройка конфигурации тега

Как проверить работу пикселя

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

Если все настроено корректно, то вы увидите такое сообщение:

Статус работы пикселя

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

Типы событий в Facebook

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

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

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

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

Структура кода Facebook

Иерархия здесь имеет три уровня вложенности:

  • Первый уровень: Код на странице вашего сайта.
  • Второй уровень: Базовый код пикселя Facebook добавленный на страницу.
  • Третий уровень: Код стандартного или специально настроенного события. На скриншоте показано событие добавления товара в корзину, которое является стандартным.

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

Чтобы отследить посещение страницы с благодарностью за подписку https://site.ru/thanks, нам достаточно добавить несложный код на нужную страницу:

<script>
   fbq('track', 'ViewContent');
</script>

Код можно разместить вручную на страницу (как показано на предыдущем шаге на скриншоте) или воспользоваться инструментом Google Tag Manager, активируя работу тега при просмотре страницы  /thanks.

Фейсбук будет получать событие ViewContent с URL адреса /thanks, что и будет являться сигналом к тому, что событие на странице было успешно выполнено.

Надеюсь, что это понятно.

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

Настройка события с помощью GTM

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

Для примера — у нас есть сайт на конструкторе Tilda. Нужное настроить отправку события отправки лида с контактной формы. Т.е другими словами — пользователь заполняет popup на сайте со своими персональными данными и отправляет информацию.

Всплывающая форма на сайте при отправке данных пользователя передает специальный параметр формы в Уровень данных (dataLayer) — submit_form187454852. В данном случае мы сможем привязать отправку формы именно к передачи этого параметра.

Запомним параметр и возвращаемся в Google Tag Manager.

  1. Переходим в раздел Триггеры и создаем новый;
  2. Выбираем триггер с типом Пользовательское событие;
  3. В настройках триггера указываем строчку submit_form187454852 в поле Имя события;
  4. Указываем название для триггера и сохраняем.

Настройка триггера Пользовательское событие

Далее создаем новый тег.

  1. Переходим в раздел Теги и создаем новый;
  2. Добавляем тег с типом Пользовательский HTML;
  3. В пустое поле добавляем код отслеживания для такого события:
<script>
   fbq('track', 'Lead');
</script>

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

Создание тега передачи события о лидах

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

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

Ads Manager — это инструмент Facebook, с помощью которого вы можете создавать рекламу и управлять аудиториями. Можно просматривать статистику собранную пикселем и вносить изменения в настройки кампаний.

Чтобы открыть Ads Manager, перейдите по ссылке https://www.facebook.com/ads/manager.

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

  1. Перейдите в Ads Manager;
  2. В выпадающем меню выберите Все инструменты;
  3. В блоке Ресурсы выберите Аудитории.

Аудитории в Ads Manager

  1. На странице нажмите кнопку Создать аудитории и выберите Индивидуализированная аудитория.
  2. Используйте собственные источники — Сайт. Позволит использовать данные, которые были собранные пикселем именно с сайта.
  3. Задайте правила и условия для новой аудитории — правила бывают стандартные и для событий пикселя. Добавьте в раздел нужные вам правила.
  4. Добавьте разделы правила, включающие и исключающие людей. Для каждой аудитории можно настроить до 5 разделов правил.
  5. Укажите понятное название для пользовательской аудитории и сохраните настройки.

Добавление аудитории

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

Остались вопросы?

Задавать ваши вопросы прямо на этой странице — в специальной форме ниже. Или просто пишите комментарии на адрес почты info@konstantinbulgakov.com.

Как отключить показ рекламы на компьютерах в Яндекс.Директ и Google Ads

В статье рассказывается о методах отключения показов контекстной рекламы для пользователей с десктопов на платформах Яндекс.Директ и Google Реклама. Информация пригодится специалистам по контексту и маркетологам.

Как часто вам приходиться ограничивать показ рекламных объявлений для пользователей с мобильных устройств?

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

  • Плохая верстка адаптивных страниц;
  • Долгая загрузка и отрисовка контента;
  • Нецелевой трафик льющийся из мобильных приложений;
  • Низкий процент конверсий в продажу (тесно переплетается с предыдущими тремя пунктами).

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

В этом материале мы отключим трафик с ПК в рекламных кампаниях Google Реклама и Яндекс.Директ.

Отключение показов в Яндекс.Директ

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

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

1. Зададим в настройках геотаргетинга понижающую корректировку ставок -90% для нашего региона показов.

Корректировка ставок по региону

2. Затем в корректировках повысим ставку для мобильных устройств на 1000%.

Корректировка ставок для мобильных устройств

Мы отключили показы по нашему региону для всех пользователей (в том числе с ПК), а в блоке с корректировкой увеличили ставку на 1000% для мобильного трафика.

Чтобы стало понятнее, разберем математику на примере.

Расчет цены клика для мобильных устройств=(100-90)*1000%

Если ставка 100 рублей, то понижение по региону на -90% превратит её в 10 рублей. И повышение этой ставки на 1000% вернет её к значению в 100 рублей, но теперь уже только для мобильной аудитории.

Отключение показов в Google Ads

С Google Ads ситуация проще. Функционал системы настолько продуман, что не нужно действовать костыльными методами и изобретать велосипед. Достаточно на уровне кампании или группы объявлений скорректировать ставки для различных типов устройств.

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

Для полного отключения задаем условие Уменьшить на -100%.

Отключение показов рекламы на ТВ

По такому же принципу можно отключить показы на планшетах или на смарт ТВ.

Корректировка по устройствам в Google Ads

Важно! Вы можете не только отключать показы, указывая понижающую корректировку -100%, но и повышать ставку для устройств, которые имеют высокий коэффициент конверсий.

Узнать какие устройства лучше конвертируются в заказы и обращения не сложно. Достаточно обратиться к стандартному отчету системы веб-аналитики.

Разберем типовой случай на примере Яндекс.Метрики и сформируем отчет по устройствам. Определим устройства трафик с которого приносит не только больше конверсий, но и лучше конвертируется в целевые действия.

  1. Переходим в аккаунт Яндекс.Метрики;
  2. Открываем отчет по устройствам Отчеты — Технологии — Устройства;
  3. Из списка доступных целей выбираем цель и получаем отчет для анализа.

Отчет по конверсии с устройств в Метрике

В моем примере видно, что трафик с ПК (0,92%) почти вдвое конвертируется лучшем, чем со Смартфоном (0,54%) и Планшетов (0,51%).

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

Остались вопросы?

Оставляйте комментарии в форме ниже или пишите вопросы на адрес электронной почты info@konstantinbulgakov.com.

Как установить Google Tag Manager: инструкция и возможности инструмента

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

Ребята, эта статья зрела! Мне поступает много писем, в которых вы задаете базовые вопросы по работе с GTM. Поэтому я решил собрать все в одном месте и предоставить ответы коротко и по делу.

Что такое Google Tag Manager

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

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

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

Как работает передача данных через Google Tag Manager

Однако, на мой взгляд, основная ценность Менеджера тегов совсем в другом —  отслеживание и передача данных, которые нет возможности увидеть напрямую в Google Analytics или Яндекс.Метрике, а именно:

  1. Отслеживание взаимодействия с отдельными элементами страницы (слайдеры, поля и кнопки, социальные взаимодействия, табы и списки, изображения, фильтры и т.д);
  2. Отправка форм;
  3. Клики по ссылке или элементу;
  4. Просмотр контента;
  5. Глубина скроллинга страницы;
  6. Взаимодействия с видеоконтентом;
  7. Настройка онлайн-консультантов и других виджетов;
  8. Взаимодействие с картами;
  9. Отслеживание всплывающих окон;
  10. Отправка события по таймеру;
  11. Копирование контента — текста или email;
  12. Скачивание PDF, DOCX, PPTX, XLSX;
  13. Настройка подмены контента на сайте, используя различные правила и условия.

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

Чем Google Tag Manager поможет маркетологу

Google Tag Manager серьезно развязывает руки интернет-маркетологу.

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

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

А если требуется настроить подмену контента по какому-либо параметру на сайте, то здесь маркетолог выигрывает однозначно. Настроив GTM для выполнения своих задач вы сбережете от 20 до 50 часов рабочего времени программисту.

Google Tag Manager можно с легкостью интегрировать с различными CMS и конструкторами.

Для WordPress самый простой способ, на мой взгляд, добавить javascript код прямо в тему сайта. Можно обойтись без ковыряния в коде — просто установите и настройте плагин Google Tag Manager for WordPress. По такому же принципу происходит настройка для сайтов на Битрикс.

Для Тильды все еще проще. Вы можете настроить Google Tag Manager прямо в настройках сайта в разделе Аналитика & SEO, вставив Google Tag Manager ID в специальное поле и сохранив изменения.

Настройка GTM в Тильде

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

Какие навыки нужны для работы с Google Tag Manager

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

Google говорит, что это «простой» инструмент, который любой маркетолог может использовать без участия со стороны веб-разработчика.

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

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

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

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

Как устроен Google Tag Manager

Менеджер тегов Google состоит из трех основных частей:

  1. Теги: фрагменты JavaScript или отслеживания пикселей;
  2. Триггеры: сообщают GTM, когда и при каких условиях следует запустить тег;
  3. Переменные: специальные параметры с изменяющимися значениями, которые применяются в тегах и триггерах. В триггерах они служат в качестве условий активации в фильтрах, а в тегах — для получения динамических значений в заданных параметра.

О каждом из перечисленных элементов поговорим подробнее ниже.

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

Теги — это фрагменты кода или пиксели отслеживания различных сторонних веб-сервисов.

Тег говорит Google Tag Manager, что нужно делать.

Примеры общих тегов:

  • Универсальный код отслеживания Google Analytics;
  • Код ремаркетинга Google Ads;
  • Код отслеживания конверсий Google Ads;
  • Код отслеживания Яндекс.Метрики;
  • Пиксели ВКонтакте и Facebook;
  • Код проверки гипотез Google Optimize.

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

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

Что такое триггеры?

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

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

Что такое переменные?

Переменные — это дополнительная информация, которая может понадобиться GTM для обработке тега и триггера.

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

  • Клики по кнопке или любому элементу на странице;
  • Доступность и видимость элемента на экране;
  • Подмена контента на странице с учетом источника трафика или действия пользователя;
  • Просмотр YouTube видео и т.д.

Однако, если вам требуется расширить функционал, то можно создавать собственные переменные. Самая простая переменная, которую вы можете создать в GTM, является идентификационный номер отслеживания Google Analytics UA.

Создание переменной c идентификатором отслеживания Google Analytics

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

Как настроить аккаунт в Google Tag Manager

Для начала следует убедиться, что в исходном коде сайта еще не установлен код GTM. Если его пока нет, то самое время установить.

Предлагаю коротко разобрать основные настройки и создать аккаунт и первый контейнер.

  1. Перейдите в Google Tag Manager и используйте для авторизации ваши данные в Google;
  2. В верхнем правом углу нажмите на кнопку Создать аккаунт;
  3. В появившейся форме укажите название нового аккаунта (например, можно использовать название компании или проекта);
  4. Выберите страну, например Россия;
  5. В настройках создания контейнера укажите имя контейнера (любое, например домен сайта);
  6. В настройках целевой платформы выберите Веб-сайт;
  7. Для мобильных приложений используйте Firebase SDK для Android и iOS.
  8. Нажмите кнопку Создать.

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

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

Как добавить контейнер в существующий аккаунт

  1. В Менеджере тегов нажмите Аккаунты а затем Ещё рядом с названием нужного аккаунта;
  2. Выберите Создать контейнер;
  3. Выберите тип ресурса и нажмите Создать.

Создание контейнера

Установка контейнера

  1. В Менеджере тегов откройте раздел Рабочая область;
  2. Вверху страницы вы увидите идентификатор контейнера в формате GTM-XXXXXX;
  3. Нажмите на идентификатор;
  4. Скопируйте и вставьте фрагменты кода на свой сайт;
  5. Разместите верхний фрагмент кода (начинающийся со <script>) в разделе <head> веб-страницы. Желательно сделать это как можно ближе к открывающему тегу <head>, но после деклараций dataLayer;
  6. Разместите нижний фрагмент кода (начинающийся с <noscript>) сразу после тега <body>.

Готово! Теперь давайте на двух примерах попробуем разобраться с основными принципами работы GTM — настроим передачу целей в Google Analytics и Яндекс.Метрика.

Установка кода отслеживания Google Analytics

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

  1. Войдите в аккаунт Менеджера тегов и перейдите в раздел Теги.
  2. Нажмите красную кнопку Создать и задайте название для нового тега. Например, Отслеживание Google Analytics.
  3. Нажмите Конфигурация тега и выберите тип тега Google Аналитика — Universal Analytics.
  4. В поле Идентификатор отслеживания укажите номер Кода отслеживания Google Analytics в формате UA-XXXXXXXX-X.
  5. Поле Тип отслеживания оставляем Просмотр страницы.

Установка кода отслеживания Google Analytics на все страницы сайта с помощью GTM

Теперь переходим к настройке триггера.

  1. Нажмите ниже на блок триггеры и выберите триггер, который будет активировать созданный тег Google Analytics.
  2. Единственный триггер доступным нам по умолчанию — All Pages (Все страницы).
  3. Выберите его и нажмите Сохранить в верхней правой части экрана.

Настройка триггера Все страницы

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

Установка счетчика Яндекс.Метрика

Аналогичную задачу выполним и для Яндекс.Метрики — установим код счетчика на все страницы веб-сайта. Настройка очень похожа и отличается лишь типом тега.

Зайдите в свой аккаунт Google Tag Manager и выберите нужный контейнер.

  1. Перейдите в раздел Теги и создайте новый тег;
  2. Выберите тип тега — Пользовательский HTML;
  3. В пустую область вставьте код отслеживания Яндекс.Метрики;
  4. В нижнем блоке Триггеры выберите доступный триггер All Pages (Все страницы).;
  5. Укажите понятное название для нового тега;
  6. Нажмите Сохранить.

Получится такая настройка.

Установка кода счетчика Яндекс.Метрика на сайт

Триггер активирует работу тега GTM с кодом счетчика и данные о посещениях пользователей с сайта передаются в Метрику.

Выводы

На этом все, друзья.

Мы разобрали основные возможности GTM, перечислили ключевые скиллы необходимые маркетологу для полноценного погружение в работу с инструментом.

Мы разобрали несколько простых примеров, которые позволили вам применить полученную информацию сразу на своих проектах.

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

Ну и конечно, не забывайте делиться ссылкой на материал с коллегами)

Помогла статья?

Если остались вопросы, то пишите на адрес электронной почты info@konstantinbulgakov.com. Будем разбираться!

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

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

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

Для начала коротко изложу задачу.

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

Пример заголовка всплывающего окна

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

Решение приведенное в статье поможет без труда адаптировать контент страницы под ваши текущие бизнес-задачи и требования.

Ну что, хватит воды, предлагаю приступать к делу.

Шаг №1. Создаем пользовательскую переменную уровня данных

  1. Открываем Google Tag Manager и выбираем нужный контейнер;
  2. В левой части рабочей области находим Переменные и создаем новую пользовательскую переменную;
  3. В раскрывшемся меню выбираем Переменная уровня данных;
  4. В поле Имя переменной уровня данных добавляем {{Click Text}};
  5. Версию уровня данных оставляем по умолчанию;
  6. Активируем галочку Установить значение по умолчанию. В этом поле укажем название заголовка окна по умолчанию;
  7. Задаем понятное название для переменной и сохраняем.

Создание переменной уровня данных

В примере я указал название переменно change_formname. Дословно можно перевести как «изменение названия имени формы». Даже если через какое-то время вы вернетесь к настройкам и забудете какая переменная отвечает за что, то название со смыслом поможет быстро разобраться в деталях.

Шаг №2. Создаем пользовательскую переменную типа Таблица поиска

Не спешите уходить от переменных, с ними мы еще не закончили.

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

  1. Создаем еще одну пользовательскую переменную, но на этот раз переменную Таблица поиска и выбираем ее;
  2. В качестве входной переменной указываем переменную {{Click Text}};
  3. В поле Входные данные указываем текст при клике на который должна срабатывать подмена, а в поле Результат какой текст используем для подмены в форме. Например, если посетитель нажимаем по кнопке «Заказать звонок», то заголовок появившегося окна будет иметь аналогичное название «Заказать звонок».
  4. Активируем галочку и устанавливаем значение по умолчанию. В поле укажите стандартную фразу, которая будет показана пользователю если по какой-то причине подмена контента не сработает.
  5. Указываем понятное имя новой переменной и сохраняем.

Создание переменной Таблицы данных

Рекомендую прописывать входные данные строчными и заглавными буквами, чтобы со стороны GTM не возникло путаницы с написанием элементов.

Шаг №3. Создаем триггер активации события

Переходим в раздел Триггеры, где создадим условие активации будущего тега.

  1. Создаем новый триггер;
  2. Выбираем тип Все элементы;
  3. В условиях активации триггера устанавливаем Некоторые значение;
  4. Устанавливаем условие, в котором я пропишу правило срабатывания сразу для всех кнопок с использованием регулярки:
[Click Text > Соответствует регулярному выражению > Заказать звонок|Подобрать решение|Получить предложение|Задать вопрос]

Мы указываем значения и Диспетчер тегов сравнивает их со значениями переданными в переменную Click Text. Если переменная совпадает с указанным значениями, то условие срабатывания считается выполненным.

Создание триггера подмены контента

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

В вашем же случае конструкция может быть проще.

Если вы настраиваете подмену для элемента в котором всегда используется только одна фраза, например «Отправить заявку», то условие будет таким:

[Click Text > Ровно > Отправить заявку]

Шаг №4. Создаем пользовательский HTML тег

С работой триггера разобрались, теперь переходим к созданию тега.

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

  1. Создаем новый тег;
  2. Выбираем из списка Пользовательский HTML;
  3. Добавляем следующий фрагмент кода:
<script>
 x = document.getElementsByClassName("t702__title");
 x[0].innerHTML = "{{table_formname}}";
</script>

Здесь t702__title — CSS класс подменяемого элемента, а {{table_formname}} — название переменной, которую мы создавали на самом первом шаге.

В вашем случае имя класса подменяемого элемента будет однозначно другим. Определить его можно с помощью консоли администратора в Google Chrome. Просто перейдите в режим исследования элемента (Ctrl+Shift+I) и наведите курсор на элемент.

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

Узнаем атрибут CSS для элемента страницы

Если в HTML-коде вместо CLASS для элемента задан атрибут ID, то используем другую конструкцию:

<script type="text/javascript">
 document.getElementById("ID").innerHTML="{{table_formname}}";
</script>

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

JS-код для элемента ID

Далее выбираем в самом низу ранее созданный триггер и сохраняем элемент.

Шаг №5. Запускаем предварительный просмотр

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

Включение режима предварительного просмотра

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

Если панель отладки не загружается, попробуйте запустить принудительное обновление. Сделать можно с помощью быстрых клавиш: в Windows и Linux: Shift + F5 или Ctrl + Shift + R, а в Mac: ⌘ + Shift + R.

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

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

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

Как предоставить доступ к конфигурации рабочей области:

  1. Нажмите Поделиться ссылкой для просмотра в баннере с оповещением;
  2. В открывшемся диалоговом окне укажите домен сайта (например, https://example.com/);
  3. Скопируйте URL предварительного просмотра;
  4. Вставьте URL в сообщение в чате или электронной почте и отправьте его коллеге. Ссылка ведет на целевую страницу с уведомлением о включении режима предварительного просмотра в браузере.

Шаг №6. Публикуем изменения

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

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

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

Выводы

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

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

Помогла статья?

Нашли ошибку или остались вопросы по работе с Google Tag Manager? Пишите комментарии в форме ниже или отправляйте письма на адрес info@konstantinbulgakov.com, постараюсь ответить в ближайшее время.