Button Click

Shows which buttons and links people press on the way to converting, such as "View pricing", "Add to cart", or "Sign up". You can have the SDK track clicks for you, or record specific clicks yourself.

Track clicks automatically

Turn on automatic tracking and the SDK records clicks on buttons, links, role="button" elements, and anything marked data-lucia-track. No other code is needed.

<script
  src="https://cdn.luciaprotocol.com/lucia-sdk-latest.min.js"
  data-api-key="YOUR_API_KEY"
  data-auto-track-clicks="true"
></script>

Or, if you install from npm:

await LuciaSDK.init({
  apiKey: 'YOUR_API_KEY',
  autoTrackClicks: {
    enabled: true,
    selectors: ['button', '.cta', '[data-track]'], // what to track
    ignore: ['.no-track'],                          // what to skip
  },
});

To control individual elements, use attributes:

<!-- Give a click a clear name, plus optional details -->
<button data-lucia-track="signup-cta" data-lucia-meta-location="hero">Sign up</button>

<!-- Never track this element -->
<button data-lucia-ignore>Dismiss</button>

The SDK never records password or card fields, and it filters sensitive text out of what it captures.

Record a click yourself

LuciaSDK.buttonClick(button: string, metadata?: ClickEventMetadata): Promise<void>

Example

LuciaSDK.buttonClick('add-to-cart', {
  meta: { plan: 'pro', location: 'pricing-page' },
});

Already using the SDK?

These examples assume the SDK is installed and initialized. New to it? Start with the Quickstart — the SDK API Reference covers every install option.