React

For a complete overview of features in the React SDK check out the docs regarding those. For getting started read on.

Install

npm i @obelism/improve-sdk-react

Setup

Configure the client

First let's generate our React handlers and expose them so we can import them in multiple places;

import { generateImproveProvider } from '@obelism/improve-sdk-react'
 
export default generateImproveProvider(...)

This makes it possible to import all React handlers from that file. First one we need is our provider that sits around your app;

import { render } from 'react-dom'
 
import { ImproveProvider } from 'utils/improveSdk'
 
const App = () => (
	<ImproveProvider>
		<Menu />
 
		<Page />
 
		<Footer />
	</ImproveProvider>
)
 
render(<App />, document.getElementById('root'))

Now we can start using the hooks in our application.

Consume the test value

Let's say we have the following Menu component;

export const Menu = () => {
    return (
        <menu>
            <a href="/">
                <Logo />
            </a>
 
            <nav>
                <a href="/">Home</a>
                <a href="/products">All product</a>
                <a href="/about-us">About us</a>
                <a href="/about-us">Account</a>
            <nav>
        </menu>
    )
}

And we want to know if people will find their way to the homepage without having the dedicated Home link. For this we can run an AB test like so;

import { useTestValue } from 'utils/improveSdk'
 
export const Menu = () => {
    const noHomeLinkValue = useTestValue("no-home-link")
 
    return (
        <menu>
            <a href="/">
                <Logo />
            </a>
 
            <nav>
                {noHomeLinkValue === 'control' ? <a href="/">Home</a> : null}
                <a href="/products">All product</a>
                <a href="/about-us">About us</a>
                <a href="/about-us">Account</a>
            <nav>
        </menu>
    )
}

Nice, now if we've setup the AB test as 50/50, then half of the visitors will now no longer see the homepage link in the navigation. But we will have no idea if people still get to the homepage.

Keep track of visitors

Next step is to send events to Improve on what the visitor is doing. Let' add two events;

When the visitor sees the menu we mark the start of the AB test; "menuView"
When the user clicks on a homepage link we mark the end of the AB test; "clickHomePageLink"

Let's also add a message to the click event, this way we can see the split between clicks on the logo and the navigation and the control.

import { useTestValue, usePostAnalytic } from 'utils/improveSdk'
 
export const Menu = () => {
    const postAnalytic = usePostAnalytic()
    const noHomeLinkValue = useTestValue("no-home-link")
 
    useEffect(() => {
        postAnalytic("no-home-link", 'menuView')
    }, [])
 
    return (
        <menu>
            <a href="/" onClick={() => postAnalytic("no-home-link", 'menuView', "logo")}>
                <Logo />
            </a>
 
            <nav>
                {noHomeLinkValue === 'control' ? (
                    <a href="/" onClick={() => postAnalytic("no-home-link", 'menuView', "nav")}>
                        Home
                    </a>
                ) : null}
                <a href="/products">All product</a>
                <a href="/about-us">About us</a>
                <a href="/about-us">Account</a>
            <nav>
        </menu>
    )
}

Done!

Now it's time to publish your first AB test and measure what your visitors are doing!