This lightweight TypeScript library automatically captures button clicks and sends the data—along with a custom payload—directly to your Supabase database. No complex setup, no third-party services.

Get Started in 3 Steps

1. Prepare Supabase

Create a clicks table in your Supabase database. You can use the SQL editor with the following command:

CREATE TABLE public.clicks (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  created_at timestamp with time zone DEFAULT now() NOT NULL,
  button_id text,
  button_classes text,
  button_text text,
  payload jsonb
);

-- Then, enable public insert access via RLS policies.
-- Go to Authentication -> Policies to create a new policy for INSERT with a check expression of `true`.

2. Install The Package

npm install @farukiince/click-tracker

3. Initialize in Your App

In your application's entry point (e.g., App.tsx), call the init function.

import { init } from '@farukiince/click-tracker';

init({
  supabaseUrl: process.env.REACT_APP_SUPABASE_URL,
  supabaseAnonKey: process.env.REACT_APP_SUPABASE_ANON_KEY,
  // Optional: Add custom data to every click
  payload: {
    pagePath: window.location.pathname,
    userId: 'user-123'
  }
});

That's it! The library will now automatically track all <button> clicks.

Configuration

The init function accepts an object with the following options:

| Parameter | Type | Required | Default | Description | | ----------------- | --------------------- | :------: | --------- | ----------------------------------------------- | | supabaseUrl | string | Yes | null | Your Supabase project URL. | | supabaseAnonKey | string | Yes | null | Your Supabase project anon (public) key. | | selector | string | No | 'button'| A CSS selector for the elements to track. | | payload | Record<string, any> | No | undefined| A JSON object to be saved with every click. |

License

Licensed under the MIT License.