Lightweight data collection solution

Features

• 🚀 Zero dependencies - Pure native JavaScript implementation, no third-party libraries required
• 📦 Small size - Core code is streamlined, suitable for mobile scenarios
• 🎯 Automatic tracking - Automatic exposure monitoring based on IntersectionObserver
• 🖱️ Click tracking - Automatically bind click events, supports dynamic DOM
• ✋ Manual tracking - Provides convenient manual tracking API
• 📝 TypeScript - Complete type definition support

Installation

npm install md-tracker

Quick Start

1. Automatic Tracking

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();

2. Manual Tracking

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'
});

3. Configure Tracking Service Endpoint

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
});

API Documentation

createTracker(config)

Create a tracking tracker.

Return value: Destroy function, stops all listeners when called

logExposure(data)

Manually send exposure tracking.

logClick(data)

Manually send click tracking, parameters same as logExposure.

setConfig(options)

Set global configuration.

resetExposure(ele)

Reset element exposure status, allowing exposure again.

createLogger(baseData)

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

Tracking Configuration Description

TrackingConfig

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
}

TrackingData

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;
}

HTML Usage Example

<!-- 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>

Core Mechanism

Exposure Tracking

Use IntersectionObserver API to monitor whether elements enter the viewport, automatically triggering exposure tracking requests.

Click Tracking

Use addEventListener to bind click events, with MutationObserver to monitor DOM changes, supporting dynamically added elements.

Request Method

• Exposure tracking: Default uses JSONP cross-domain request
• Click tracking: Sent using XMLHttpRequest

File Structure

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