Отслеживание времени совершения покупки с помощью Google Tag Manager и Checkout Timer

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

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

Этот отчет назывался Пользовательское время (User Timings) и был частью раздела Поведение - Скорость загрузки сайта (Behavior - Site Speed):

Примечание: в моем блоге есть отдельный материал, в котором я подробно описывал процесс настройки пользовательского времени с помощью Google Tag Manager для Universal Analytics (GA3).

Отчетов, подобного этому, в Google Analytics 4 нет. Единственное, где фигурирует время между совершениями различных событий - это Исследование воронки:

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

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

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

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

Отслеживание, описанное в этой статье, применимо для интернет-магазинов с настроенными событиями электронной торговли GA4 и основано на решении Маркуса Берша (Markus Baersch) и его шаблоне тега Checkout Timer для Google Tag Manager.

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

• зафиксировать точку А (начальную точку), от которой будет идти отсчет пользовательского времени. В нашем случае - это событие начала оформления заказа, то есть begin_checkout или просто checkout;
• зафиксировать конечную точку Б (финальную точку), которая будет являться триггером для завершения отслеживания. Это будет событие покупки, то есть purchase;
• после регистрации событий произвести все расчеты (рассчитать разницу во времени между совершением этих событий) и полученную информацию передать на уровень данных (dataLayer), чтобы впоследствии иметь возможность извлечь ее;
• отправить информацию об итоговом времени в Google Analytics 4 в качестве параметра события или свойства пользователя.

Но как и где хранить время начала совершения покупки? Если на вашем сайте оформление заказа происходит в рамках одной страницы без ее перезагрузки и переходе на другую страницу, то достаточно простой переменной JavaScript. Если время начала должно сохраняться и передаваться от страницы к странице, то используются либо файлы cookie, или так называемое хранилище браузера - localStorage и sessionStorage. Маркус в своем решении использует последний вариант. Оно подойдет как для Google Analytics 4, так и для Facebook *, поскольку в нем события тоже имеют названия, связанные с оформлением заказа (InitiateCheckout) и покупкой (Purchase).

* Деятельность американской компании Meta (бывшая Facebook) запрещена в России, организация признана экстремистской.

А для упрощения сохранения времени начала оформления заказа и остановки таймера после покупки, а также сохранения времени начала и итогового времени совершения покупки он разработал шаблон тега Checkout Timer для Google Tag Manager, который мы будем использовать далее.

Начнем настройку! Откройте свой контейнер Google Tag Manager. Перейдите в раздел Теги и при выборе тега нажмите на "В галерее общедоступных шаблонов вы сможете найти ещё больше типов тегов"

В открывшемся окне в поле поиска начните вводить Checkout. Выберите шаблон тега Checkout Timer (Автор: mbaersch):

Добавьте шаблон тега в свою рабочую область:

Для использования данного шаблона тега потребуются разрешения на доступ к глобальным переменным (dataLayer) и localStorage. Именно в локальном хранилище будет сохранено значение временной метки начала оформления заказа. Если вы согласны с этим, нажмите Добавить:

После этого вам откроется сам тег с его настройкам:

По сути, в нем нечего настраивать... И это очень хорошо, так как Маркус позаботился о том, чтобы мы не выполняли никаких дополнительных действий и всё отслеживание происходило самостоятельно, без нашего участия. Единственное, что вы можете сделать - это в поле Checkout Timeout задать/изменить время ожидания для оформления заказа (в минутах). Когда пользователь начнет оформление заказа, ему в локальное хранилище localStorage запишется временная метка с началом отсчета. И если он, по какой-либо причине, не завершит покупку, а отлучится и будет бездействовать установленное вами время или больше него (по умолчанию - 30 минут), то при следующем заходе/возвращении на сайт и продолжении оформления покупки, предыдущее время сбросится и отсчет будет вестись с новой меткой.

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

При желании вы также можете задать названия событий, поставив галочку напротив Custom Event Names. Это делать необязательно, поскольку Маркус предопределил их, дав названия checkoutTimerStart (для начала оформления заказа) и checkoutTimerStop (для завершения оформления заказа, покупки) соответственно:

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

В завершение задайте название для тега (например, Checkout Timer) и сохраните его.

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

Вместе с ним на уровень данных передается параметр checkoutStart со значением временной метки начала отсчета. Дополнительно шаблон тега Маркуса сохраняет это же значение в локальное хранилище вашего браузера, чтобы оно было доступно на каждой странице сайта и в случае ее перезагрузки. Убедиться в этом вы можете самостоятельно, открыв консоль браузера и перейдя на вкладку Приложение (Application). Слева в списке найдите раздел Хранилище и откройте Локальное хранилище (localStorage) для вашего домена:

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

После этого вернитесь в режим отладки Google Tag Manager и найдите данный event. Следом за ним (или через несколько) должно появиться событие checkoutTimerStop, свидетельствующее о том, что выполнение отслеживания времени совершения покупки завершено.

Нажав на него, вы увидите на уровне данных три переменных:

• checkoutStart - временная метка начала оформления заказа;
• checkoutFinished - временная метка завершения покупки;
• checkoutDuration - время совершения покупки (в миллисекундах).

Разница checkoutFinished - checkoutStart и есть checkoutDuration:

Если вы хотите извлечь все три значения и передать их в Google Analytics 4, то вы воспользуйтесь пользовательской переменной типа Переменная уровня данных. Имя переменной необходимо задать строго так, как она выглядит в dataLayer - checkoutDuration:

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

, где {{checkoutDuration}}  - название вашей переменной уровня данных из предыдущего шага.

В Google Tag Manager это будет выглядеть так:

Эта функция возвращает результат деления переменной {{checkoutDuration}} на 1000 и округляет результат до двух десятичных знаков после запятой. Сохраните переменную. Теперь при повторном запуске режима отладки GTM и совершения события вы будете видеть время совершения покупки в секундах:

Все, что осталось сделать - это создать триггер специального события и тег для передачи этих данных в Google Analytics 4. С событием purchase мы не можем передать значение переменной времени, поскольку в этот момент она еще не принимает нужные нам значения. Поэтому триггером будет являться пользовательское событие checkoutTimerStop или то, которое вы переопределили в настройках шаблона тега Checkout Timer:

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

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

И проверка отслеживания с помощью инструмента DebugView:

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