small-wins-sdk

v1.3.1

Published

18 days ago

visualise client click events on a global map

0High
0Medium
0Low

Small Wins SDK

A lightweight SDK for visualizing client click events on a global map. Track user interactions and events from your web application with ease.

Installation

Install the package using npm:

npm install small-wins-sdk

Or using yarn:

yarn add small-wins-sdk

Or using pnpm:

pnpm add small-wins-sdk

Usage

ES Modules (ESM)

import { Visualize } from 'small-wins-sdk';

// Initialize the SDK with your app ID
const visualize = new Visualize({
  app_id: 'your-app-id-here',
});

// Track an event
visualize.track('button-click');

// Track an event with additional payload data
visualize.track('purchase', {
  productId: '12345',
  amount: 99.99,
  currency: 'USD',
});

CommonJS

const { Visualize } = require('small-wins-sdk');

// Initialize the SDK with your app ID
const visualize = new Visualize({
  app_id: 'your-app-id-here',
});

// Track an event
visualize.track('button-click');

Browser (ESM)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
</head>
<body>
    <button id="my-button">Click Me</button>

    <script type="module">
        import { Visualize } from './node_modules/small-wins-sdk/dist/index.js';

        const visualize = new Visualize({
            app_id: 'your-app-id-here',
        });

        document.getElementById('my-button').addEventListener('click', () => {
            visualize.track('button-click', {
                buttonId: 'my-button',
                timestamp: Date.now(),
            });
        });
    </script>
</body>
</html>

API Reference

`Visualize` Class

Constructor

new Visualize(options: VisualizeOptions)

Options:

app_id (string, required): Your application identifier

Example:

const visualize = new Visualize({
  app_id: 'my-app-id'

});

Methods

`track(eventName: string, payload?: Record<string, any>)`

Tracks an event and sends it to the configured endpoint.

Parameters:

eventName (string, required): The name of the event to track
payload (object, optional): Additional data to include with the event

Example:

// Simple event tracking
visualize.track('page-view');

// Event tracking with payload
visualize.track('user-signup', {
  userId: 'user-123',
  email: '[email protected]',
  plan: 'premium',
});

TypeScript Support

The package includes TypeScript definitions. Import types as needed:

import { Visualize, VisualizeOptions, EventPayload } from 'small-wins-sdk';

const options: VisualizeOptions = {
  app_id: 'my-app-id',
};

const visualize = new Visualize(options);

Event Data Structure

Events are automatically sent with the following structure:

{
  "eventName": "button-click",
  "payload": {
    "buttonId": "my-button"
  },
  "timestamp": "2024-01-15T10:30:00.000Z"
}

Notes

Events are sent asynchronously using the Fetch API
The SDK uses keepalive: true to ensure events are sent even if the user navigates away
Errors are logged to the console but do not throw exceptions
The SDK works in both browser and Node.js environments

License

ISC

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme