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

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

Обновлено:

Пройдя эту статью, вы будете отправлять в КО действия людей с сайта, который собирается генератором — Astro, Hugo, Next, Eleventy, Jekyll. От обычного сайта отличий два, и оба в вашу пользу: значения контекста подставляет шаблонизатор, а разметку можно проверить до публикации. На страницах при этом уже должен стоять счётчик: подключение сайта.

Что счётчик делает сам

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

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

Из перезагрузок следуют два ограничения, общих с обычным сайтом: обёртка объявляется в общем шаблоне (то есть попадает на каждую страницу), а событие «человек ушёл» отсюда уходит ненадёжно — надёжный якорь ставится на принимающей странице.

Поставьте обёртку

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

В Astro скрипту нужен атрибут is:inline. Без него Astro соберёт скрипт в модуль, модуль выполнится позже разметки — и первые события случатся раньше, чем появится siteTrack. Значения из фронтматтера передаются через define:vars:

---
const prodHost = new URL(SITE.url).hostname;
const pageKind = ...;   // раздел, вычисленный из адреса страницы на сборке
const locale   = ...;
---
<script is:inline define:vars={{ prodHost, pageKind, locale }}>
  (function () {
    var onProd = location.hostname === prodHost || location.hostname === 'www.' + prodHost;
    /* далее тот же код обёртки: call(), siteTrack, siteTrackData */

    siteTrackData({ page_kind: pageKind, locale: locale });   // контекст сразу, до первых событий
  })();
</script>

В Hugo, Jekyll, Eleventy и Next то же самое делается их средствами — инлайновый скрипт в общем шаблоне с подстановкой переменных.

Гейт по домену обязателен и здесь работает ещё и как защита от превью-сборок: адреса вида deploy-preview-42.netlify.app иначе заводятся в проекте как отдельные сайты.

Счётчик можно грузить отложенно

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

Обёртка при этом объявляется раньше блока загрузки и работает независимо от того, приехал счётчик или нет.

Отправьте первое событие

Вызов ставится там же, где живёт разметка, — в компоненте, шаблоне или в скрипте страницы:

document.getElementById('buy').addEventListener('click', function () {
  siteTrack('checkout_started', { plan: 'pro', place: 'pricing_table' });
});

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

Контекст страницы считайте на сборке, а не в браузере. page_kind, язык и тип страницы выводятся из адреса страницы там же, где этот адрес и формируется, — в маршрутах и правилах локалей. Вторая копия схемы адресов в JS расходится с первой молча, и отчёт показывает не тот раздел; при расчёте на сборке новый раздел приезжает в отчёт под своим именем сам.

Слои накапливаются: общий слой ставится в шаблоне, страница добавляет свой — побеждает последний.

Проверка

Сначала — до публикации. Соберите сайт и посмотрите собранные файлы, а не исходники: на сайт уедут именно они. Блок обёртки должен быть в HTML до счётчика, а is:inline — на месте (без него в разметке окажется ссылка на модуль, а не ваш код).

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

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

С превью-сборки не уходит ничего — и это правильно. Гейт по домену гасит всё вне боевого адреса. Проверяйте на живом сайте.

В разметке вместо вашего кода ссылка на модуль. У скрипта нет is:inline, и он выполнится позже первых событий.

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

Раздел в отчёте не тот. Контекст посчитан в браузере из адреса и разошёлся со схемой маршрутов. Считайте его на сборке.

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

Что рядом