Overview

react-chansey allows your application to conditionally render components based on the experience data provided by koa-chansey. It also takes care of firing the correct analytics events for your experiment so that we have consistent eventing regardless of which application is being tested.

Requirements

react-chansey depends on:

• window.uSwitchEventTracking - this is used to push events onto the GTM data layer
• window.nerdalytics - this is used to simplify the "Experiment Loaded" and "Experiment Viewed" events by using data-nerd-* attributes

react-chansey requires an experiments object as shown below to function. The suggested way to get access to this data is using koa-chansey.

{
  "experiment-home-movers-hub-homepage-banner-ltv28": {
    "cohort": 0,
    "value": "control"
  },
  "killswitch-mobile-app-broadband-cheapest-deals": {
    "cohort": 1,
    "value": true
  },
  "killswitch-mobile-app-fullstory-recording": {
    "cohort": 0,
    "value": false
  }
}

react-chansey/provider usage

Provides the experiences context to your react application.

Usage

react-chansey/provider provides <ExperienceProvider value={X} />, which makes the experiences data available to the rest of your app. In this example we are getting the experiences as a prop passed to our App component (for SSR) or from window.__experiences__ in the client.

// App.js

import React, { Component } from 'react'
import { ExperienceProvider } from 'react-chansey'

const App = ({ experiences, isServer }) => {
  const experienceContext = props.isServer
    ? experiences
    : window.__experiences__

  return (
    <ExperienceProvider value={experienceContext}>
      <RestOfYourApplication />
    </ExperienceProvider>
  )
}

react-chansey/experiment usage

Experiment exports multiple components to set up your conditional rendering.

Usage

react-chansey/experiment provides <Experiment id="example-name" />, which allows you to define children for A/B/n test splitting, In this example we are splitting a test with 2 variants and a control, with an optional fallback component if the experiment does not exist in the experiences data.

If you would like your Fallback and Control to be the same component (a common pattern), you can do this by adding a Fallback and omit the Control component. The fallback will be used when the user is in the control bucket and when the user is not applicable for the experiment / if the experiences data isn't populated due to technical difficulties.

import React, { Component } from 'react'
import { Experiment, Variant, Control, Fallback } from 'react-chansey'

const HomeComponent = ({ isServer }) => {
  return (
    <div>
      <h1>Welcome</h1>
      <Experiment id='experiment-home-page-design'>
        <Fallback>
          <p>
            This will be rendered if the experiment does not exist in launch
            darkly / the user is not applicable for the experiment. It can also
            be used to explicitly render content when custom content rendering
            logic is required (the experience entity selector in eevee is an
            example of this).
          </p>
        </Fallback>

        <Control>
          <p>This user is in control - Eventing has been fired!</p>
        </Control>

        <Variant value='variant-a'>
          <p>This user is in variant A! - Eventing has been fired! </p>
        </Variant>

        <Variant value='variant-b'>
          <p>This user is in variant B! - Eventing has been fired! </p>
        </Variant>
      </Experiment>
    </div>
  )
}

react-chansey/personalisation usage

react-chansey/personalisation provides <PersonalisationElement ... />, which allows you to create a personalised block with the data read from a rvu-personalisation cookie.

If any of the dependencies listed in dependencies are missing from the rvu-personalisation cookie, the PersonalisationElement will automaticaly render the fallback. This will also happen if the target browser doesn't support the Custom Elements v1 API.

PersonalisationElement props

• dependencies: Array<string> required
• fallbackElement: ReactNode required
• personalisedElement: ReactNode required

PersonalisationData props

• type: string required

import React from 'react'
import { PersonalisationData, PersonalisationElement } from 'react-chansey'

const HomeComponent = () => {
  return (
    <div>
      <h1>Welcome</h1>
      <PersonalisationElement
        dependencies={['firstName', 'lastName']}
        fallbackElement={<div>My name is Bond, James Bond</div>}
        personalisedElement={
          <div>
            My name is <PersonalisationData type='lastName' />,{' '}
            <PersonalisationData type='firstName' />{' '}
            <PersonalisationData type='lastName' />
          </div>
        }
      />
    </div>
  )
}

Examples

All examples use the code above. You can also try yourself with the demo app.

Result with cookie set to: 'rvu-personalisation={"firstName":"Testy","lastName":"McTestface","unusedDependency":"I wont affect the code"}'

Result with cookie set to: 'rvu-personalisation={"firstName":"Testy"}' Or as: 'rvu-personalisation={"firstName":"Testy","lastName":""}'