Getting Started with React

Optimize Deprecation

Uniform Optimize has been deprecated and replaced by Context, a more powerful and flexible personalization solution. Optimize is not being discontinued at this time, but it will not receive updates or new features.

We do not recommend starting a new project with Optimize. If you have an existing project that uses Optimize, you can upgrade your project to Context at no cost using our upgrade guide. If you have any issues with this process you can contact our team.

This guide will build upon Getting started with Uniform Optimize, which discusses setting up the packages inside your project and initializing a default version of your project's tracker. Please complete the steps in that guide before proceeding through this one.

Install Package

First, we need to install the React components package.

npm install @uniformdev/optimize-tracker-react

Create Tracker Context

After the tracker package is installed we can set up the tracker context, which handles most of the initialization and tracking calls for you behind the scenes. You should wrap your entire application in this context. See the below examples:

note

Ensure that you have followed create a tracker instance first. The following example assumes you have your tracker init in ./localTracker

Create a tracker instance

JavaScript

import { createDefaultTracker } from '@uniformdev/optimize-tracker-browser';
import intentManifest from './intentManifest.json';

const localTracker = createDefaultTracker({
  intentManifest,
});

export default localTracker;

TypeScript

import { Tracker } from '@uniformdev/optimize-tracker-common';
import { DeliveryAPIResult } from '@uniformdev/optimize-common';
import { createDefaultTracker } from '@uniformdev/optimize-tracker-browser';
import intentManifest from './intentManifest.json';

const localTracker: Tracker = createDefaultTracker({
  intentManifest: intentManifest as DeliveryAPIResult,
});

export default localTracker;

React

import React from 'react';
import ReactDOM from 'react-dom';
import { UniformTracker } from '@uniformdev/optimize-tracker-react';
import localTracker from './localTracker';

function MyApp() {
  return <UniformTracker trackerInstance={localTracker}>Optimize all the thingz!</UniformTracker>;
}

ReactDOM.render(<MyApp />, document.getElementById('my-container-element'));

Next.js

/pages/_app.js

import { UniformTracker } from '@uniformdev/optimize-tracker-react';
import localTracker from './localTracker';

export default function MyApp({ Component, pageProps }) {
  return (
    <UniformTracker trackerInstance={localTracker}>
      <Component {...pageProps} />
    </UniformTracker>
  );
}

In the above examples, we are wrapping the application in the UniformTracker context then importing and passing localTracker, which has been initialized and exported in localTracker.js.

Now that the tracker has been configured, you can use it.

Personalization

The <Personalize/> React component is the gateway to selecting the most relevant content for the current visitor based on a list of variations. Learn more about the <Personalize/> component.

Behavior Tracking

Visitor behavior is determined by being shown content tagged with one or more intents. This tracking requires a React hook. Learn more about behavior tracking.

A/B testing

The <Test /> React component lets you run A/B tests to determine the most effective strategy to engage your visitors. Learn more about the <Test/> component.