Motor Segment Wrapper

Segment wrapper for all the specific functionalities about event broadcasting in Motor.

Table of Contents

• Usage
• Events
• Pixels
  • How they work
  • How to define new pixels
  • How to load third-party scripts
• Invalidating cache after deploys (UMD version)

Usage

1. First, copy the official snippet in your HTML

2. 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()

3. 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

Pixels

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

How they work

Pixels are custom implementations of external trackers. External trackers are just the basic and standard implementation in JS code for those third party integrations that cannot work in Segment right now.

All the external trackers are defined inside the externalTrackers directory, for example: src/externalTrackers/myTracker/index.js, and they have to export a factory function that will return the final function that will be executed by the pixels (explained in detail in the next section). In general, the factory function will only receive the required pixel ID parameter exposed as a named parameter: id.

This is a single faked example for an external tracker:

// src/externalTrackers/myTracker/index.js
export default ({id}) => ({event}) => {
  // Faked API.
  window.myTrackerAPI.setID(id)
  window.myTrackerAPI.track(event)
}

Then, they will be exported as named constants in the external trackers object.

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

export {myTracker}

How to define new pixels

Pixels in Motor are split by site: coches and motos.

Just add a new pixel folder inside the pixels site directory, for example: src/pixels/coches/myPixel/index.js.

Then, put all the pixel content following this example:

// src/pixels/coches/myPixel/index.js

// First, import the pixel track function.
import {myTracker} from '../../../externalTrackers'

// Then, instantiate it with the proper ID.
const track = myTracker({id: '1234'})

// You need to export a function that will be executed when the Analytics `track` or `page` method is triggered.
// Moreover, it will receive two of the parameters the Analytics methods receive: `event` and `properties`.
export default ({event, properties}) => {
  // Map the events for your pixel.
  const mappedEvent = event === 'Page Viewed' ? 'pageTrack' : 'eventTrack'
  // Define the needed conditions.
  const needsToTrack = event !== 'Home Viewed'
  // Finally, do the track.
  if (needsToTrack) track({event: mappedEvent})
}

How to load third-party scripts

For now, pixels defined in this Segment Wrapper expect their scripts has to be loaded in Segment as a valid Destination or via the external library Vendor by Consents Loader in the Motor web app.

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.