@s-ui/ij-rubik NPM

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

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

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 &quot; 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()
})

document.addEventListener('rubik:loaded', function () {
  window.navOrigen.loadCookies()
})

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()
})

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 pde object 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.js file
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.