Skip to content
← Back to Docs

Headless Commerce Integration

JavaScript SDK for Next.js, React, Vue, and custom frameworks

⚡ Flexible Integration: Framework-agnostic JavaScript SDK with first-class support for React, Next.js, and Vue.

Installation

NPM Installation

Install the SDK via npm or yarn:

# npm
npm install @tinytapanalytics/sdk

# yarn
yarn add @tinytapanalytics/sdk

# pnpm
pnpm add @tinytapanalytics/sdk
View on npm →

CDN Installation

Or load directly from CDN:

<script src="https://cdn.tinytapanalytics.com/sdk.js"></script>
<script>
  TinyTap.init({
    apiKey: 'YOUR_API_KEY_HERE'
  });
</script>

Framework Examples

Next.js App Router

Add to your root layout:

// app/layout.tsx
import { TinyTapProvider } from '@tinytapanalytics/sdk/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TinyTapProvider apiKey="YOUR_API_KEY">
          {children}
        </TinyTapProvider>
      </body>
    </html>
  );
}

React (Vite/CRA)

// main.tsx or index.tsx
import { TinyTapAnalytics } from '@tinytapanalytics/sdk';

const analytics = new TinyTapAnalytics({
  apiKey: 'YOUR_API_KEY',
  trackRageClicks: true,
  trackMicroInteractions: true
});

analytics.init();

Vue 3

// main.js
import { createApp } from 'vue';
import { TinyTapPlugin } from '@tinytapanalytics/sdk/vue';

const app = createApp(App);

app.use(TinyTapPlugin, {
  apiKey: 'YOUR_API_KEY'
});

app.mount('#app');

Tracking Events

Automatic Tracking

The SDK automatically tracks:

  • Page views and navigation
  • Rage clicks (3+ rapid clicks)
  • Scroll depth (25%, 50%, 75%, 100%)
  • Dead clicks (clicks on non-interactive elements)
  • Mouse hesitation and movement patterns

Manual Event Tracking

Track custom events:

import { trackEvent } from '@tinytapanalytics/sdk';

// Track product view
trackEvent('product_view', {
  productId: '12345',
  name: 'Premium Widget',
  price: 29.99,
  category: 'Widgets'
});

// Track add to cart
trackEvent('add_to_cart', {
  productId: '12345',
  quantity: 2,
  value: 59.98
});

// Track checkout
trackEvent('checkout_started', {
  cartValue: 129.97,
  items: 3
});

Configuration Options

{
  apiKey: string;              // Required
  trackRageClicks: boolean;    // Default: true
  trackMicroInteractions: boolean; // Default: true
  trackScrollDepth: boolean;   // Default: true
  privacyMode: boolean;        // Default: true
  debug: boolean;              // Default: false
  batchSize: number;           // Default: 10
  flushInterval: number;       // Default: 5000ms
}

TypeScript Support

Full TypeScript definitions included:

import type {
  TinyTapConfig,
  TrackEventOptions
} from '@tinytapanalytics/sdk';

const config: TinyTapConfig = {
  apiKey: process.env.NEXT_PUBLIC_TINYTAP_KEY!,
  trackRageClicks: true
};

Performance

Bundle Size

Less than 6KB gzipped - won't slow down your site

Event Batching

Events are batched and sent in the background for optimal performance

Tree Shakeable

Only import what you need - unused code is eliminated at build time

💡 Pro Tip: For full API documentation, see the API Reference page.

Need Help?

Our developers are here to help with your integration

Contact Support