Создание целей Яндекс Метрики по времени пребывания на сайте

Время прочтения: 5 минут

Главная
→
Статьи
→
Контекстная реклама
→
Создание целей Яндекс метрики по времени пребывания на сайте

В этой статье разберем подробную инструкцию о том, как создать цель в Яндекс Метрике, которая будет отрабатывать в зависимости от времени, проведённого на сайте.
Инструкция актуальна для любого сайта на любой CMS, также этот скрипт можно использовать на любом сервисе конструкторе, например: Тильда.

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

Содержание

1. Цель в Метрике по времени
2. Создаём код на JavaScript
3. Установка цели на все страницы в конструкторе Тильда
4. Установка цели на определенную страницу в конструкторе Тильда

Цель в Метрике по времени

У любого директолога возникает желание сделать ретаргетинг на заинтересованную аудиторию. Одним из ключевых параметров является время, проведённое на сайте. Особенно это касается Landing Page. Есть посетитель, пару минут смотрел страницу, ну вот чуток не дожали. Нужно закинуть ему рекламку. Или необходимо фиксировать определенное время, проведенное на сайте, как выполнение цели.

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

А теперь к делу. Давайте для начала посмотрим на цели в Метрике.

Здесь мы можем работать только с URL страниц. Хоть сама метрика и отслеживает время, но работать с ним никак не можем.

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

Название цели можете делать русским или на латинице, Название должно быть понятным для вас.
Выбираем соответствующий тип условия.
Вводим идентификатор латиницей.
Получаем код цели для сайта.
Нажимаем «ОК».

Так выглядит заполненная форма.

Код пока что можете не копировать, но чуть позже он понадобится. Сейчас плавно перейдём к коду.

Не волнуйтесь, ваша работа сводится к выполнению действий «копировать» → «вставить».

Создаём код на JavaScript

Яндекс Метрика показывает, сколько времени человек провёл на сайте, но сделать с этим ничего не можем.

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

На данном счётчике Метрики можете видеть людей, которые достигли нужной цели. В данном случае выставил одну секунду.

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

И тут нам на помощь придёт вот такой код:


<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) {
	setTimeout(function() {
	ym(XXXXXXXX,'reachGoal','timeonsite'); return true; }, 60000)
	});
</script>

Главное:


ym(XXXXXXXX,'reachGoal','timeonsite')

Замените на тот код, который получили при создании цели в Метрике.

А теперь небольшой разбор. Функция setTimeout позволяет вызвать определённое событие через некоторый временной интервал. То есть, по сути, отсрочить.


setTimeout(function() {
	ym(XXXXXXXX,'reachGoal','timeonsite'); return true; }, 60000)
	});

Обратите внимание на число. Оно указывается в милисекундах. Так что 1 с = 1000 мс. На 60 секунд нужно выставить 60000. Но пока будете тестировать, поставьте 1000, чтобы не ждать 60 секунд отработки цели метрики.

Итак, сначала запускаем обработчик событий с помощью команды:


document.addEventListener("DOMContentLoaded", function(event) {

В данном случае используем DOMContentLoaded, так как событие load кардинально отличается.

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

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

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


<script type="text/javascript">
	document.addEventListener("load", function(event) {
	setTimeout(function() {
	ym(XXXXXXXX,'reachGoal','timeonsite'); return true; }, 60000)
	});
</script>

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

Установка цели на все страницы в конструкторе Тильда

Для установки цели на все страницы тильды, вам нужно перейти в настройки сайта и выбрать меню "еще".
Далее нам потребует строка "Html-код для вставки внутрь HEAD"

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


<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) {
	setTimeout(function() {
	ym(XXXXXXXX,'reachGoal','timeonsite'); return true; }, 60000)
	});
</script>

Установка цели на определенную страницу в конструкторе Тильда

Для установки цели на определенную страницу тильды, вам нужно перейти на саму страницу и добавить блок "HTML"

И вставить следующий код.
Обязательно сохраните и не забудьте переопубликовать страницу в Тильде


<script type="text/javascript">
	document.addEventListener("DOMContentLoaded", function(event) {
	setTimeout(function() {
	ym(XXXXXXXX,'reachGoal','timeonsite'); return true; }, 60000)
	});
</script>

Остались вопросы или хотите получить систему привлечения клиентов под ключ?

Заказать аудит рекламы и сайта

Заказать комплексное продвижение