@s-ui/ij-segment-wrapper
v2.7.0
Published
[![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,528
Maintainers
Keywords
Readme
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
fileRun 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.