@dev-2-dev/websdk
v3.0.0-beta.6
Published
DevToDev Analytics Web SDK
Downloads
651
Readme
DevToDev Analytics Web SDK
Track user behavior, events, and engagement in your web application with the DevToDev Analytics SDK.
Installation
NPM Package
npm install @dev-2-dev/websdkCDN (Browser Only)
You can also include the SDK directly from our CDN without installing via npm:
<script src="https://cdn.devtodev.com/sdk/web/v3/devtodevsdk.js"></script>The SDK will be available globally as window.devtodev.
Quick Start
Using NPM Package
import DTDAnalytics from '@dev-2-dev/websdk';
// Create an instance
const analytics = new DTDAnalytics();
// Initialize with your app ID
analytics.initialize('your-app-id', {
userId: 'user-123', // Optional: set user ID during initialization
});Using CDN
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.devtodev.com/sdk/web/v3/devtodevsdk.js"></script>
</head>
<body>
<script>
// SDK is available as window.devtodev
const analytics = window.devtodev;
// Initialize with your app ID
analytics.initialize('your-app-id', {
userId: 'user-123',
});
</script>
</body>
</html>Tracking Events
Custom Events
Track any custom event in your application:
// Simple event
analytics.addEvent('app', 'button_click', {
buttonId: 'signup',
location: 'header',
});
// Purchase event
analytics.addEvent('app', 'purchase', {
productId: 'item-123',
price: 9.99,
currency: 'USD',
orderId: 'order-456',
});Level Progression
Track when users level up:
analytics.setLevel('app', 5);Currency Accrual
Track currency changes (coins, gems, points, etc.):
// User earned currency
analytics.setCA('app', 'coins', 100, 'quest_reward', 'earned');
// User spent currency
analytics.setCA('app', 'gems', 50, 'shop_purchase', 'spent');Progression Events
Track progression through levels, tutorials, or any multi-step process:
// Start a progression event
analytics.startPe('tutorial', 'onboarding', {
step: 1,
difficulty: 'easy',
});
// Complete the progression
analytics.stopPe('tutorial', 'onboarding', {
successfulCompletion: true,
duration: 120000, // milliseconds
});User Management
Setting User ID
// Set user ID when user logs in
analytics.setUserId('app', 'user-123');
// Replace user ID (useful for account merging)
analytics.replaceUserId('app', 'old-user-id', 'new-user-id');User Properties
Store custom properties about your users:
// Set user properties
analytics.setUserCardField('name', 'John Doe', 'app');
analytics.setUserCardField('email', '[email protected]', 'app');
analytics.setUserCardField('age', 25, 'app');
analytics.setUserCardField('country', 'US', 'app');
// Get user property
const userName = analytics.getUserCardField('app', 'name');
// Remove user properties
analytics.unsetUserCardFields('app', ['age', 'country']);
// Clear all user properties
analytics.clearUserCard();App Configuration
Set App Version
analytics.setAppVer('app', '1.2.3');Enable/Disable Tracking
// Disable tracking
analytics.setTracking('app', false);
// Re-enable tracking
analytics.setTracking('app', true);Remote Configuration
Use remote configuration to dynamically update your app settings:
// Initialize with remote config listener
analytics.initializeWithRemoteConfig('app-id', config, remoteConfig => {
// Handle remote configuration updates
console.log('Remote config received:', remoteConfig);
// Apply configuration changes
if (remoteConfig.featureEnabled) {
// Enable feature
}
});
// Manually apply remote config
analytics.applyRemoteConfig();
// Reset remote config
analytics.resetRemoteConfig();Common Use Cases
E-commerce Purchase
analytics.addEvent('app', 'purchase', {
productId: 'premium-subscription',
price: 29.99,
currency: 'USD',
orderId: 'order-12345',
paymentMethod: 'credit_card',
});User Registration
analytics.addEvent('app', 'registration', {
method: 'email',
source: 'landing_page',
});
analytics.setUserCardField('registrationDate', new Date().toISOString(), 'app');Game Level Completion
// Start level
analytics.startPe('game', 'level_5', {
difficulty: 'hard',
level: 5,
});
// Complete level
analytics.stopPe('game', 'level_5', {
successfulCompletion: true,
score: 8500,
stars: 3,
duration: 180000,
});
// Update level
analytics.setLevel('app', 6);In-App Purchase
analytics.addEvent('app', 'iap', {
productId: 'remove_ads',
price: 4.99,
currency: 'USD',
transactionId: 'txn-789',
});Best Practices
Initialize Early: Initialize the SDK as soon as possible in your application lifecycle, ideally before any user interactions.
Set User ID: If you have a user ID available, set it during initialization or immediately after user login.
Consistent Event Names: Use consistent naming conventions for event codes to make analysis easier.
Include Context: Add relevant parameters to events to provide context for analysis.
Track Important Actions: Track key user actions like purchases, registrations, level completions, and feature usage.
TypeScript Support
The SDK includes full TypeScript definitions for better development experience with autocomplete and type checking.
Need Help?
For comprehensive documentation and detailed API reference, visit:
- Web SDK Integration Guide - Complete integration guide with all features and configuration options
- DevToDev Documentation - Full documentation portal