Web SDK Overview

The Tappd Web SDK is a lightweight, powerful JavaScript library for tracking user behavior, managing sessions, and collecting customer data in web applications.

Features

✅ Automatic Session Management - Hybrid approach with browser and time-based sessions
✅ Anonymous User Tracking - Track users before identification, automatically merge data
✅ Auto Page View Tracking - Automatic page visit tracking with SPA support
✅ Manual Event Tracking - Track custom events throughout your application
✅ In-App Messages - Display banners, popups, and modals with automatic triggering
✅ Web Push Notifications - Send push notifications to users' browsers
✅ Auto-Capture - Optional automatic click and form tracking
✅ Comprehensive Device Info - Browser, OS, screen, timezone, language tracking
✅ UTM Parameter Tracking - Automatic UTM parameter extraction
✅ Duration Tracking - Track time spent on pages

Installation

CDN (Quick Start)

<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>

NPM

npm install @tappd/web-sdk

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

const tappd = new TappdSDK({
  appId: 'YOUR_APP_ID',
  apiUrl: 'https://sdk.gotappd.com/api/v1/sdk'
});

Quick Start

1. Get Your App ID from your Tappd Dashboard
2. Initialize the SDK in your application
3. Identify users when they log in
4. Track events throughout your application

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

// Initialize
const tappd = new TappdSDK({
  appId: 'YOUR_APP_ID',
  apiUrl: 'https://sdk.gotappd.com/api/v1/sdk'
});

// Identify user
await tappd.identify({
  external_id: 'user_123',  // Your internal user ID
  email: '[email protected]',
  name: 'John Doe'
});

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

Supported Frameworks

• ✅ React
• ✅ Vue.js
• ✅ Next.js
• ✅ Nuxt.js
• ✅ Angular
• ✅ Vanilla JavaScript
• ✅ Any JavaScript framework

What's Next?

• Getting Started Guide - Detailed setup instructions
• Banners - Display placement-based banners with targeting and A/B testing
• In-App Messages - Display personalized messages to users
• Push Notifications - Send web push notifications to users
• In-App Bridge - Braze-like bridge functionality for capturing data and triggering actions
• Journey API Triggers - Trigger customer journeys programmatically via API
• API Reference - Complete API documentation
• Examples - Code examples for common use cases
• Configuration - All configuration options