Tracking custom events

Learn how to track custom events on your website.

Custom events allow you to track specific actions or interactions on your website. This can be anything from button clicks to form submissions.

What are custom events?

A custom event represents a specific action or interaction on your website. For example, a button click or a form submission. This can be useful to track events to measure how well your website is performing (for example, how many people sign-up while visiting your website) and to understand user behavior.

How to track custom events

There are two ways to track custom events:

Using the SDK - Import and call trackEvent() from the @lws-analytics/script package
Using data attributes - Add data-lwsa-event to any HTML element for automatic click tracking

Using the SDK

If you installed the npm package, you can import and call trackEvent() anywhere in your app:

import { trackEvent } from '@lws-analytics/script';

function SignupButton() {
const handleClick = () => {
trackEvent('signup_button_clicked');
};

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

'use client';

import { trackEvent } from '@lws-analytics/script';

export function SignupButton() {
  const handleClick = () => {
    trackEvent('signup_button_clicked');
  };

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

<script setup>
import { trackEvent } from '@lws-analytics/script';

const handleClick = () => {
trackEvent('signup_button_clicked');
};

</script>

<template>
  <button @click="handleClick">Sign up</button>
</template>

If you’re using the script tag instead of the npm package, use the global window.LwsAnalytics object:

// Using the global LwsAnalytics object
document.querySelector('#signup-btn').addEventListener('click', () => {
  window.LwsAnalytics.trackCustomEvent('signup_button_clicked');
});

Using data attributes

Add the data-lwsa-event attribute to any element. Clicks are automatically tracked - no JavaScript required:

<button data-lwsa-event="create_account_clicked">Create account</button>

<a href="/pricing" data-lwsa-event="pricing_link_clicked"> See pricing </a>

This works with both the SDK and the script tag approach.

Combining both methods

Here’s a complete example demonstrating both methods:

import { trackEvent } from '@lws-analytics/script';

function ExampleForm() {
const handleSubmit = (e) => {
e.preventDefault();
trackEvent('form_submitted');
console.log('Form submitted');
};

return (
<form onSubmit={handleSubmit}>
<input type="email" placeholder="Enter your email" />

      {/* Data attribute: tracks when the button is clicked */}
      <button type="submit" data-lwsa-event="create_account_button">
        Create account
      </button>

      {/* trackEvent(): tracks when the form is submitted */}
    </form>

);
}

'use client';

import { trackEvent } from '@lws-analytics/script';

export function ExampleForm() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    trackEvent('form_submitted');
    console.log('Form submitted');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Enter your email" />

      {/* Data attribute: tracks when the button is clicked */}
      <button type="submit" data-lwsa-event="create_account_button">
        Create account
      </button>

      {/* trackEvent(): tracks when the form is submitted */}
    </form>
  );
}

<script setup>
import { trackEvent } from '@lws-analytics/script';

const handleSubmit = (e) => {
e.preventDefault();
trackEvent('form_submitted');
console.log('Form submitted');
};

</script>

<template>
  <form @submit="handleSubmit">
    <input type="email" placeholder="Enter your email" />

    <!-- Data attribute: tracks when the button is clicked -->
    <button type="submit" data-lwsa-event="create_account_button">
      Create account
    </button>

    <!-- trackEvent(): tracks when the form is submitted -->

  </form>
</template>

<form id="example-form">
  <input type="email" placeholder="Enter your email" />

  <!-- Data attribute: tracks when the button is clicked -->

  <button type="submit" data-lwsa-event="create_account_button">
    Create account
  </button>
</form>

<script>
  document.getElementById('example-form').addEventListener('submit', (e) => {
    e.preventDefault();
    window.LwsAnalytics.trackCustomEvent('form_submitted');
    console.log('Form submitted');
  });
</script>

In these examples:

The data-lwsa-event="create_account_button" attribute automatically tracks when the button is clicked
The trackEvent() (SDK) or window.LwsAnalytics.trackCustomEvent() (script tag) function call programmatically tracks when the form is submitted