Skip to main content

Getting Started with React

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
import { createDefaultTracker } from '@uniformdev/optimize-tracker-browser';import intentManifest from './intentManifest.json';
const localTracker = createDefaultTracker({  intentManifest,});
export default localTracker;
import React from 'react';import ReactDOM from 'react-dom';import { UniformTracker } from '@uniformdev/optimize-tracker-react';import localTracker from './local-tracker';
function MyApp() {  return <UniformTracker trackerInstance={localTracker}>Optimize all the thingz!</UniformTracker>;}
ReactDOM.render(<MyApp />, document.getElementById('my-container-element'));

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 local-tracker.

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.