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 { createCollector } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
  import { createSource } from 'https://cdn.jsdelivr.net/npm/@walkeros/core/dist/index.mjs';
  import { sourceBrowser } from 'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs';

  const { collector } = await createCollector({
    sources: {
      browser: createSource(sourceBrowser, {
        settings: {
          pageview: true,
          session: true,
          elb: 'elb',
        },
      }),
    },
    destinations: {
      console: {
        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 { createCollector } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
      import { createSource } from 'https://cdn.jsdelivr.net/npm/@walkeros/core/dist/index.mjs';
      import { sourceBrowser } from 'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs';

      const { collector } = await createCollector({
        sources: {
          browser: createSource(sourceBrowser, {
            settings: {
              pageview: true,
              session: true,
              elb: 'elb',
            },
          }),
        },
        destinations: {
          console: {
            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 { createCollector } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
      import { createSource } from 'https://cdn.jsdelivr.net/npm/@walkeros/core/dist/index.mjs';
      import { sourceBrowser } from 'https://cdn.jsdelivr.net/npm/@walkeros/web-source-browser/dist/index.mjs';

      await createCollector({
        sources: {
          browser: createSource(sourceBrowser, {
            settings: { elb: 'elb' },
          }),
        },
        destinations: {
          console: { 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 { createCollector } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs'
  );
  const { createSource } = await import(
    'https://cdn.jsdelivr.net/npm/@walkeros/core/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 with proper createSource pattern
  const { collector } = await createCollector({
    sources: {
      browser: createSource(sourceBrowser, {
        settings: {
          pageview: true,
          session: true,
          elb: 'elb', // Browser source sets window.elb
        },
      }),
    },
    destinations: {
      console: {
        push: (event) => console.log('Event:', event),
      },
      ga4: {
        ...destinationGtag.default,
        config: {
          settings: {
            ga4: { measurementId: 'G-XXXXXXXXXX' },
          },
        },
      },
    },
  });

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

Adding Destinations​

Add Google Analytics or other destinations:

<script type="module">
  import { createCollector } from 'https://cdn.jsdelivr.net/npm/@walkeros/collector/dist/index.mjs';
  import { createSource } from 'https://cdn.jsdelivr.net/npm/@walkeros/core/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 createCollector({
    sources: {
      browser: createSource(sourceBrowser, { settings: { elb: 'elb' } }),
    },
    destinations: {
      console: { push: (event) => console.log('Event:', event) },
      ga4: {
        ...destinationGtag,
        config: { settings: { ga4: { measurementId: 'G-XXXXXXXXXX' } } },
      },
    },
  });
</script>

Next Steps​

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