Пройдя эту статью, вы будете отправлять в КО действия людей на сайте, где каждая страница загружается заново, — обычный HTML, лендинг, WordPress, сайт на конструкторе. Сборка для этого не нужна: всё делается одним блоком в шаблоне страницы. На страницах при этом уже должен стоять счётчик: подключение сайта.
Если сайт собирается генератором — Astro, Hugo, Next, Eleventy, — вам в соседнюю статью: там появляется подстановка значений на сборке. Если приложение живёт в одной вкладке и меняет экраны без перезагрузки — в статью про SPA.
Что счётчик делает сам
Просмотры страниц, визиты, источники, кампании, устройство и посетителя счётчик пишет сам. На многостраничном сайте это получается само собой: каждый переход — новая загрузка, и просмотр отправляется без вашего участия.
Своим кодом отправляется только то, что счётчик увидеть не может: нажали кнопку, открыли калькулятор, выбрали тариф, отправили форму. Такое событие ложится на визит, и вместе с ним в отчёт приезжает источник — поэтому «сколько раз нажали» превращается в «сколько нажали из платного трафика».
Три вещи, которые следуют из перезагрузок и дальше упоминаться не будут:
- обёртка объявляется в шаблоне страницы, то есть на каждой странице заново;
- общий контекст события (язык, раздел) ставится тоже заново на каждой странице;
- событие «человек ушёл со страницы» отсюда уходит ненадёжно — надёжнее поймать факт на следующей странице.
Поставьте обёртку
Блок ниже вставляется в шаблон страницы до счётчика КО — обычно в <head>. Он работает
сам по себе: если счётчик ещё не загрузился, события подождут в его очереди.
<script>
(function () {
var PROD_HOST = 'example.com'; // ваш живой домен
var onProd = location.hostname === PROD_HOST || location.hostname === 'www.' + PROD_HOST;
function call(method, args) {
if (!onProd) return false;
var visit = window.ko && window.ko.visit;
if (visit && typeof visit[method] === 'function') {
visit[method].apply(visit, args);
return true;
}
window.koLayer = window.koLayer || [];
window.koLayer.push(['visit', method, args]);
return true;
}
window.siteTrack = function (event, data) {
return call('track', [String(event || ''), { data: data || {} }]);
};
window.siteTrackData = function (data) {
return call('setTrackData', [data || {}, true]);
};
})();
</script>
Подставьте свой домен в PROD_HOST — больше в этом блоке менять нечего. Форма вызова,
устройство очереди koLayer и второй аргумент setTrackData разобраны в
Вызовах счётчика.
Гейт по домену обязателен. Без него в проекте появятся «сайты» вроде localhost и
test.example.com, и числа наполовину будут состоять из вашей же работы над сайтом.
Если шаблона нет — конструктор сайтов
В Tilda, WordPress, Creatium и подобных есть поле «код в <head>» или «вставка кода» на
уровне всего сайта — блок идёт туда, один раз на сайт. Проверьте, что настройка применяется
ко всем страницам: лендинги, живущие отдельно от общего шаблона, — самая частая причина,
по которой события идут не отовсюду.
После вставки опубликуйте сайт заново: до публикации конструктор отдаёт прежний HTML.
Отправьте первое событие
Возьмите действие, которое действительно произошло, и повесьте на него вызов:
<button id="buy">Оформить</button>
<script>
document.getElementById('buy').addEventListener('click', function () {
siteTrack('checkout_started', { plan: 'pro', place: 'pricing_table' });
});
</script>
Имя события — латиница, нижний регистр, прошедшее время; различия между случаями идут в данные, а не в имя. Правила целиком, вместе с защитой от повторов и приведением значений из адреса, — Словарь событий.
Поля, одинаковые для всей страницы, ставьте контекстом — тогда их не придётся повторять в каждом вызове:
<script>
siteTrackData({ page_kind: 'pricing', locale: 'ru' });
</script>
Значения пишутся прямо в этом блоке на каждой странице (в конструкторе — в «коде страницы», а не сайта). Вычислять их в браузере из адреса стоит только если страниц много и разбор адреса простой: схема адресов у сайта уже описана его структурой, и вторая копия в JS расходится с первой молча — в отчёте это выглядит как страница, приписанная не тому разделу.
Событие на уходе со страницы ставьте на принимающей. Клик по ссылке здесь — это уход, и событие уедет, только если счётчик уже загружен. Надёжный якорь — не «нажал оформить», а «открыл страницу оформления»; расхождение между этими двумя числами само себя показывает в отчёте.
Проверка
Откройте живую страницу и посмотрите её исходный код (Ctrl+U): блок обёртки должен быть в HTML до счётчика. Если его там нет — сайт не опубликован заново.
Дальше откройте вкладку Network и сделайте действие, на которое повесили вызов. Признак
успеха — запрос visit.php?type=event; в его теле имя вашего события и поля внутри data.
Если запроса нет, добавьте к адресу ?ko_debug и повторите: счётчик начнёт писать в консоль,
что с ним происходит.
Соберите из события метрику
- В разделе Метрики проекта создайте метрику: свой ключ (например
siteCheckoutStarted) и формула{sites_events:visitor:checkout_started}— имя вашего события в третьей части. - Долю и конверсию считайте формулой по ключам метрик:
{siteCheckouts}/{sitePricingViews}. - Уникальные люди, а не нажатия:
{sites_events:visitor:checkout_started[:value=visitors_id][:aggregate=uniq]}. - Разрез по данным события — измерением
field:data.planв секции Разрез вашего отчёта. Отдельная метрика на каждое значение не нужна. - Если событие несёт деньги, передавайте сумму полем
incomeрядом сdata, а не внутри него, — тогда она складывается как деньги.
Если не сходится
События идут не со всех страниц. Обёртка стоит в шаблоне, а часть страниц — отдельные лендинги, посадочные — живёт вне его.
События не идут вообще. Сайт не опубликован заново после вставки кода; либо страницу открыли не на живом домене — тогда молчание правильное; либо блокировщик в браузере останавливает счётчик, проверяйте в чистом профиле.
Событий меньше, чем действий. Скорее всего это события на уходе со страницы. Перенесите якорь на принимающую страницу.
Событий больше, чем действий. Страница перезагружает себя сама, а защиты по ключу нет — см. Словарь событий.
В разрезе одна пустая строка. Данные передали мимо обёртки, плоским объектом. Рабочая
форма — { data: { … } }.
Что рядом
- Вызовы счётчика — форма вызова, конверт, очередь, опции
- Словарь событий — как называть и где ставить вызов
- Свои события со статического сайта — если сайт собирается генератором
- Свои события из одностраничного приложения — если страницы не перезагружаются