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

31 мая, 2020

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

Что такое виртуальные страницы?

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

  • обновляете веб-страницу (на которой установлен счетчик веб-аналитики);
  • переходите на новую страницу (на которой установлен счетчик веб-аналитики).

И в одном и другом случае у страницы есть URL-адрес, который вы видите в адресной строке браузера. И при переходе от страницы к странице он меняется. Например, на моем тестовом сайте graphanalytics.ru после заполнения формы на бесплатный аудит рекламных кампаний пользователя перенаправляет на страницу "Спасибо", которая имеет уникальный URL-адрес graphanalytics.ru/thank-you.html:

Виртуальные страницы в GTM

Пример отправки формы с двумя разными URL-адресами

И при такой реализации все очень просто - мы можем в аналитике настроить цель на просмотр этой страницы, а также в отчетах по страницам видеть статистику по переходам:

Виртуальные страницы в GTM

Статистика по страницам

Но когда дело доходит до одностраничных веб-сайтов, такое отслеживание перестает работать. Одностраничное приложение Single Page Application (SPA) - веб-сайт или веб-приложение, в котором все данные, необходимые для переходов между разделами сайта, загружаются вместе с первой страницей, а весь контент загружается динамически. Такое приложение может обновлять URL в адресной строке браузера, имитируя переходы между страницами, однако запрос другой полной страницы при этом не выполняется. Поэтому отслеживание действий на странице по мере загрузки нового контента необходимо реализовывать вручную. Это статья также отвечает на вопрос: как отследить просмотры страниц для Single Page Application (SPA)?

Независимо от того, что пользователь делает на сайте, всегда отслеживается ТОЛЬКО один, первый просмотр страницы. Например:

Виртуальные страницы в GTM

Пример отправки формы без перезагрузки страницы (без изменения URL)

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

Пример SPA-сайта

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

Виртуальные страницы в GTM

Достижение целей как виртуальные просмотры страниц (Tilda)

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

Виртуальные страницы в GTM

Пример адреса виртуальной страница проекта в настройках блока (отправка формы)

Примеры того, как выглядят адреса виртуальных страниц в Tilda:

  • tilda/popup/rec********/opened - для попапа;
  • tilda/click/rec********/button - для клика на кнопку;
  • tilda/form********/submitted - для заполнения формы.

где ******** - уникальный номер для каждого блока.

Подробнее об отслеживании целей в Tilda читайте в официальной документации.

Вот мы и подошли к самому определению виртуальных страниц. Я разделю его на две части:

  1. отправка обращения к странице в инструменты веб-аналитики (Google Analytics, Яндекс.Метрику и др.) без ее перезагрузки;
  2. передача информации в инструменты веб-аналитики о просмотре страницы, хотя на самом деле этой страницы не существует.

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

  • клики по кнопкам;
  • открытие попапов и других всплывающих элементов;
  • отправку форм;
  • табов;
  • заполнение полей в формах;
  • страницы с технологией AJAX;
  • и др.

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

Виртуальные страницы в GTM

Визуализация последовательности заполнения полей формы

В дальнейшем, на виртуальные страницы можно настраивать обычные цели типа Целевая страница (для Google Analytics) и Посещение страниц (для Яндекс.Метрики), а также составные цели.

Отслеживание виртуальных страниц

Если вы не используете Google Tag Manager, то виртуальный просмотр страницы в Google Analytics можно передать следующим образом (в зависимости от библиотеки на сайте):

Для библиотеки analytics.js:

Для библиотеки gtag.js:

, где:

  • UA-XXXXXX-X - номер счетчика Google Analytics;
  • /virtualpage - путь виртуальной страницы;

Для передачи в Яндекс.Метрику используется такая конструкция (с декабря 2018 года для нового счетчика Метрики):

, где XXXXXX - номер счетчика Яндекс.Метрики.

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

Виртуальные страницы в Google Tag Manager можно отслеживать несколькими способами:

  • с помощью условия активации и поля page, которое необходимо задать в дополнительных настройках тега;
  • с помощью триггера Изменение в истории и соответствующих переменных;
  • с помощью уровня данных (dataLayer);

Давайте разберем каждый способ подробнее.

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

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

Виртуальные страницы в GTM

Отслеживание табов

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

  1. активировать встроенные переменные типа Клики - Click Element, Click URL, Click Text и т.д.;
  2. добавить триггер активации;
  3. создать теги для передачи данных в аналитику.

Отслеживать я планирую клики по элементам с атрибутом href, поскольку у каждого есть ссылка в виде якоря #:

Виртуальные страницы в GTM

Якори

В качестве триггера я выберу Клики - Все элементы, а условие активации Click Element - соответствеует селектору CSS - a[href^="#serviceNo"]

Виртуальные страницы в GTM

Триггер активации по вкладкам (табам)

a[href^="#serviceNo"] – выбирает каждый элемент <a> с атрибутом href, значение которого начинается с #serviceNo. Теперь создадим переменную типа Таблица поиска, которая понадобится нам для отображения значения шага в пути виртуальной страницы. Выглядеть она будет так:

Виртуальные страницы в GTM

Переменная "Таблица поиска"

Логика простая - если пользователь кликает по ссылке с serviceNo-1, то результатом будет step1, если serviceNo-2, то step2 и т.д.

Все, что осталось сделать, это создать тег типа Google Аналитика - Universal Analytics с типом Просмотр страницы. В дополнительных настройках к тегу в поле Поля, которые необходимо задать следует указать page и адрес виртуальной  страницы, который заполняется произвольно. Я воспользуюсь созданной на предыдущем шаге переменной Таблица поиска и добавлю значение URL так:

Виртуальные страницы в GTM

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

Триггер активации - Клик по элементам, созданный на предыдущем шаге. Это означает, что при клике на любую из 4 вкладок в Google Analytics будет отправляться просмотр виртуальной страницы с URL /virtual-page/step1-4 шагом, в зависимости от конкретной вкладки. Сохраняем изменения.

Для Яндекс.Метрики необходимо создать тег типа Пользовательский HTML тег и вставить следующий код:

, где XXXXXX - номер вашего счетчика Яндекс.Метрики.

В GTM это выглядит так:

Виртуальные страницы в GTM

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

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

Виртуальные страницы в GTM

В режиме реального времени

Как видим, данные успешно передаются. Шаг (/step1-4) из таблицы поиска корректно подставляется в конец URL. Далее информацию по виртуальным страницам можно найти в стандартных отчетах Поведение - Контент сайта - Все страницы. В Яндекс.Метрике статистика через некоторое время отобразится в отчете Содержание - Популярное:

Виртуальные страницы в GTM

Виртуальные просмотры страниц в Яндекс.Метрике

С помощью триггера Изменение в истории и соответствующих переменных

При условии активации триггера Изменение в истории срабатывает событие gtm.historyChange, если изменился фрагмент URL (хеш, #). Но это не всегда хеш. Динамическое окончание в URL может выглядеть как на обычном веб-сайте, например, /home, /contacts и т.д.

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

  • New History Fragment – возвращает переменную, которая содержит новое значение хеша (#) URL-сайта после совершения пользовательского события Изменение в истории. Содержится в ключе gtm.newUrlFragment.
  • Old History Fragment – обратное действие, возвращает переменную, которая содержит предыдущее значение хеша URL-сайта до совершения пользовательского события. Содержится в ключе gtm.oldUrlFragment.
  • New History State – возвращает объект, содержащий новое состояние истории после того, как произошло событие и метод history.pushState() был выполнен. Содержится в ключе gtm.newHistoryState.
  • Old History State – возвращает объект, содержащий старое состояние истории перед тем, как произошло событие и метод history.pushState() был выполнен. Содержится в ключе gtm.oldHistoryState.
  • History Source – возвращает строку-событие, которое привело к изменению объекта истории. Например, pushState или popstate.

Подробнее о методе pushState читайте здесь.

Примечание: если при изменении URL-адреса используется хеш (#), Google Analytics по умолчанию его не перехватит и не отобразит в своих отчетах.

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

Виртуальные страницы в GTM

Триггер "Изменение в истории"

Примечание: если контент на сайте подгружается динамически, то при переходе "со страницы на страницу" режим предварительного просмотра не будет перезагружаться. Это один из признаков одностраничного сайта. Если после перехода с одной страницы на другую Debug Mode на какое-то время скрывается и появляется вновь, но уже в новом состоянии, это свидетельствует о том, что у вас, вероятнее всего, не Single Page Application (SPA).

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

Виртуальные страницы в GTM

Пример использования триггера "Изменение в истории"

После клика по одному из элементов в шапке меню, в хронологии Debug Mode отобразилось событие History. А на вкладке Data Layer мы можем наблюдать значения всех переменных уровня данных:

Переменные принимают соответствующие значения:

  • History Source – popstate, поскольку всякий раз, когда пользователь переходит к новому состоянию, происходит событие popstate, и свойство события state содержит копию объекта записи истории.

Данное значение будет и тогда, когда мы используем переходы по кнопкам «Вперед» — «Назад» в браузере. К тому же, браузеры работают с событием popstate по-разному. Chrome и Safari всегда вызывают popstate по окончании загрузки страницы, а Firefox не делает этого.

  • New History Fragment (gtm.newUrlFragment)book-cover, так как мы осуществили переход с graphanalytics.ru/#features2 на graphanalytics.ru/#book-cover (активная ссылка на скриншоте выше);
  • Old History Fragment (gtm.oldUrlFragment)features2;
  • New History State и Old History State (gtm.newHistoryState и gtm.oldHistoryState) – null, пустое значение.

Чтобы передать в теге виртуальный просмотр страницы с той частью, которую мы определили, нам необходимо создать все тот же тег Google Аналитика - Universal Analytics с типом Просмотр страницы. В дополнительных настройках к тегу в поле Поля, которые необходимо задать следует указать page и адрес виртуальной страницы (по аналогии со способом №1). Только вместо таблицы поиска, в значении виртуального просмотра страницы мы будем использовать встроенную переменную New History Fragment:

Виртуальные страницы в GTM

Тег с передачей виртуальной страницы в Google Analytics - Изменение в истории

Триггер активации - Изменение в истории. Сохраняем изменения. Я перешел по вкладкам меню несколько раз туда-сюда. В режиме реального времени в Google Analytics информация отобразилась:

Виртуальные страницы в GTM

Результаты в режиме реального времени

В Яндекс.Метрике тег типа Пользовательский HTML тег будет выглядеть так:

, где XXXXXX - номер вашего счетчика Яндекс.Метрики.

В GTM:

Виртуальные страницы в GTM

Пользовательский HTML тег для Метрики

Данные в отчете Яндекс.Метрики:

Виртуальные страницы в GTM

Данные в отчете Метрики

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

Виртуальные страницы в GTM

Отслеживание хеша в адресной строке браузера в Яндекс.Метрике

Подробнее об этом читайте в блоге Яндекс.Метрики.

С помощью уровня данных (dataLayer)

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

Пример кода, который разработчик может использовать:

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

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

Виртуальные страницы в GTM

pagePath и pageTitle - переменные уровня данных

Вы также должны создать триггер типа Пользовательское событие с именем Pageview (как в примере кода):

Виртуальные страницы в GTM

Пользовательское событие Pageview

В теге Google Аналитика - Universal Analytics с типом Просмотр страницы в дополнительных настройках к тегу в поле Поля, которые необходимо задать теперь следует указать не только page, но и title, чтобы передать в отчеты Google Analytics название заголовка страницы:

Виртуальные страницы в GTM

Тег Universal Analytics

Триггер активации - Пользовательское событие (Специальное событие). Сохраняем изменения.

Так же как и в предыдущих способах отслеживания, статистика по виртуальным страницам будет доступна в Google Analytics в стандартных отчетах Поведение - Контент сайта - Все страницы, а в Яндекс.Метрике в отчете Содержание - Популярное.

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

Чтобы отслеживать виртуальные просмотры страниц как конверсии, необходимо настроить цель в Google Analytics с типом Целевая страница, задавав URL. Например, для моего примера с табами (см. выше) это можно сделать так:

Виртуальные страницы в GTM

Настройка цели в Google Analytics для виртуальной страницы

Для отслеживания всех шагов (step1-step4) можно задать условие с помощью регулярного выражения:

Виртуальные страницы в GTM

Настройка с помощью регулярного выражения

где \d{1,4} - работает в диапазоне чисел от 1 до 4, как в нашем примере с шагами step1-step4.

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

Добавьте новую цель типа Посещение страницы и укажите URL-адрес виртуальной страницы с условием url: содержит. В моем примере для одного из шагов:

Виртуальные страницы в GTM

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

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике