@zaplier/sdk

@zaplier/sdk

Advanced privacy-first tracking SDK with session replay, heatmaps, and anti-adblock technology.

Makes a website visitor identifier from a browser fingerprint with enhanced session recording capabilities. Unlike cookies and local storage, fingerprint stays the same in incognito/private mode and even when browser data is purged. 100% cookieless analytics tracking with GDPR/LGPD compliance, advanced bot detection, session replay, and heatmaps.

✨ Features

• 🛡️ Privacy-First: 100% cookieless tracking using advanced fingerprinting
• 🎬 Session Replay: Record and replay user sessions with DOM mutation tracking
• 🔥 Heatmaps: Track clicks, scrolls, and user interactions
• 🚫 Anti-Adblock: Multiple transport methods to bypass adblockers
• 🤖 Bot Detection: Advanced bot and fraud detection
• 🌍 GDPR Compliant: Built-in GDPR mode and consent management

Quick start

Get a workspace token:

• Register a new account at zaplier.com/signup
• After registration go to the dashboard and create a new workspace
• Go to the "API Keys" page, create and copy your workspace token

Install from NPM

npm i @zaplier/sdk
# or
yarn add @zaplier/sdk

import { Zaplier } from "@zaplier/sdk";

// Initialize the SDK
const zaplier = Zaplier.init({
  token: "your-workspace-token",
  heatmap: true,
  replay: true,
  debug: true, // Enable for development
});

// Track page views (automatic)
// Page views are tracked automatically

// Track conversions
zaplier.trackPurchase({
  value: 99.99,
  currency: "USD",
  items: [{ id: "product-123", name: "Product Name" }]
});

// Track custom events
zaplier.track("button_click", {
  button_id: "signup",
  page: "homepage",
});

// Identify users
zaplier.identify({
  email: "[e-mail]",
  name: "John Doe"
});

// Get visitor data
console.log("Visitor ID:", zaplier.getVisitorId());

Alternatively you can install from CDN

<script src="https://cdn.jsdelivr.net/npm/@zaplier/sdk@1/dist/sdk.min.js" 
        data-token="your-workspace-token"
        data-heatmap="true"
        data-replay="true"></script>
<script>
  // SDK is automatically initialized from data attributes
  
  // Track custom events
  Zaplier.track("page_interaction", {
    element: "header_button",
    action: "click",
  });

  // Track conversions
  Zaplier.trackPurchase({
    value: 99.99,
    currency: "USD",
    items: [{ id: "product-123", name: "Product Name" }]
  });

  // Get visitor identifier
  console.log("Visitor ID:", Zaplier.getVisitorId());
</script>

Configuration Options

Zaplier.init({
  token: 'your-workspace-token',    // Required: Your workspace token
  heatmap: true,                    // Enable heatmap tracking
  replay: true,                     // Enable session replay
  debug: false,                     // Enable debug mode
  gdprMode: false,                  // Enable GDPR compliance mode
  allow_localhost: false            // Allow tracking on localhost
});

API Reference

Core Methods

• Zaplier.init(config) - Initialize the SDK
• Zaplier.track(eventType, data?) - Track custom events
• Zaplier.trackPageView(data?) - Track page views
• Zaplier.trackConversion(type, value?, currency?, metadata?) - Track conversions
• Zaplier.identify(userData) - Identify users
• Zaplier.getVisitorId() - Get current visitor ID

Heatmap Controls

• Zaplier.heatmap.enable() - Enable heatmap tracking
• Zaplier.heatmap.disable() - Disable heatmap tracking
• Zaplier.heatmap.isRecording() - Check if recording

Session Replay Controls

• Zaplier.replay.start() - Start session recording
• Zaplier.replay.stop() - Stop session recording
• Zaplier.replay.isRecording() - Check if recording

Anti-Adblock Technology

The SDK automatically uses multiple transport methods to ensure data delivery:

• Standard Fetch - Primary method
• WebSocket - Real-time fallback
• Resource Spoofing - Disguised as CSS/images/fonts
• WebRTC - P2P data channel (experimental)

Note that you need to replace your-workspace-token with a workspace token from the dashboard.