A lightweight tracking library for data collection points, supporting automatic exposure data collection points, click data collection points, and manual data collection points.
npm install md-tracker
import createTracker from 'md-tracker';
// Define tracking configuration
const trackingConfig = [
{
ele: '.banner', // CSS selector
data: {
dpm: '123.110.1.1', // Page element position identifier
dcm: '202.456.0.0', // Channel dimension identifier
appId: 'your-app-id',
dom: 'channel.0.0.0'
},
once: false // Whether to expose only once
},
{
ele: '.button-group',
data: {
dpm: '123.110.2.1',
dcm: '202.456.0.0',
appId: 'your-app-id'
}
}
];
// Initialize tracking
const destroy = createTracker({
show: trackingConfig, // Exposure tracking
click: trackingConfig // Click tracking
});
// Destroy tracking listener (optional)
// destroy();
import { logExposure, logClick, initManualMD } from 'md-tracker';
// Initialize configuration (optional)
initManualMD({
appId: 'your-app-id',
logInterval: 50 // Log sending interval
});
// Manual exposure tracking
logExposure({
dpm: '123.110.5.1',
dcm: '202.456.0.0',
appId: 'your-app-id'
});
// Manual click tracking
logClick({
dpm: '123.110.6.1',
dcm: '202.456.0.0',
appId: 'your-app-id'
});
import { setConfig } from 'md-tracker';
setConfig({
exposureUrl: '/exposure/standard', // Exposure tracking endpoint
clickUrl: '/log/click', // Click tracking endpoint
useJsonp: true // Whether to use JSONP for exposure
});
Create a tracking tracker.
| Parameter | Type | Description |
|---|---|---|
| config.show | TrackingConfig[] | Exposure tracking configuration array |
| config.click | TrackingConfig[] | Click tracking configuration array |
Return value: Destroy function, stops all listeners when called
Manually send exposure tracking.
| Parameter | Type | Description |
|---|---|---|
| data.dpm | string | Page element position identifier |
| data.dcm | string | Channel dimension identifier |
| data.appId | string | Application ID |
| data.domain | string | Business domain (optional) |
| data.dom | string | Channel identifier (optional) |
Manually send click tracking, parameters same as logExposure.
Set global configuration.
| Parameter | Type | Default | Description |
|---|---|---|---|
| exposureUrl | string | '/exposure/standard' | Exposure tracking endpoint |
| clickUrl | string | '/log/click' | Click tracking endpoint |
| useJsonp | boolean | true | Whether to use JSONP for exposure |
Reset element exposure status, allowing exposure again.
Create convenient tracking function factory.
import { createLogger } from 'md-tracker';
const logger = createLogger({
dpm: '123.110',
dcm: '202.456',
appId: 'your-app-id'
});
// Use simplified API
logger.exposure(1, 1, 0); // Send exposure tracking
logger.click(2, 1, 0); // Send click tracking
interface TrackingConfig {
ele: string | string[]; // Element selector
data: TrackingData; // Tracking data
once?: boolean; // Whether to expose only once, default true
logClick?: boolean; // Whether to record clicks, default true
logExposure?: boolean; // Whether to record exposures, default true
}
interface TrackingData {
dpm?: string; // Format: {appId}.{pageId}.{elementId}.{actionType}
dcm: string; // Format: 202.{projectId}.{status}.{extension}
domain?: string;
appId?: string;
dom?: string;
[key: string]: any;
}
<!-- Add tracking class names -->
<div class="banner md1">Banner Ad Slot</div>
<button class="btn md2">Click Button</button>
<script type="module">
import createTracker from 'md-tracker';
// Batch generate configurations
const appId = '123';
const projectId = '456';
const configs = Array.from({ length: 10 }).map((_, i) => ({
ele: `.md${i + 1}`,
data: {
dpm: `${appId}.110.${i + 1}.1`,
dcm: `202.${projectId}.0.0`,
appId
},
once: false
}));
createTracker({ show: configs, click: configs });
</script>
Use IntersectionObserver API to monitor whether elements enter the viewport, automatically triggering exposure tracking requests.
Use addEventListener to bind click events, with MutationObserver to monitor DOM changes, supporting dynamically added elements.
MD/
├── src/
│ ├── index.js # Package entry
│ ├── utils.js # Utility functions
│ ├── request.js # Network requests
│ ├── md-core.js # Automatic tracking core
│ ├── md-index.js # Tracking entry
│ └── manual-md.js # Manual tracking
├── types/
│ └── index.d.ts # TypeScript type definitions
├── package.json
└── README.md