@adv-ui/mt-segment-wrapper

Motor Segment Wrapper

Usage no npm install needed!

<script type="module">
  import advUiMtSegmentWrapper from 'https://cdn.skypack.dev/@adv-ui/mt-segment-wrapper';
</script>

README

Motor Segment Wrapper Build Status

Usage

First, copy the official snippet in your HTML

Then, use it in your modern JavaScript...

// First import the module.
import analytics from '@adv-ui/mt-segment-wrapper'

// Then trigger all the events you need.
analytics.identify('your user id', {
  // All your traits
})
analytics.track('your event name', {
  // All your properties
})
analytics.reset()

Or, in your monolithic pages...

// First load the UMD module.
<script src="https://s.ccdn.es/segment-wrapper/index.js"></script>
<script>
  // Then trigger all the events you need referencing the right namespaced
  // object: `window.motor.analytics`. For more info see the "Events" section below.
  window.motor.analytics.identify('your user id', {
    // All your traits
  });
  window.motor.analytics.track('your event name', {
    // All your properties
  });
  window.motor.analytics.reset();
</script>

Events

Check the cross Segment Wrapper documentation: https://github.mpi-internal.com/scmspain/frontend-all--segment-wrapper#events

External trackers

For those tracking pixels we cannot migrate to Segment yet (e.g.: Adform), we've implemented a solution in order to make them work with our wrapper.

How to define new trackers

Just add a new tracker folder inside the externalTrackers directory, for example: src/externalTrackers/yourCustomTracker/index.js.

Then, put all the tracker content inside this file:

// src/externalTrackers/yourCustomTracker/index.js
export default ({event, properties}) => {
  // Do your magic here...
}

And finally, include it in the array externalTrackers:

// src/externalTrackers/index.js
import yourCustomTracker from './yourCustomTracker'

const externalTrackers = [yourCustomTracker]

// ...

Invalidating cache after deploys (UMD version)

Since we don't want to download the UMD module each time the file is requested from the S3 servers, we need to invalidate the server cache from the Motor CI: http://ci.coches.net/view/Jobs/job/JOB_Cloudfront_invalidate_cache/. Just select the domain pres.ccdn.es or s.ccdn.es depending on the environment we want to affect, and then set the image_path as /segment-wrapper/index.js. Finally run the build.