Key reference

Everything the script can do: attributes, events you send, events it sends, and variants.

Script attributes

Everything is configured with attributes on the <script> itself. There is no config object and no separate file.

Attribute	Required	What it does
`data-domain`	Yes	The flat's domain. Takes a comma-separated list to send the same event to several flats.
`data-api`	No	Alternative endpoint. Use it when you serve events from your own domain.
`data-exclude`	No	Paths that are not tracked, with * and ** wildcards. It applies to every event, not just pageviews.Needs the exclusions variant
`data-include`	No	Flips it around: only paths that match are tracked.Needs the exclusions variant
`data-file-types`	No	Replaces the list of extensions that count as a download.Needs the file-downloads variant
`data-add-file-types`	No	Extends the default list instead of replacing it.Needs the file-downloads variant
`data-event-*`	No	Every data-event-<key> becomes a prop on all pageviews.Needs the pageview-props variant

Custom events

A doorbell is anything you want to count: a signup, a click on "contact", a purchase. There are two ways to ring it.

From JavaScript

Put the queue before the <script src> and you can call pisito() from the very first millisecond, even before the key has loaded.

<script>
  window.pisito = window.pisito || function () {
    (window.pisito.q = window.pisito.q || []).push(arguments);
  };
</script>
<script defer data-domain="example.com" src="https://pisi.to/js/llave.js"></script>

html

Ring the doorbell

The first argument is the name. Props are optional: 30 keys max, and only strings, numbers or booleans.

window.pisito("Alta", { props: { plan: "pro" } });

// Con la variante revenue:
window.pisito("Compra", {
  props: { plan: "pro" },
  revenue: { currency: "EUR", amount: "29.90" },
});

From the HTML

With the tagged-events variant you can declare the event in the element's classes. Listening is delegated on document, so it works with elements that appear later. The + is a space.

<button class="pisito-event-name=Alta+pro pisito-event-plan=pro">
  Empezar
</button>

html

404s

Put this line in your not-found template and you will know which broken links people keep stepping on.

window.pisito("404", { props: { path: location.pathname } });

Reserved names

pageview and engagement are emitted by the script and rejected by the public API, so nobody inflates the base metrics by accident. The exception is the manual variant, where pisito('pageview') is the whole point. 404, Outbound Link: Click, File Download and Form: Submit are accepted from outside.

Automatic events

The key sends these on its own, unless the variant says otherwise.

Event	When	Variant
`pageview`	On page load, on SPA route changes, and when coming back from the bfcache.	Base
`engagement`	When the tab is hidden or closed. Carries visible time and maximum scroll.	`engagement`
`Outbound Link: Click`	On a click to a link on another host. Prop: url.	`outbound-links`
`File Download`	On a click to a link with an extension from the download list. Prop: url.	`file-downloads`

Variants

Each variant is a suffix in the filename, and they combine in this order. The base weighs 873 B gzip; you only pay for what you use.

Suffix	What it adds	gzip size
`hash`	The fragment counts as part of the path and hashchange fires a pageview. For hash routers.	874 B
`outbound-links`	An "Outbound Link: Click" event when a link to another host is clicked.	1003 B
`file-downloads`	A "File Download" event, with 27 default extensions you can configure.	1146 B
`tagged-events`	Events declared in HTML classes, delegated on document.	1100 B
`manual`	Turns off every automatic trigger. You send the pageviews.	743 B
`exclusions`	Enables data-exclude and data-include with wildcards.	1052 B
`pageview-props`	Fixed props on every pageview, declared on the script tag itself.	1004 B
`revenue`	Adds the revenue field to custom events.	885 B
`engagement`	Visible time and maximum scroll when leaving the page.	1141 B

Combining them

Suffixes follow the order of the table. llave.hash.outbound-links.js exists, and so do the other 511 combinations. script.js is an alias of llave.js in case you look for the standard name.

<script defer data-domain="example.com"
        src="https://pisi.to/js/llave.hash.outbound-links.js"></script>

html