Custom events

Free

Datrika counts page views on its own. To track clicks, form submissions, sign-ups and purchases, use custom events.

Clicks on links and buttons

Say your site has a link to download your price list as a PDF, and you want to know how many people download it. Let's call this event Price list download and add it to the link with the data-datrika-event attribute:

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

That's it. Datrika now records every click on the link by itself, no coding needed. If your site builder lets you add attributes, you can do this without a developer.

After the first click, the Price list download event shows up in your site dashboard on the Events card.

Form submissions

Say your site has a form, like a newsletter sign-up or a callback request, and you want to know how many times people send it. Let's call the event Newsletter signup and add the same attribute to the form itself:

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

Datrika now records the event every time the form is submitted.

Event details

Say the price list link sits in both your header and your footer, and you want to see which one people used. You don't need a second event for that, just add the data-datrika-meta-placement attribute to the link:

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

You make up the part after meta- yourself, it's the name of the detail. One event can carry up to 20 details. You see them next to the event in visitor journeys on paid plans.

From JavaScript

A submitted form doesn't always mean things worked out. Say you want to count sign-ups. A visitor fills in the form and clicks the button, but the server returns an error, for example because that email is already registered. An attribute on the form would count this attempt, even though no sign-up happened.

For events like this, call datrika() from your code at the moment the outcome is certain, that is, after the server responds with success. Details go in 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' } });
}

Calling datrika() right as the page loads, say on a thank-you page after a purchase? Paste this code before the tracking script. The calls wait until the script has loaded.

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

Using TypeScript? Declare the function once:

datrika.d.ts

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

Goals and funnels

Paid

You can turn events into goals and funnels. A funnel like "pricing page → Price list download → Signup", for example, shows how many people actually sign up after downloading the price list.