Событие на сеанс определенной длительности

04 декабря, 2022

Хотели бы вы настроить событие, которое срабатывало бы для сеансов определенной длительности, и отправить его в аналитику? Например, если пользователь пребывал на вашем сайте более 30-45-60-90 секунд? Если да, то этот материал для вас.

Введение

Почему это может быть полезно? Как вы знаете, цели, настраиваемые для счетчиков аналитики (Яндекс.Метрики, Google Analytics 3/4 и других), условно можно разделить на две категории:

  1. основные (макроцели);
  2. вспомогательные (микроцели).

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

Основные цели: звонок, заявка, заказ.

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

Вспомогательные цели: добавление товара в корзину, форма с вопросом, общение в чате, просмотр видео и т.д.

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

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

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

Например, если посетитель провел на сайте 2 минуты, то это может свидетельствовать о том, что он вовлечен в ваш контент гораздо больше, чем тот, кто имел время пребывания всего 10-20 секунд. Обладая этой информацией, вы сможете точнее настраивать ретаргетинг, выявлять на сайте "слабые места", отличать заинтересованных вашим товаром/услугой пользователей от просто пользователей. А имея соответствующую настройку в аналитике, вы сможете настроить рекламную кампанию на оптимизацию по конверсии. Система будет стараться подбирать потенциальную аудиторию с учетом заданного поведения.

Продолжительность в Universal Analytics

Если вы работали с Universal Analytics, то наверняка знаете, что в интерфейсе счетчика вы можете создать такую цель. Она называется Продолжительность (Duration).

Цель "Продолжительность" в Google Analytics 3

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

Продолжительность в Top.Mail.Ru

В счетчике Top.Mail.Ru тоже есть такая цель. Ее тип - Время на сайте:

Время на сайте

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

По умолчанию в Google Analytics 4 такой настройки нет, как нет и в Яндекс.Метрике и других аналитических системах. Поэтому нам предстоит настроить отслеживание самостоятельно, добавив определенный код на языке JavaScript к себе на сайт.

Это можно сделать несколькими способами:

  • добавить напрямую в исходный код страницы/сайта;
  • настроить событие через Google Tag Manager;

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

Одностраничные сайты

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

В самом простом виде она выглядит так:

, где:

  • code - функция обратного вызова, которая сработает по завершении временной задержки, указанной в delay;
  • delay - время в миллисекундах, указывающее через какой промежуток начнет выполняться код. Если этот параметр опущен, используется значение 0, означающее выполнение "немедленно".

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

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

Перейдите в интерфейс Яндекс.Метрики и создайте цель типа Javascript-Событие. Задайте идентификатор цели. Его можно назвать произвольно. Например, 60sec:

Цель типа "JavaScript-событие"

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

, где:

  • setTimeout - функция;
  • XXXXXX - ваш номер счетчика Яндекс.Метрики;
  • TARGET_NAME - идентификатор цели;
  • время_в_миллисекундах - интервал, через который произойдет событие.

Для нашего примера с учетом условия 1 минута (1 минута - 60000 миллисекунд) и идентификатором цели 60sec мы получим код вида:

Немного модифицировав, получим итоговую конструкцию:

Добавить ее можно в код самого счетчика или в любое место страницы, но в теге <script></script>, и он сработает через 60 секунд.

Код с функцией setTimeout

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

Активированное событие 60sec

Через некоторое время статистика по этому событию будет доступна в отчетах Яндекс.Метрики.

Google Analytics 4

Аналогичное событие можно отправлять и в Google Analytics 4. Для этого используйте конструкцию события:

А с учетом всей функции setTimeout код будет выглядеть так:

Добавить ее можно в код самого счетчика или в любое место страницы, но в теге <script></script>, и он сработает через 60 секунд.

Код с функцией setTimeout

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

Активированное событие 60sec

Примерно через 24 часа статистика по отслеживаемому событию будет доступна в отчетах Google Analytics 4.

Facebook *

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

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

А с учетом всей функции setTimeout код будет выглядеть так:

Добавить ее можно в код самого счетчика или в любое место страницы, но в теге <script></script>, и он сработает через 60 секунд.

Код с функцией setTimeout

Сохраните изменения. После этого вы можете перейти на сайт и проверить активацию события через заданный интервал времени. Подождите 60 секунд на странице. Вы можете воспользоваться расширение Facebook Pixel Helper или встроенной в интерфейс функцией Тестирование событий:

Активированное событие 60sec

ВКонтакте

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

А с учетом всей функции setTimeout код будет выглядеть так:

Добавить ее можно в код самого счетчика или в любое место страницы, но в теге <script></script>, и он сработает через 60 секунд.

Код с функцией setTimeout

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

Если вы все сделали правильно, то увидите запрос с вашим событием:

Активированное событие 60sec

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

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

Это можно сделать с помощью кода ниже.

Многостраничные сайты
Добавление кода напрямую

Скопируйте нижеприведенный код и добавьте его на все отслеживаемые страницы сайта между тегами <head></head>, после кодов счетчиков аналитики:

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

В этом код нас интересует только последняя строка:

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

В конце этой строки есть несколько аргументов: 60, 1800, "id1".

  • 60 - это время в секундах, указывающее через какой промежуток начнет выполняться код (60 - это 60 секунд, 1 минута). Именно это значение вы можете менять для своих задач, когда хотите отслеживать 30-45-60-90 секунд;
  • 1800 - время сессии в секундах, после чего стираются файлы cookie из браузера пользователя. Это необходимо, поскольку в рамках дня пользователь может зайти на ваш сайт несколько раз. По умолчанию установлено 30 минут (60*30), но вы можете изменить на свое собственное;
  • "id1" - callback id; строка, представляющая собой id коллбека. Отличает выполнение одного запроса от другого;

Данный код имеет возможность отправлять в аналитику сразу несколько событий на сеанс. Например, не только 60 секунд, но и 90, 120 и т.д. Для каждого такого интервала вам необходимо задать свой callback id.

Таким образом, чтобы передать два события в аналитику (для 60 секунд и для 90), вам необходимо просто продублировать последнюю строчку и изменить несколько значений. В результате вы получите следующее:

В первой строке мы указали id1 (для первой функции и события на 60 секунд), а во второй строке задается id2 (для второй функции и события на 90 секунд).

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

Использование Google Tag Manager

Если у вас на сайте установлен Google Tag Manager, то вы можете добавить вышеприведенный код через него. Для этого перейдите в раздел Теги и создайте тег типа Пользовательский HTML. Это позволит вам создать универсальное событие (и даже несколько), которое впоследствии вы будете использовать для активации тегов всех аналитических систем (Яндекс.Метрики, Google Analytics 4, Facebook, ВКонтакте и т.д.).

Все, что вам необходимо поменять в коде, это последняя строка. Измените ее на такую:

, где:

  • window.dataLayer.push - уровень данных (dataLayer);
  • 60sec - название вашего события;
  • 60 - это время в секундах, указывающее через какой промежуток начнет выполняться код (60 - это 60 секунд, 1 минута).

Если вы хотите активировать событие через 30 секунд, тогда название события можете поменять на 30sec, через 40 - тогда 40sec и т.д. Желательно, чтобы время в секундах, заданное в аргументе, коррелировалось с названием события. Тогда вы не запутаетесь.

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

Пользовательский HTML

В качестве триггера активации задайте All Pages (Все страницы). Сохраните изменения

Теперь перейдите в раздел Триггеры и создайте триггер типа Специальное событие с тем названием, которое вы задали на шаге выше. В моем примере - это 60sec:

Триггер специального события

Сохраните триггер.

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

Для Яндекс.Метрики создайте цель типа JavaScript-событие, задайте идентификатор цели и скопируйте код из интерфейса:

Цель типа "JavaScript-событие"

Вставьте его в тег типа Пользовательский HTML между тегами <script></script>:

Пользовательский HTML (для Яндекс.Метрики)

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

Для Google Analytics 4 используйте тег типа Google Аналитика: событие GA4. Просто задайте тег конфигурации и введите название события (например: 60_sec):

Тег "Google Аналитика: событие GA4"

В качестве активации тега задайте тот же триггер специального события, что и для Яндекс.Метрики.

Для Facebook используйте тег типа Пользовательский HTML и конструкцию события между тегами <script></script>:

Пользовательский HTML (для Facebook)

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

Для пикселя ВКонтакте создайте аналогичный тег Пользовательский HTML и добавьте такую конструкцию события между тегами <script></script>:

Пользовательский HTML (для ВКонтакте)

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

Событие 60sec

Нажав на него, вы должны увидеть все активированные теги:

Tags Fired

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

Примечание: фактическая задержка может быть больше, чем предполагалось, то есть событие на 60 секунд может сработать через 62, 63, 65 секунд и т.д. О причинах таких задержек подробно написано в документации Mozilla.

Если в диспетчере тегов Google вы хотите регистрировать событие не только на 60 секунд, но еще и на другие интервалы времени, скопируйте последнюю строчку в коде и измените параметры:

Например, первая строка будет отвечать за формирование уровня данных и вызов события 60sec с интервалом 60 и callback id, равному id1, а вторая строка будет отвечать за за формирования dataLayer и вызов события 90sec с интервалом 90 и callback id, равному id2.

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

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

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