@s-ui/ij-segment-wrapper

v2.6.0

Published

a month ago

[![Build Status](https://travis.mpi-internal.com/scmspain/frontend-ij--segment-wrapper.svg?token=weuzuyzw6juAMe8gcwxy&branch=master)](https://travis.mpi-internal.com/scmspain/frontend-ij--segment-wrapper) ![](https://img.shields.io/badge/automatic-release

Downloads

2,569

0High
0Medium
0Low

sebastian.badea.adevinta

thomas.page.ext

victoria.pasichnyk.ext

daniel.perez.ext

albert.peiro

frandelacasa-adevinta

mariapaula.forero.ext

hpintos_adevinta

sziauberyte

victor.perez.adevinta

cristina.rodriguez.duque

francisco.ruiz.lloret

andresadv

schibstedspain

Jobs segment wrapper

Description

This wrapper sets up all needed tracking configurations

Features

Infojobs' Visitor ID

This library is in charge of loading the id used at infojobs to use as Adobes' Marketing Cloud Visitor Id integration when sending an event through Segment. This id is created here if it doesn't exist before and is saved in a cookie in order to be shared with the backend so they can reuse it. Check out the source code for deeper understanding of what it does exactly but the main idea is that the first time it will wait until adobes' visitor api is loaded and that id is used and cached.

if infojobs' visitor id saved in cookie
  return infojobs' visitor id cookie
otherwise
  wait while adobe's visitor api is loading
  if adobe's visitor api timed out or crashed
    generate uuid
    return generated uuid
  otherwise
    save adobe's visitor api id as infojob's visitor id cookie
    return adobe's visitor api id

Segment middlewares

Google Tag Manager Only

As the backend tracks user events after its second visit but we still want to send that information towards Google's Tag Manager we implemented a middleware. This middleware acts as a proxy, activating and deactivating destinations depending on the times the user has visited the page, the consents the user has given and if it is a event already tracked by the backend or not.

The output of each variation has been written down in this table:

https://docs.google.com/spreadsheets/d/1TSZkBXg1TdOaZmHFtseVwf9Dzz_AN0zE5tZkY9kk0SY/edit#gid=0

Usage

Load the script as first script in your page

<html>
<head>
  <script src="https://unpkg.com/@s-ui/ij-segment-wrapper/umd/index.js"></script>
</head>
<body>
  
</body>
</html>

Local dev

Create new umd

> npm run umd:dev

Open a http server serving the umd folder

⚠️ make sure the server runs in port 5000

> npx serve umd

Open the production page and block the https://unpkg.com/@s-ui/ij-segment-wrapper/umd/index.js file
Run this script to load this packages

var script = document.createElement('script');
script.src = 'http://localhost:5000/index.js'
body.append(script)

You can also test the library by publishing a new beta version. In order to do that:

Put the -beta.0 suffix to your version

"version": "1.50.0-beta.0",

Execute the publish command

> npm publish --tag beta

Check this url https://unpkg.com/@s-ui/ij-segment-wrapper@beta/umd/index.js. In few minutes, it should be redirect to your beta version. In our case:

https://unpkg.com/@s-ui/ij-segment-wrapper@beta/umd/index.js

Release a new version

Once you have merged your changes, the @s-ui/ci tool will automatically release your component. Once this step is completed https://unpkg.com/@s-ui/ij-segment-wrapper/umd/index.js will need up to 20 minutes to update its cdn's cache and start deliver the new version.

Migration to v2

In the v2 version, the entryPoint is not automatically invoked inside the library, but you need to import and call it when loading your app.

import {entryPoint, makeGtmMiddleware} from '@s-ui/ij-segment-wrapper'

if (process.env.NODE_ENV !== 'test') {
  entryPoint({customSourceMiddlewares})
}

In some cases, you may want to also apply custom source middlewares. In this case, it is possible to pass an array of custom middlewares (be careful, custom destination middlewares are not supported yet in this library version) as shown in this example:

import {entryPoint, makeGtmMiddleware} from '@s-ui/ij-segment-wrapper'

const customSourceMiddlewares = [makeGtmMiddleware()]

if (process.env.NODE_ENV !== 'test') {
  entryPoint({customSourceMiddlewares})
}

The makeGtmMiddleware is a factory function that applies a gtmMiddleware, which forwards events only to the Google Tag Manager destination under specific conditions (you probably won't need to use it). In case of exceptional need, is possible to whitelist some events with this middleware and threat them as usual:

import {entryPoint, makeGtmMiddleware} from '@s-ui/ij-segment-wrapper'

const whitelist = [
  'MyCv Experience Form Viewed'
]

const customSourceMiddlewares = [makeGtmMiddleware({whitelist})]

if (process.env.NODE_ENV !== 'test') {
  entryPoint({customSourceMiddlewares})
}

Breaking changes

The entrypoint is not automatically invoked, you need to import it from the library and call it manually to initialize the segment wrapper.