Web destinations

Like the web client walker.js, the web destinations run in a users browser directly. It's purpose is to initialize a destination, map event data to the destination's requirements, and send them.

A destination receives events through the push interface. Configurations can be made in the config object. The optional init function gets called before actually pushing events and has to return true on proper initialization to enable event processing.

info

See how to add a destination to walker.js.

Installation

There are different ways to install a web destination:

• TypeScript: Install the destination package and import it in your code.
• Script: Load the destination mjs module with a script tag.
• Code: Download/copy the browser file and include it directly in your code. This will create a Destination object in the global namespace.

Configuration

Each destination requires its own configuration. All settings are optional and can be omitted. Besides common settings like consent, id, and others, there are also individual settings only available for a specific destination in the custom object and mapping.

info

Learn about general destination configuration.

The individual Custom settings and EventMapping in the mapping used for event specifications. All configuration definitions, and examples are available in each destination's detail page.

Create your own

Instead of using the pre-built destinations, you can also create your own. A valid WebDestination.Destination consists of a config object, and the two methods init and push. The following examples shows how to create a destination for the web.

A very basic console destination:

elb('walker destination', { push: console.log });

JavaScript

A basic destination setup looks like this.

var destination = {
  config: {},
  init: function (config) {
    // Do something initializing
    // window.xxx = console.log;
    return true;
  },
  push: function (event, config, mapping) {
    // Do something magical
    // window.xxx({ event, config, mapping });
  },
};

TypeScript

Import and extend the default WebDestination interface. To customize the destinations config use the generic types Custom and CustomEvent.

import type { WebDestination } from '@elbwalker/walker.js';

interface Destination
  extends WebDestination.Destination<Custom, CustomEvent> {
    // Add additional methods
}

type Config = WebDestination.Config<Custom, CustomEvent>;

interface Custom {
  // Destination related configuration settings in config.custom
}

interface CustomEvent {
  // Event related configuration settings in event.mapping.custom
}

// Optionally, add global variables to the global namespace.
declare global {
  interface Window {
    xxx?: Function; // global window objects
  }
}

Create the actual destination.

export const destination: Destination.Destination = {
  config: {},

  init(config) {
    if (config.loadScript) addScript();

    // Do something initializing
    // window.dataLayer = window.dataLayer || [];

    return true;
  },

  push(event, config, mapping = {}) {
    // Do something magical
    // window.dataLayer.push({ event, config, mapping });
  },
};

function addScript(src = 'https://DOMAIN/SCRIPT.js') {
  const script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
}

export default destination;

// Add the destination to walker.js
elb('walker destination', destination, config);

Available destinations

If you can't find your desired destination, you can request it.

📄️ API

How to send events to a custom API endpoint with walker.js

📄️ Google Ads

How to send conversion events to Google Ads with walker.js

📄️ Google Analytics 4 (GA4)

How to send events to Google Analytics 4 (GA4) with walker.js

📄️ Google Tag Manager (GTM)

How to send events to Google Tag Manager (GTM) with walker.js

📄️ Meta Pixel

How to send events to Meta Pixel (formerly Facebook Pixel) with walker.js

📄️ Piwik PRO

How to send events to Piwik PRO with walker.js

📄️ Plausible Analytics

How to send events to Plausible Analytics with walker.js