Vlastní události

Free

Zobrazení stránek Datrika počítá sama. Kliknutí, odeslané formuláře, registrace a nákupy změříte vlastními událostmi.

Kliknutí na odkaz nebo tlačítko

Řekněme, že máte na webu odkaz ke stažení ceníku v PDF a chcete vědět, kolik lidí si ho stáhne. Pojmenujme takovou událost Price list download a přidejme ji k odkazu atributem data-datrika-event:

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

A to je vše. Každé kliknutí na odkaz teď Datrika zaznamená sama, programovat nic nemusíte. Pokud editor vašeho webu umí přidávat atributy, zvládnete to i bez vývojáře.

Po prvním kliknutí se událost Price list download objeví v přehledu webu na kartě Události.

Odeslání formuláře

Řekněme, že máte na webu formulář, třeba přihlášku k newsletteru nebo žádost o zavolání, a chcete vědět, kolikrát ho lidé odeslali. Pojmenujme událost Newsletter signup a přidejme stejný atribut přímo na formulář:

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

Datrika teď zaznamená událost při každém odeslání formuláře.

Doplňující údaje k události

Řekněme, že odkaz na ceník máte v hlavičce i v patičce webu a chcete vidět, přes který z nich si ho lidé stáhli. Druhou událost k tomu nepotřebujete, stačí k odkazu přidat atribut data-datrika-meta-placement:

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

Část za meta- si vymyslíte sami, je to název údaje. K jedné události přidáte až 20 takových údajů. Uvidíte je u události v cestách návštěvníků na placených tarifech.

Z JavaScriptu

Odeslaný formulář ještě neznamená, že se všechno povedlo. Řekněme, že chcete počítat registrace. Návštěvník vyplní formulář a klikne na tlačítko, ale server vrátí chybu, třeba protože takový e-mail už je registrovaný. Atribut na formuláři by tento pokus započítal, i když k registraci nedošlo.

U takových událostí zavolejte datrika() z kódu ve chvíli, kdy je výsledek jistý, tedy po úspěšné odpovědi serveru. Doplňující údaje předáte v 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' } });
}

Voláte datrika() hned při načtení stránky, třeba na děkovací stránce po nákupu? Vložte před měřicí skript tento kód. Volání počkají, až se skript načte.

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

Používáte TypeScript? Funkci jednou nadeklarujte:

datrika.d.ts

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

Cíle a trychtýře

Placené

Z událostí vytvoříte cíle a trychtýře. Třeba trychtýř „stránka s cenami → Price list download → Signup“ ukáže, kolik lidí se po stažení ceníku opravdu zaregistruje.