Browser-Specific Features

Automatic page enrichment

The browser SDK enriches page and track events with contextual information when available:

Page URL, path, referrer, and title
User agent and screen dimensions
Locale / campaign parameters (UTM tags)

Ready callback

Wait until plugins have finished loading:

analytics.ready(() => {
  console.log('Analytics is ready')
})

Anonymous ID

analytics.setAnonymousId('custom-anon-id')

const anonymousId = analytics.user().anonymousId()

Query string identity

When the page URL contains ajs_ parameters (for example ajs_uid, ajs_aid, ajs_trait_*, ajs_event), the SDK can apply them on load. Disable or constrain this with useQueryString in Advanced Configuration.

Source and destination middleware

analytics.addSourceMiddleware(({ payload, next }) => {
  // Mutate or drop events before they are sent
  payload.obj.properties = {
    ...payload.obj.properties,
    app_version: '1.2.3'
  }
  next(payload)
})

analytics.addDestinationMiddleware('Zixflow', ({ payload, next }) => {
  next(payload)
})

Plugin system

const customPlugin = {
  name: 'Custom Plugin',
  type: 'enrichment',
  version: '1.0.0',

  isLoaded: () => true,
  load: async (_ctx, _analytics) => {},

  track: async (ctx) => {
    ctx.event.properties = {
      ...ctx.event.properties,
      custom_property: 'value'
    }
    return ctx
  }
}

await analytics.register(customPlugin)

CDN snippet

Load the SDK without a bundler. Replace YOUR_WRITE_KEY with your write key:

<!DOCTYPE html>
<html>
<head>
  <script>
    !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Zixflow snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdp.zixflow.com/analytics.js/v1/"+key+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="YOUR_WRITE_KEY";analytics.SNIPPET_VERSION="4.15.3";
    analytics.load("YOUR_WRITE_KEY");
    analytics.page();
    }}();
  </script>
</head>
<body>
  <h1>My Website</h1>
</body>
</html>

The snippet queues calls (identify, track, page, middleware helpers, and more) until the library finishes loading.

Getting Started

Features

Advanced

Reference

Browser-Specific Features

Automatic page enrichment

Ready callback

Anonymous ID

Query string identity

Source and destination middleware

Plugin system

CDN snippet

​Automatic page enrichment

​Ready callback

​Anonymous ID

​Query string identity

​Source and destination middleware

​Plugin system

​CDN snippet

Automatic page enrichment

Ready callback

Anonymous ID

Query string identity

Source and destination middleware

Plugin system

CDN snippet