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-sdkInitialization
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 visitSession ID
Per-tab session tracking. Each browser tab gets a unique session ID.
// Automatically handled by the SDK
// New session per tab/windowUser 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