Skip to main content

Browser/CDN Quickstart

No Build Required

  • CDN Delivery: Load directly from CDN without bundling
  • Instant Setup: Works immediately on any HTML page
  • Zero Dependencies: Self-contained script with all features

Use Cases​

  • Static websites: Sites without build processes
  • Legacy applications: Adding tracking to existing systems
  • Quick prototypes: Fast implementation for testing
  • Third-party integrations: When you can only add script tags

Installation​

No npm installation required. Just add the CDN script:

Use ES6 modules for loading walkerOS packages:

<script type="module">
  import { startFlow } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
  import { sourceBrowser } from 'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs';

  const { collector, elb } = await startFlow({
    sources: {
      browser: {
        code: sourceBrowser,
        config: {
          settings: {
            pageview: true,
            session: true,
            elb: 'elb',
          },
        },
      },
    },
    destinations: {
      console: {
        code: {
          type: 'console',
          config: {},
          push: (event) => console.log('Event:', event),
        },
      },
    },
  });

  window.walker = collector;
</script>

Usage Example​

Complete HTML page with walkerOS tracking:

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { startFlow } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
      import { sourceBrowser } from 'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs';

      const { collector, elb } = await startFlow({
        sources: {
          browser: {
            code: sourceBrowser,
            config: {
              settings: {
                pageview: true,
                session: true,
                elb: 'elb',
              },
            },
          },
        },
        destinations: {
          console: {
            code: {
              type: 'console',
              config: {},
              push: (event) => console.log('Event:', event),
            },
          },
        },
      });

      window.walker = collector;
    </script>
  </head>
  <body>
    <!-- Your content with data-elb attributes -->
  </body>
</html>

Tagging​

Add tracking attributes to your HTML elements:

<!DOCTYPE html>
<html>
  <head>
    <script type="module">
      import { startFlow } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
      import { sourceBrowser } from 'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs';

      await startFlow({
        sources: {
          browser: {
            code: sourceBrowser,
            config: {
              settings: { elb: 'elb' },
            },
          },
        },
        destinations: {
          console: {
            code: {
              type: 'console',
              config: {},
              push: (event) => console.log('Event:', event),
            },
          },
        },
      });
    </script>
  </head>
  <body>
    <!-- Automatically tracked button -->
    <button
      data-elb="button"
      data-elbaction="click"
      data-elb-button="label:Sign Up"
    >
      Sign Up Now
    </button>

    <!-- Automatically tracked product view -->
    <div
      data-elb="product"
      data-elbaction="view"
      data-elb-product="id:prod-123"
    >
      Product Details
    </div>

    <!-- Automatically tracked form -->
    <form
      data-elb="form"
      data-elbaction="submit"
      data-elb-form="type:newsletter"
    >
      <input type="email" placeholder="Email" />
      <button type="submit">Subscribe</button>
    </form>
  </body>
</html>

ES6 Modules​

Use modern ES6 modules:

<script type="module">
  // Dynamic imports
  const { startFlow } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs'
  );
  const { sourceBrowser } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs'
  );
  const destinationGtag = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/web-destination-gtag/dist/index.mjs'
  );

  // Setup tracking
  const { collector, elb } = await startFlow({
    sources: {
      browser: {
        code: sourceBrowser,
        config: {
          settings: {
            pageview: true,
            session: true,
            elb: 'elb',
          },
        },
      },
    },
    destinations: {
      console: {
        code: {
          type: 'console',
          config: {},
          push: (event) => console.log('Event:', event),
        },
      },
      ga4: {
        code: destinationGtag.default,
        config: {
          settings: {
            ga4: { measurementId: 'G-XXXXXXXXXX' },
          },
        },
      },
    },
  });

  // window.elb is automatically set by browser source
  // Track custom events
  elb('page view', { title: document.title });
</script>

Adding Destinations​

Add Google Analytics or other destinations:

<script type="module">
  import { startFlow } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
  import { sourceBrowser } from 'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs';
  import destinationGtag from 'https://cdn.jsdelivr.net/npm/@walkeros/web-destination-gtag/dist/index.mjs';

  await startFlow({
    sources: {
      browser: {
        code: sourceBrowser,
        config: {
          settings: { elb: 'elb' },
        },
      },
    },
    destinations: {
      console: {
        code: {
          type: 'console',
          config: {},
          push: (event) => console.log('Event:', event),
        },
      },
      ga4: {
        code: destinationGtag,
        config: {
          settings: {
            ga4: { measurementId: 'G-XXXXXXXXXX' },
          },
        },
      },
    },
  });
</script>

Next Steps​

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