Basics
How elbwalker destinations work and why you should use them
Walker.js is meant to be vendor-agnostic. We actually encourage you to use different tools for different purposes. But we also encourage you to minimize the instrumentation effort and use walker.js as a universal implementation layer.
Destination will help you with:
- Keep your data clean by enforcing event naming conventions
- Easily set up new analytics tools
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 do so.import { elb } from '@elbwalker/walker.js';
type Config = WebDestination.Config<CustomConfig, CustomEventConfig>;
interface CustomConfig {
// Used for general destination settings
}
interface CustomEventConfig {
// Used for individual event settings
}
const destination: WebDestination.Function<CustomConfig, CustomEventConfig> = {
init: (config: Config) => {
// Setting up the destination
return true; // Returning true is required to process events
},
push: (
event: IElbwalker.Event,
config: Config,
mapping?: WebDestination.EventConfig<CustomEventConfig>,
) => void {
// Process the event
},
config: {
// consent: { marketing: true, randomTool: true }, // Necessary consent states
// custom: {
// // A destinations individual configuration settings (CustomConfig)
// },
// init: false, // Status of initialization, set to true to skip init
// loadScript: false; // If an additional script to work should be loaded
// mapping: {
// entity: {
// action: {
// consent: {}, // Required consent states to init and push events
// custom: {
// // CustomEventConfig
// },
// ignore: false, // Choose to no process an event when set to true
// name: "entity_action" // Use a custom event name
// },
// },
// }, // Specific Event handling config
},
};
elb('walker destination', destination, config);
Each destination requires its own configuration. While there are common settings like
consent, init, or loadScript there are also individual settings only available for a specific destination in the custom object and mapping. A destination has a
Config for general settings and EventConfig in the mapping used for event specifications.import { elb } from '@elbwalker/walker.js';
import destinationAPI, { DestinationAPI } from '@elbwalker/destination-web-google-ga4';
import destinationGoogleGA4 from '@elbwalker/destination-web-google-ga4';
const configAPI: DestinationAPI.Config = {
custom: { url: 'https://httpbin.org/anything', },
};
elb('walker destination', destinationAPI, configAPI);
destinationGoogleGA4.config = { custom: { measurementId: 'G-XXXXXX-1' } };
elb('walker destination', destinationGoogleGA4);
The init property handles the initialization state of a destination. By setting
init = true the init function will not get called. The init function sets init to true after successful initialization.When there's an init function, no events get processed until
init is set to true.You can set required consent states for each destination. When there is no matching state no events get processed. The walker creates an ordered queue for all events during a run. When the consent gets updated to true all events will be processed in the given order.
destination.config = {
consent: {
marketing: true,
statistics: true
}
};
With each run one of the required consent states marketing or statistics has to be set to true to process events:
elb("walker consent", { statistics: true }); // Permit event processing
The destinations mapping is to set up individual rules for each event, defined by the entity action naming. The
EventConfig extends the defaults, with the ignore and name settings.Use the asterisk symbol
* as a wildcard character for both, entities or actions.destination.config = {
mapping: {
entity: { action: {} }, // Specific event
page: { view: { ignore: true } }, // Do not process
order: {
complete: { name: 'purchase' }, // Renaming an event
refund: { name: 'refund' }, // Another renaming
'*': {}, // Process all other order events
},
'*': { '*': { ignore: true } }, // Ignore all other events
},
};
Use a mapping table to validate or enforce proper naming conventions
Once the
mapping property is set only matching events get processed by the destination.Some destinations support to load required 3rd party script to work properly. By setting
loadScript = true all destinations necessary script will be loaded.destination.config = {
loadScript: true,
};
For more information on any of the things covered in this documentation, you can
Last modified 1mo ago