Skip to main content

Integrated mode

In Integrated mode, walkerOS lives inside your application code. You configure it with TypeScript, and it deploys as part of your app bundle.

Quickstart​

1. Install packages​

Loading...

2. Initialize walkerOS​

Loading...

That's it. You now have browser event collection running.

Adding destinations​

Install destination packages and add them to your config:

Loading...
Loading...

Add consent requirements to control which destinations receive events:

Loading...

Key concepts​

The code: Property​

In Integrated mode, you pass actual code references:

sources: {
  browser: {
    code: sourceBrowser,  // Direct import, not a string
  },
},

This differs from Bundled mode where you use package: with a string reference.

The elb Function​

startFlow() returns an elb function for tracking events:

const { elb } = await startFlow({ ... });

// Track events with entity-action format
elb('page view', { title: 'Home' });
elb('product add', { id: 'abc', name: 'Widget', price: 29.99 });
elb('order complete', { total: 99.99, currency: 'USD' });

Type safety​

Integrated mode gives you full TypeScript support:

import type { WalkerOS } from '@walkeros/core';

const { elb } = await startFlow<WalkerOS.Elb>({
  // Full autocomplete and type checking
});

Framework examples​

// hooks/useWalker.ts
import { useEffect, useState } from 'react';
import { startFlow } from '@walkeros/collector';
import { sourceBrowser } from '@walkeros/web-source-browser';

export function useWalker() {
  const [elb, setElb] = useState<WalkerOS.Elb | null>(null);

  useEffect(() => {
    startFlow({
      sources: {
        browser: { code: sourceBrowser, config: { settings: { pageview: true } } },
      },
    }).then(({ elb }) => setElb(() => elb));
  }, []);

  return elb;
}

Next steps​

See also​

💡 Need Professional Support?
Need professional support with your walkerOS implementation? Check out our services.