RubikJS
Description
JavaScript library meant to abstract core functionality in our beloved monolith
Usage
Load the script at the end of the body tag in your html file
<html>
<head>
...
</head>
<body>
...
<!-- PRE ENVS -->
<script src="https://unpkg.com/@s-ui/ij-rubik@next/umd/index.js"></script>
<!-- PRO ENV -->
<script src="https://unpkg.com/@s-ui/ij-rubik/umd/index.js"></script>
</body>
</html>Listen to rubik:loaded event rubik will sent once its loaded
document.addEventListener('rubik:loaded', function (ev) {})Now you will be able to access to window.rubik will all modules loaded
Modules
Analytics
Rubik loads and sets up everything needed to use the segment wrapper
Setup
First add this snippet to the header inside the html
<script>
!(function () {
var analytics = (window.analytics = window.analytics || [])
if (!analytics.initialize)
if (analytics.invoked)
window.console &&
console.error &&
console.error('Segment snippet included twice.')
else {
analytics.invoked = !0
analytics.methods = [
'trackSubmit',
'trackClick',
'trackLink',
'trackForm',
'pageview',
'identify',
'reset',
'group',
'track',
'ready',
'alias',
'debug',
'page',
'once',
'off',
'on'
]
analytics.factory = function (t) {
return function () {
var e = Array.prototype.slice.call(arguments)
e.unshift(t)
analytics.push(e)
return analytics
}
}
for (var t = 0; t < analytics.methods.length; t++) {
var e = analytics.methods[t]
analytics[e] = analytics.factory(e)
}
analytics.load = function (t, e) {
var n = document.createElement('script')
n.type = 'text/javascript'
n.async = !0
n.src =
'https://cdn.segment.com/analytics.js/v1/' + t + '/analytics.min.js'
var a = document.getElementsByTagName('script')[0]
a.parentNode.insertBefore(n, a)
analytics._loadOptions = e
}
analytics.SNIPPET_VERSION = '4.1.0'
analytics.load('WRITE KEY') // ask for the write key
}
})()
</script>Events
Identify
window.analytics.identify('userID abcd...', {
email: 'joe.ayoub@segment.com',
first_name: 'Joe',
last_name: 'Ayoub'
})Track
Pages
onLoad events A.K.A easy tracking
By creating the window.__rubik_easy_tracking_v2__ object in your page, rubik will automatically send it as a track event on load. It expects a property called segment_event_name to send it as event name, the rest will be send as properties.
window.__rubik_easy_tracking_v2__ = {
segment_event_name: 'My Event Name',
section: 'candidate'
}Wait for the rubik:loaded event before firing up the track event for pages
window.analytics.track('MyCv Experience Form Viewed', {
page_name: 'infojobs.net',
site: 'infojobs.net',
section: 'candidate',
channel: 'my account',
platform: 'web',
vertical: 'jobs',
page_type: 'form',
status: 'edit'
})Clicks
Add an data-track attribute with the event you want to track to any DOM element and the click will be tracked automatically
<div
data-track="My Awesome Event"
data-properties='{"section":"candidate"}'
data-options='{"protocols":{"event_version":2}}'
>
track me!
</div>
<!-- with " instead of double quote-->
<div
data-track="My Awesome Event"
data-properties='{"section":"candidate"}'
data-options='{"protocols":{"event_version":2}}'
>
track me!
</div>Reset
// call this function to reset the browser cookie
document.addEventListener('rubik:loaded', function () {
window.analytics.reset()
})NavOrigen
document.addEventListener('rubik:loaded', function () {
window.navOrigen.loadCookies()
})Appboy
Rubik loads and sets up everything needed to enable Web Push notifications using the Appboy (Braze) SDK
Once the analytics is ready, the Appboy SDK will be available in the window object inside the variable window.appboy.
Rubik automatically prompts the user to accept web push notifications using the native registerAppboyPushMessages function from the SDK.
Furthermore, it exposes inside the window.rubik.Appboy object a new function registerPushMessages to prevent crashes in case the SDK has not been loaded correctly.
document.addEventListener('rubik:loaded', function () {
window.rubik.Appboy.registerPushMessages()
})Optimizely experiments and feature flags
Rubik allows to load and run the SUI PDE library and use feature flags in order to set variants or enable progressive rollouts.
Create feature flag
Into the src/experiments/featureFlags file, simply configure your experiment as the following example:
export default [
{handler: setCvViewRolloutCookie},
{handler: setFeatureTest, pageWhitelist: [/candidate/]}
]
/**
* Cv View feature flag
*/
async function setCvViewRolloutCookie(pde) {
const data = pde.isFeatureEnabled({
featureKey: 'ff_ij_be_cv_to_react',
attributes: {
logged_user_id: window.analytics.user().id()
}
})
Cookies.set('ijreactcv', data.isActive ? '1' : '0', {expires: 60})
}
/**
* Other feature handler
*/
async function setFeatureTest(pde) {
// ...
}Inside the exported array, you can add a new entry with 2 properties:
-
handler (mandatory): the feature flag handler function, it receives the
pdeobject to assert feature flags. - pageWhitelist (optional): set a list of pages where you want to run the feature flag. If the property is not passed, it will run on all the pages.
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-rubik/umd/index.jsfile -
Run this script to load rubik
var script = document.createElement('script')
script.src = 'http://localhost:5000/index.js'
document.body.append(script)You can also test the library by publishing a new beta version. In order to do that:
- Put the -next.0 suffix to your version
"version": "1.50.0-next.0",
- Execute the publish command
> npm publish --tag next- Check this url https://unpkg.com/@s-ui/ij-rubik@next/umd/index.js. In few minutes, it should be redirect to your beta version. In our case:
https://unpkg.com/@s-ui/ij-rubik@1.50.0-next.0/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-rubik/umd/index.js will need up to 20 minutes to update its cdn's cache and start deliver the new version.