Custom Events

Basic Usage

Track any interaction with the klar.track() method:

klar.track('button_click');

Track with properties:

klar.track('button_click', {
  button: 'signup',
  location: 'header'
});

Common Use Cases

Button Clicks

// Track signup button
document.querySelector('.signup-btn').addEventListener('click', () => {
  klar.track('button_click', {
    button: 'signup',
    location: 'hero'
  });
});

Form Submissions

document.querySelector('form').addEventListener('submit', (e) => {
  klar.track('form_submit', {
    form: 'contact',
    fields: Array.from(e.target.elements).map(el => el.name)
  });
});

Purchases

klar.track('purchase', {
  product: 'Pro Plan',
  price: 29,
  currency: 'USD',
  order_id: 'order_123'
});

Video Events

// Track video plays
const video = document.querySelector('video');
video.addEventListener('play', () => {
  klar.track('video_play', {
    video_id: 'intro_video',
    duration: video.duration
  });
});

Search

searchInput.addEventListener('change', (e) => {
  klar.track('search', {
    query: e.target.value,
    results: searchResults.length
  });
});

Event Properties

Add context to your events with properties:

klar.track('event_name', {
  // Strings
  category: 'engagement',
  label: 'signup_button',
  
  // Numbers
  value: 29,
  quantity: 1,
  
  // Booleans
  is_new_user: true,
  
  // Arrays
  tags: ['premium', 'trial']
});

React Integration

import { useEffect } from 'react';

function SignupButton() {
  const handleClick = () => {
    klar.track('button_click', {
      button: 'signup',
      location: 'header'
    });
    // ... signup logic
  };

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

Vue Integration

<template>
  <button @click="trackClick">Sign Up</button>
</template>

<script setup>
function trackClick() {
  klar.track('button_click', {
    button: 'signup',
    location: 'hero'
  });
}
</script>

Property Limits

• Maximum 50 properties per event
• Property names: maximum 64 characters
• Property values: maximum 256 characters
• Nested objects are flattened