API Destination

Web Source code Package

The API destination allows you to send events to any HTTP endpoint with customizable data transformation and transport methods.

Installation

npm install @walkeros/web-destination-api

Setup

import { createCollector } from '@walkeros/collector';
import { destinationAPI } from '@walkeros/web-destination-api';

const { elb } = await createCollector();

elb('walker destination', destinationAPI, {
  settings: {
    url: 'https://api.example.com/events',
  },
});

Configuration reference

Property	Type	Description	More
url*	string	The HTTP endpoint URL to send events to
headers	Record<string, string>	Additional HTTP headers to include with requests
method	string	HTTP method for the request
transform	function	Function to transform event data before sending
transport	'fetch' | 'xhr' | 'beacon'	Transport method for sending requests

* Required fields

Usage

Basic Usage

import { createCollector } from '@walkeros/collector';
import { destinationAPI } from '@walkeros/web-destination-api';

const { elb } = await createCollector();

elb('walker destination', destinationAPI, {
  settings: {
    url: 'https://api.example.com/events',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer your-token',
    },
  },
});

Advanced Usage with Transform

import { createCollector } from '@walkeros/collector';
import { destinationAPI } from '@walkeros/web-destination-api';

const { elb } = await createCollector();

elb('walker destination', destinationAPI, {
  settings: {
    url: 'https://api.example.com/events',
    transport: 'fetch',
    transform: (event, config, mapping) => {
      // Custom transformation logic
      return JSON.stringify({
        timestamp: Date.now(),
        event_name: `${event.entity}_${event.action}`,
        properties: event.data,
        context: event.context,
      });
    },
  },
});

Examples

Sending to Analytics API

import { createCollector } from '@walkeros/collector';
import { destinationAPI } from '@walkeros/web-destination-api';

const { elb } = await createCollector();

// Configure for analytics API
elb('walker destination', destinationAPI, {
  settings: {
    url: 'https://analytics.example.com/track',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': 'your-api-key',
    },
    transform: (event) => {
      return JSON.stringify({
        event_type: `${event.entity}_${event.action}`,
        user_id: event.user?.id,
        session_id: event.user?.session,
        properties: event.data,
        timestamp: event.timing,
      });
    },
  },
});

Using Beacon Transport

For critical events that need to be sent even when the page is unloading:

elb('walker destination', destinationAPI, {
  settings: {
    url: 'https://api.example.com/critical-events',
    transport: 'beacon', // Reliable for page unload scenarios
  },
});

Custom Data Mapping

Use mapping rules to control which events are sent:

elb('walker destination', destinationAPI, {
  settings: {
    url: 'https://api.example.com/events',
  },
  mapping: {
    entity: {
      action: {
        data: 'data',
      },
    },
  },
});

Transport Methods

• fetch (default): Modern, promise-based HTTP requests
• xhr: Traditional XMLHttpRequest for older browser compatibility
• beacon: Uses Navigator.sendBeacon() for reliable data transmission during page unload