Пользовательские события

Free

Просмотры страниц Датрика считает сама. А клики, отправку форм, регистрации и покупки отслеживают пользовательские события.

Клик по ссылке или кнопке

Допустим, у вас на сайте есть ссылка на скачивание прайс-листа в PDF, и вы хотите знать, сколько людей его скачивает. Назовём такое событие Price list download и добавим его к ссылке атрибутом data-datrika-event:

<a
  href="/price-list.pdf"
  data-datrika-event="Price list download">
  Download price list
</a>

Вот и всё. Теперь каждый клик по ссылке Датрика запишет сама, программировать ничего не нужно. Если конструктор вашего сайта умеет добавлять атрибуты, вы справитесь и без разработчика.

После первого клика событие Price list download появится в дашборде сайта на карточке «События».

Отправка формы

Допустим, у вас на сайте есть форма, например подписка на рассылку или заявка на звонок, и вы хотите знать, сколько раз её отправили. Назовём событие Newsletter signup и добавим тот же атрибут на саму форму:

<form
  action="/newsletter"
  method="post"
  data-datrika-event="Newsletter signup">
  <input type="email" name="email" required />
  <button type="submit">Subscribe</button>
</form>

Теперь Датрика будет записывать событие при каждой отправке формы.

Дополнительные данные к событию

Допустим, ссылка на прайс-лист есть и в шапке, и в подвале сайта, и вы хотите видеть, по какой из них его скачали. Второе событие для этого не нужно, достаточно добавить к ссылке атрибут data-datrika-meta-placement:

<a
  href="/price-list.pdf"
  data-datrika-event="Price list download"
  data-datrika-meta-placement="footer">
  Download price list
</a>

Часть после meta- вы придумываете сами, это название поля. К одному событию можно добавить до 20 таких полей. Они видны у события в путешествиях посетителей на платных тарифах.

Из JavaScript

Отправка формы ещё не означает, что всё получилось. Допустим, вы хотите считать регистрации. Посетитель заполнил форму и нажал кнопку, но сервер ответил ошибкой, например потому что такой email уже зарегистрирован. Атрибут на форме засчитал бы эту попытку, хотя регистрации не было.

Для таких событий вызывайте datrika() из кода в тот момент, когда результат уже точно есть, то есть после успешного ответа сервера. Дополнительные поля передаются в meta:

async function handleSignup(event) {
  event.preventDefault();

  const response = await fetch('/api/signup', {
    method: 'POST',
    body: new FormData(event.target),
  });
  if (!response.ok) return;

  datrika('Signup', { meta: { plan: 'pro' } });
}

Вызываете datrika() сразу при загрузке страницы, например на странице «Спасибо за покупку»? Вставьте этот код перед скриптом отслеживания. Вызовы подождут, пока скрипт загрузится.

<script>
  window.datrika = window.datrika || function () {
    (window.datrika.q = window.datrika.q || []).push(arguments);
  };
</script>

Пишете на TypeScript? Объявите функцию один раз:

datrika.d.ts

declare function datrika(
  eventName: string,
  options?: { meta?: Record<string, string | number | boolean> },
): void;

Цели и воронки

Платные

Из событий можно сделать цели и воронки. Например, воронка «страница с ценами → Price list download → Signup» покажет, сколько людей после скачивания прайс-листа действительно регистрируется.