Skip to content
  1. Главная
  2. Справочный центр
  3. Разработчикам
  4. Свои события с обычного сайта

Свои события с обычного сайта

Обновлено:

Пройдя эту статью, вы будете отправлять в КО действия людей на сайте, где каждая страница загружается заново, — обычный 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 и повторите: счётчик начнёт писать в консоль, что с ним происходит.

Соберите из события метрику

  1. В разделе Метрики проекта создайте метрику: свой ключ (например siteCheckoutStarted) и формула {sites_events:visitor:checkout_started} — имя вашего события в третьей части.
  2. Долю и конверсию считайте формулой по ключам метрик: {siteCheckouts}/{sitePricingViews}.
  3. Уникальные люди, а не нажатия: {sites_events:visitor:checkout_started[:value=visitors_id][:aggregate=uniq]}.
  4. Разрез по данным события — измерением field:data.plan в секции Разрез вашего отчёта. Отдельная метрика на каждое значение не нужна.
  5. Если событие несёт деньги, передавайте сумму полем income рядом с data, а не внутри него, — тогда она складывается как деньги.

Если не сходится

События идут не со всех страниц. Обёртка стоит в шаблоне, а часть страниц — отдельные лендинги, посадочные — живёт вне его.

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

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

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

В разрезе одна пустая строка. Данные передали мимо обёртки, плоским объектом. Рабочая форма — { data: { … } }.

Что рядом