Skip to main content
Version: 0.9

Button Click

Automated Click Tracking​

Lucia SDK provides zero-config automated click tracking. When enabled, it automatically tracks clicks on buttons, links, and other interactive elements.

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

Enable Programmatically​

import LuciaSDK from 'lucia-sdk';

await LuciaSDK.init({
  apiKey: 'your-api-key-here',
  autoTrackClicks: true, // Enable with defaults
});

// Or with custom configuration
await LuciaSDK.init({
  apiKey: 'your-api-key-here',
  autoTrackClicks: {
    enabled: true,
    selectors: ['button', '.cta', '[data-track]'], // Custom selectors
    ignore: ['.no-track'], // Elements to ignore
  },
});

Element-Level Control​

Add tracking attributes to specific elements:

<!-- Explicit tracking with custom identifier -->
<button data-lucia-track="signup-cta">Sign Up</button>

<!-- Add metadata to tracked clicks -->
<button data-lucia-track="purchase-btn" data-lucia-meta-variant="primary" data-lucia-meta-location="hero">
  Buy Now
</button>

<!-- Ignore specific elements -->
<button data-lucia-ignore>Don't Track This</button>

Default Tracked Elements​

  • <button> elements
  • <a> elements with href attribute
  • Elements with role="button"
  • Any element with data-lucia-track attribute

Privacy Features​

  • Automatically ignores password inputs
  • Skips credit card fields
  • Filters sensitive data from text content
  • Respects data-lucia-ignore attribute

Manual Click Tracking​

For cases where you need explicit control over click tracking, use the buttonClick method.

For Single-Page Applications (React, Angular, Vue, Svelte, etc)​

import LuciaSDK from 'lucia-sdk';

LuciaSDK.buttonClick('BUTTON-NAME');

// With metadata
LuciaSDK.buttonClick('cta-button', {
  elementType: 'button',
  text: 'Sign Up Now',
  meta: { variant: 'primary', location: 'hero' },
});

Example

import LuciaSDK from 'lucia-sdk';

function SignUpButton() {
  const handleClick = async () => {
    await LuciaSDK.buttonClick('signup-cta');
    // Continue with your action
  };

  return <button onClick={handleClick}>Sign Up</button>;
}

For Multi-Page Applications​

Auto-initialization (Recommended)

<script
  src="https://cdn.luciaprotocol.com/lucia-sdk-latest.min.js"
  data-api-key="your-api-key-here"
></script>
<script>
  LuciaSDK.buttonClick('add_to_cart');
</script>

Manual initialization

<script src="https://cdn.luciaprotocol.com/lucia-sdk-latest.min.js"></script>
<script>
  LuciaSDK.init({
    apiKey: 'your-api-key-here',
  });

  LuciaSDK.buttonClick('add_to_cart');
</script>