@bufferapp/buffer-tracking-browser-js

Segment tracking library for browser based Buffer JS projects

Usage no npm install needed!

<script type="module">
  import bufferappBufferTrackingBrowserJs from 'https://cdn.skypack.dev/@bufferapp/buffer-tracking-browser-js';
</script>

README

Buffer Tracker - Browser (Javascript)

A Strongly-typed segment tracking companion for use in browser JavaScript projects. Under the hood this uses the Buffer segment tracking plan, acting as a type-safe wrapper for clients. With this, there is no need to pull in or reference the tracking plan!

You will need to have configured segment as per these instructions before using this package.

You can install this by running:

npm install @bufferapp/buffer-tracking-browser-js

Before using, you'll need to ensure that your project is configured to access to segment. You can follow this guide here.

Next you'll need to add the typewriter import to the desired file:

import typewriter from '@bufferapp/buffer-tracking-browser-js'

With the dependency added, you can use the typewriter reference to call the desired tracking functions:

typewriter.draftSubmitted({
  product: 'publish',
  channel: 'instagram',
  channelType: 'business',
  postId: '58edaj782102dff',
  channelId: '12345679',
  channelServiceId: '987654567898'
})

When calling these functions, any violations or errors will be logged as warnings to your console. if you wish for these to throw errors (maybe during development), then you can configure options on the typewriter reference to enable this:

typewriter.setTypewriterOptions({
  onViolation: (msg, violations) => {
    const issues = violations.map(v => v.keyword === 'type' ? `${v.message}: '${v.dataPath}'` : `${v.message}`)
    throw new Error(
      `"${msg.event}" Fired with Tracking Plan Violation\n    ${issues.join('\n    ')}`
    )
  }
})

Latest plan changes not reflected in the library

If the library does not reflect the latest tracking changes then you can trigger a rebuild manually. Head over to this URL and select the Run Workflow option. After a few minutes, the latest release should be pushed to NPM.

Screenshot 2021-06-01 at 14 25 51