Getting Started

Get up and running with the Tappd Web SDK in minutes.

Prerequisites

• A Tappd account (Sign up here)
• Your App ID from the dashboard
• Basic knowledge of JavaScript

Step 1: Get Your App ID

1. Log into your Tappd Dashboard
2. Navigate to Settings > Apps
3. Create a new app or select an existing one
4. Copy the App ID (looks like: a1b2c3d4-e5f6-...)

Step 2: Install the SDK

Option A: CDN (Recommended for Quick Start)

Add this script tag to your HTML before the closing </body> tag:

<script src="https://sdk.gotappd.com/web-sdk/v1/tappd-sdk.min.js"></script>
<script>
  const tappd = new TappdSDK.TappdSDK({
    appId: 'YOUR_APP_ID',
    apiUrl: 'https://sdk.gotappd.com/api/v1/sdk'
  });
</script>

Option B: NPM (Recommended for Production)

npm install @tappd/web-sdk

Then import in your JavaScript:

// ES Module
import { TappdSDK } from '@tappd/web-sdk';

// CommonJS
const { TappdSDK } = require('@tappd/web-sdk');

Step 3: Initialize the SDK

Initialize the SDK once when your application loads:

import { TappdSDK } from '@tappd/web-sdk';

const tappd = new TappdSDK({
  appId: 'YOUR_APP_ID',
  apiUrl: 'https://sdk.gotappd.com/api/v1/sdk', // Optional, defaults to this
  autoTrack: true, // Auto-track page views (default: true)
  sessionTimeout: 30, // Session timeout in minutes (default: 30)
  enableAutoCapture: false, // Auto-capture clicks/forms (default: false)
  debug: false // Enable debug logging (default: false)
});

Note: Replace YOUR_APP_ID with your actual App ID from the dashboard.

Step 4: Identify Users

When a user logs in or signs up, identify them using your internal user ID:

await tappd.identify({
  external_id: 'ext_123',  // Required: Your internal user ID from your database/system
  name: 'John Doe',
  email: 'john@example.com',
  phone: '+1234567890',
  // Custom attributes
  age: 28,
  plan: 'premium',
  company: 'Acme Corp'
});

Note: You no longer need to pass a userId parameter. Just provide your external_id and the SDK automatically generates an internal identifier.

Step 5: Track Events

Track custom events throughout your application:

// Track a purchase
await tappd.track('purchase', {
  amount: 99.99,
  currency: 'USD',
  productId: 'prod_123'
});

// Track a button click
await tappd.track('button_click', {
  buttonId: 'signup',
  location: 'homepage'
});

Framework-Specific Setup

React

import { useEffect } from 'react';
import { TappdSDK } from '@tappd/web-sdk';

function App() {
  useEffect(() => {
    // Initialize SDK
    const tappd = new TappdSDK({
      appId: 'YOUR_APP_ID'
    });
    
    // Store in window or context
    window.tappd = tappd;
  }, []);

  const handlePurchase = async () => {
    await window.tappd.track('purchase', {
      amount: 99.99
    });
  };

  return <button onClick={handlePurchase}>Buy Now</button>;
}

Vue.js

import { onMounted } from 'vue';
import { TappdSDK } from '@tappd/web-sdk';

export default {
  setup() {
    let tappd;
    
    onMounted(() => {
      tappd = new TappdSDK({
        appId: 'YOUR_APP_ID'
      });
    });

    const trackEvent = async (eventName, properties) => {
      await tappd.track(eventName, properties);
    };

    return { trackEvent };
  }
}

Next.js

import { useEffect } from 'react';
import { TappdSDK } from '@tappd/web-sdk';

export default function MyPage() {
  useEffect(() => {
    const tappd = new TappdSDK({
      appId: 'YOUR_APP_ID'
    });

    return () => {
      tappd.reset();
    };
  }, []);

  return <div>My Page</div>;
}

Verify Installation

Enable debug mode to verify the SDK is working:

const tappd = new TappdSDK({
  appId: 'YOUR_APP_ID',
  debug: true // Enable debug logging
});

// Check browser console for logs like:
// [Tappd SDK] Initialized with App ID: a1b2c3d4...
// [Tappd SDK] Event tracked: purchase

Next Steps

• Configuration Options - Customize SDK behavior
• API Reference - Complete method documentation
• Session Management - Understand session tracking
• Examples - See real-world use cases