Widget Tracking & Analytics Guide

Widget tracking allows you to monitor user interactions, performance metrics, and business insights from Sportradar widgets integrated into your website. With comprehensive tracking, you can:

Monitor User Engagement - Track clicks, interactions, and user behavior patterns
Measure Performance - Monitor loading times, error rates, and success metrics
Optimize User Experience - Identify pain points and improve widget placement
Drive Business Insights - Analyze user preferences and content effectiveness
Ensure Reliability - Detect and respond to errors automatically

The tracking system provides real-time event data through the onTrack callback function, enabling seamless integration with your analytics infrastructure.

#Intended Audience

This tutorial is intended for engineers involved in integration of Sportradar widgets into their online infrastructure, who are building custom tracking of how Sportradar widgets are used inside their online environment.

#Goals

In this tutorial you will learn:

Tracking Architecture - How the widget tracking system works
Event Types - Complete documentation of all trackable events
Implementation Patterns - Best practices for different tracking scenarios
Analytics Integration - Examples for popular analytics platforms
Performance Optimization - Efficient tracking without impacting user experience
Privacy Compliance - GDPR and privacy-friendly tracking approaches

#Prerequisites

To get through this tutorial, you will need:

a website with integrated Sportradar widgets
a supported web browser (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+)
a development environment (VS Code, VIM, EMACS, Notepad++, IntelliJ, Eclipse, PyCharm)
basic knowledge of JavaScript and event handling
access to an analytics platform (optional, for integration examples)

#Tracking Architecture

Understanding how widget tracking works helps you implement effective monitoring:

#How Tracking Works

#Event Types & API Specification

#onTrack Function

The onTrack function is a callback property available on every widget's API. This function is invoked whenever any trackable event occurs within the widget.

Function Signature:

typescript

function onTrack(eventType: string, eventData: object): void

Parameters:

Parameter	Type	Description
eventType	string	The type of event that occurred
eventData	object	Contextual data about the event

#Event Types

#Interactive Implementation Tutorial

Let's build a comprehensive tracking system step by step:

#Analytics Platform Integration

Real-world examples for popular analytics platforms:

#Advanced Tracking Patterns

#Event Filtering & Sampling

For high-traffic applications, implement intelligent event filtering:

#Privacy-First Tracking

Implement tracking that respects user privacy and complies with regulations:

#Debugging & Troubleshooting

#Common Issues and Solutions

Events not firing

Possible causes:

Widget not loading properly
Incorrect onTrack function signature
JavaScript errors preventing callback execution
Event filtering blocking events

Solutions:

// Debug tracking implementation
function debugTrackingCallback(eventType, data) {
    console.log('🔍 Tracking Debug:', {
        eventType,
        data,
        timestamp: new

Missing event data

Possible causes:

Widget configuration missing required parameters
Data not yet loaded when event fires
Event data structure changed

Solutions:

// Validate and enrich event data
function validateEventData(eventType, data) {
    const requiredFields = {
        'data_change': ['component', 'version'],
        'odds_click': ['visible']

Performance impact

Possible causes:

Synchronous analytics calls
Large event payloads
Too frequent events

Solutions:

// Performance monitoring
class PerformanceTracker {
    constructor() {
        this.metrics = [];
    }
    
    measureTracking(eventType

#Development Tools

#Best Practices Summary

Advanced example demonstrating how to use onTrack callback to preload widget and display it only if there is no error, can be found here.

{
    // Widget metadata
    scheme: 'https',
    solution: 'sir', 
    component: 'match.scoreboard',
    version: '2.1.0',
    language: 'en',
    channel: 'web',
    
    // Content identifiers
    sportId: 1,
    categoryId: 123,
    tournamentId: 456,
    seasonId: 789,
    matchId: 12345,
    
    // Team information (when applicable)
    team1uid: 'team_123',
    team2uid: 'team_456',
    
    // Location data (when applicable)
    continentId: 1,
    venueId: 789,
    
    // User context
    user: 'anonymous_user_id',
    
    // Error information (when error occurs)
    error: null | {
        message: 'Error description',
        code: 'ERROR_CODE',
        details: {}
    }
}

const onTrack = (eventType, data) => {
    if (eventType === 'data_change') {
        if (data.error) {
            console.error('Widget failed to load:', data.error);
            // Hide widget or show error message
            document.getElementById('widget-container').style.display = 'none';
        } else {
            console.log('Widget loaded successfully:', data.component);
            // Analytics tracking
            analytics.track('widget_loaded', {
                widget_type: data.component,
                match_id: data.matchId,
                sport_id: data.sportId
            });
        }
    }
};

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Widget Tracking Implementation</title>
    <style>
        .analytics-dashboard {
            background: #f5f5f5;
            padding: 20px;
            margin: 10px 0;
            border-radius: 8px;
        }
        .event-log {
            background: #

// Google Analytics 4 integration
const trackingCallback = (eventType, data) => {
    switch(eventType) {
        case "data_change":
            if (!data.error) {
                gtag('event', 'widget_loaded', {
                    event_category: 'Widget',
                    event_label: data.component,
                    custom_parameters: {
                        match_id: data.matchId,
                        sport_id: data.sportId,
                        widget_version: data.version
                    }
                });
            } else {
                gtag('event', 'widget_error', {
                    event_category: 'Widget',
                    event_label: data.component,
                    custom_parameters: {
                        error_message: data.error.message,
                        error_code: data.error.code
                    }
                });
            }
            break;
            
        case "odds_click":
            gtag('event', 'odds_interaction', {
                event_category: 'Engagement',
                event_label: 'odds_click',
                value: data.odds?.value || 0,
                custom_parameters: {
                    market_type: data.odds?.market,
                    selection: data.odds?.selection,
                    match_id: data.odds?.matchId
                }
            });
            break;
            
        case "social_share":
            gtag('event', 'share', {
                method: data.target,
                content_type: 'widget',
                content_id: data.source
            });
            break;
    }
};

// Advanced event filtering system
class EventFilter {
    constructor() {
        this.filters = new Map();
        this.rateLimits = new Map();
    }
    
    // Add filter conditions
    addFilter(eventType, filterFn) {
        if (!this.filters.has(eventType)) {
            this.filters.set(eventType, []);
        }
        this.filters.get(eventType).push(filterFn);
    }
    
    // Add rate limiting
    addRateLimit(eventType, maxEventsPerMinute) {
        this.rateLimits.set(eventType, {
            max: maxEventsPerMinute,
            events: [],
            lastCleanup: Date.now()
        });
    }
    
    // Check if event should be tracked
    shouldTrack(eventType, data) {
        // Apply filters
        const filters = this.filters.get(eventType) || [];
        for (const filter of filters) {
            if (!filter(data)) {
                return false;
            }
        }
        
        // Apply rate limiting
        if (this.rateLimits.has(eventType)) {
            return this.checkRateLimit(eventType);
        }
        
        return true;
    }
    
    checkRateLimit(eventType) {
        const limit = this.rateLimits.get(eventType);
        const now = Date.now();
        
        // Clean old events (older than 1 minute)
        if (now - limit.lastCleanup > 60000) {
            limit.events = limit.events.filter(time => now - time < 60000);
            limit.lastCleanup = now;
        }
        
        if (limit.events.length >= limit.max) {
            return false;
        }
        
        limit.events.push(now);
        return true;
    }
}

// Usage example
const eventFilter = new EventFilter();

// Only track odds clicks for high-value odds
eventFilter.addFilter('odds_click', (data) => {
    return data.odds?.value > 2.0;
});

// Limit data_change events to 10 per minute
eventFilter.addRateLimit('data_change', 10);

// Enhanced tracking callback with filtering  
const trackingCallback = (eventType, data) => {
    if (!eventFilter.shouldTrack(eventType, data)) {
        return; // Skip tracking this event
    }
    
    // Proceed with normal tracking
    processEvent(eventType, data);
};

// Privacy-compliant tracking system
class PrivacyTracker {
    constructor() {
        this.hasConsent = false;
        this.consentTypes = new Set();
        this.queuedEvents = [];
        this.anonymousMode = true;
    }
    
    // Set user consent status
    setConsent(consentGiven, consentTypes = []) {
        this.hasConsent = consentGiven;
        this.

// Development-only event inspector
class TrackingInspector {
    constructor() {
        this.events = [];
        this.isEnabled = window.location.search.includes('debug=tracking');
        
        if (this.isEnabled) {
            this.createInspectorUI();
        }
    }
    
    inspect(eventType, data) {
        if (!this

Widget Tracking & Analytics Guide

#What Is Widget Tracking?

#Intended Audience

#Goals

#Prerequisites

#Tracking Architecture

#How Tracking Works

#Event Types & API Specification

#onTrack Function

#Event Types

#Interactive Implementation Tutorial

#Analytics Platform Integration

#Advanced Tracking Patterns

#Event Filtering & Sampling

#Privacy-First Tracking

#Debugging & Troubleshooting

#Common Issues and Solutions

#Development Tools

#Best Practices Summary

Create Analytics Dashboard

Build Analytics System

Implement Event Handlers

Track Performance Metrics

Initialize Widget System

Load Widget With Tracking

Widget Tracking & Analytics Guide

Widget Tracking & Analytics Guide

#What Is Widget Tracking?

#Intended Audience

#Goals

#Prerequisites

#Tracking Architecture

#How Tracking Works

#Event Types & API Specification

#onTrack Function

#Event Types

#Interactive Implementation Tutorial

#Analytics Platform Integration

#Advanced Tracking Patterns

#Event Filtering & Sampling

#Privacy & GDPR Compliance

#Privacy-First Tracking

#Debugging & Troubleshooting

#Common Issues and Solutions

#Development Tools

#Best Practices Summary

Create Analytics Dashboard

Build Analytics System

Implement Event Handlers

Track Performance Metrics

Initialize Widget System

Load Widget With Tracking