@adv-ui/ma-segment-wrapper

Milanuncios Segment Wrapper

CI

You want to have your assets on PRE environment:

The steps that you need to follow are:

• Create a branch from master
• Put you assets inside the images || fonts folder
• Push the branch to origin
• Open a PR
• Travis will be listening for new PR's ONLY from branches which its origin is MASTER
• Travis will made a deploy to our PRE bucket.

You want to have your assets on PRO environment:

The steps that you need to follow are:

1 - Have a valid PR already opened 2 - Merge this PR into MASTER (ONLY WILL WORK IF YOU MERGE A PR WHICH ITS ORIGIN WAS MASTER INTO MASTER) 3 - Travis will made a deploy to our PRO bucket and @adv-ui/ma-segment-wrapper npm package will be published

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/ma-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...

Use UMD cdn:

• PRE: https://scm-milanuncios-frontend-pre.milanuncios.net/segment-wrapper/index.js
• PRO: https://scm-milanuncios-frontend-pro.milanuncios.com/segment-wrapper/index.js

// First load the UMD module.
<script src="https://scm-milanuncios-frontend-pro.milanuncios.com/statics/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.sui.analytics.identify('your user id', {
    // All your traits
  });
  window.sui.analytics.track('your event name', {
    // All your properties
  });
  window.sui.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, we could implement them with 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.