Adtivity SDK Documentation

Track user interactions, page views, and behavior with the Adtivity SDK

Installation

Install the Adtivity SDK via npm to get started with tracking user behavior on your website.

npm install @adtivity/adtivity-sdk

Initialization

Basic Setup

Initialize the SDK in your application's root component (e.g., _app.tsx or layout.tsx for Next.js).

Import the SDK functions:

import {
  init,
  initClickTracking,
  initLocationTracking,
  initPageTracking,
} from "@adtivity/adtivity-sdk"

Initialize in a useEffect hook:

useEffect(() => {
  if (typeof window === "undefined") return
  if (window.__ADTIVITY_BOOTSTRAPPED__) return
  window.__ADTIVITY_BOOTSTRAPPED__ = true

  const API_KEY = process.env.NEXT_PUBLIC_ADTIVITY_API_KEY
  if (!API_KEY) {
    console.error("Adtivity SDK: API key is not configured")
    return
  }

  init({
    apiKey: API_KEY,
    debug: false,
    // Optional tuning:
    // batchSize: 10,
    // flushInterval: 5000,
  })

  initPageTracking()
  initClickTracking()
  initLocationTracking()
}, [])

Configuration Options

apiKey (required)

Your unique API key. Set this in your environment variables as NEXT_PUBLIC_ADTIVITY_API_KEY

debug (optional)

Enable debug logging to console. Set to true during development.

batchSize (optional)

Number of events to batch before sending. Default: 10

flushInterval (optional)

Time in milliseconds between automatic batch flushes. Default: 5000ms

Click Tracking

Data Attributes for Tracking

Add data attributes to your HTML elements to automatically track user interactions.

General Click Tracking

Use data-adtivity-track for any clickable element

<div data-adtivity-track="feature-card-click">
  Click me
</div>

Button-Specific Tracking

Use data-adtivity-button-track for buttons

<Button
  data-adtivity-button-track="web3-simulate-token-transfer"
>
  <Rocket className="mr-2 h-5 w-5" />
  Simulate Token Transfer
</Button>

Link-Specific Tracking

Use data-adtivity-link-track for navigation links

<Link
  href="/cars"
  data-adtivity-link-track="header-nav-cars"
>
  <Car className="mr-2 h-4 w-4" />
  Cars
</Link>

Custom Properties

Add custom JSON properties with data-adtivity-props

<button
  data-adtivity-button-track="add-to-cart"
  data-adtivity-props='{"productId": "123", "price": 49.99}'
>
  Add to Cart
</button>

Auto-Captured Element Data

The SDK automatically captures these properties from tracked elements:

Element ID

The id attribute if present

Text Content

Visible text inside the element

Element Type

Tag name (button, a, div, etc.)

Href/Action

Link destination or form action

CSS Classes

All class names applied

Form Values

Input/select values when applicable

Page Tracking

Automatic Page View Tracking

Once initialized with initPageTracking(), the SDK automatically tracks:

Initial Page Load

Tracks when users first land on your site

SPA Navigation

Automatically detects client-side route changes in React, Next.js, and other SPAs

URL Updates

Captures query parameters and hash changes

Auto-Captured Page Data

Page URL

Current page path and query string

Page Title

Document title from <title> tag

Referrer

Previous page URL

Timestamp

ISO 8601 format timestamp

Location Tracking

IP-Based Geolocation

When you call initLocationTracking(), the SDK automatically enriches all events with geolocation data based on the user's IP address.

No user permission required: This uses server-side IP lookup, not browser geolocation APIs.

Auto-Captured Location Data

Country

Country name and code

Region/State

State or province information

City

City-level location data

IP Address

User's public IP (anonymized)

Identity Management

User Identification

The SDK provides multiple ways to identify and track users across sessions.

Anonymous ID

Auto-generated UUID stored in localStorage. Persists across sessions for returning visitors.

// Automatically handled by the SDK
// No code needed - created on first visit

Session ID

Per-tab session tracking. Each browser tab gets a unique session ID.

// Automatically handled by the SDK
// New session per tab/window

User ID (Custom)

Set a custom user ID when users log in to your application.

import { identify } from "@adtivity/adtivity-sdk"

// After user login
identify({
  userId: "user_12345",
  email: "user@example.com",
  name: "John Doe"
})

Web3 Support

Built-in support for blockchain and Web3 applications.

Wallet Address Tracking

Automatically track connected wallet addresses

Chain ID Tracking

Multi-blockchain support with chain detection

import { identify } from "@adtivity/adtivity-sdk"

// After wallet connection
identify({
  walletAddress: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
  chainId: 1 // Ethereum mainnet
})

Auto-Captured Data

Data Captured on Every Event

The SDK automatically enriches all events with contextual data to provide comprehensive analytics.

Time & Context Data

Timestamps

ISO 8601 format for all events

URL Tracking

Current page URL with query params

Referrer Tracking

Previous page or external referrer

User Agent

Browser, device, and OS information

Location & Network Data

Geolocation

Country, region, and city from IP

IP Address

Anonymized public IP address

Best Practices

  • Use descriptive track names: Make your analytics data easy to understand (e.g., "signup-button-click" vs "button1")
  • Leverage custom properties: Add context with data-adtivity-props for richer insights
  • Enable debug mode in development: Set debug: true to see events in console
  • Identify users early: Call identify() as soon as users log in for better user journey tracking