clicks

import { clicks } from "@spoar/sdk/plugins";

import { createAnalytics } from "@spoar/sdk";
import { clicks } from "@spoar/sdk/plugins";

export const analytics = createAnalytics({
  project: "example.com",
  key: "pk_...",
  endpoint: "/_ra",
  plugins: [clicks()],
});

Mark the elements to count in the markup:

<button data-ra-click="upgrade" data-ra-prop-plan="pro" data-ra-prop-billing-cycle="yearly">
  Upgrade
</button>

OptionsCopy Anchor Link

clicks() takes no options.

SendsCopy Anchor Link

The button above sends:

{ label: "upgrade", plan: "pro", billingCycle: "yearly" }

BehaviourCopy Anchor Link

• One listener on document, in the capture phase. A click on a child of a marked element counts for the nearest marked ancestor.
• Prop names follow the browser's dataset naming: the part after data-ra-prop- in camelCase, so data-ra-prop-billing-cycle becomes billingCycle.
• Clicks on unmarked elements are ignored, and no text content is read.
• The usual prop limits apply: at most 25 props, values cut at 255 characters.

For React, TrackClick from /react wraps one element and sends a named event instead.

In reportsCopy Anchor Link

click is an ordinary event: breakdown/prop:label with filter[event]=click counts clicks per label, and prop:<key> reads any other prop. Clicks appear among a visit's actions.