@heights/react-use-google-optimize

React hook for Google Optimize experiments.

Install

``sh
// Yarn
yarn add @heights/react-use-google-optimize

// NPM
npm i -S @heights/react-use-google-optimize
`

Usage

This hook uses the Optimize JavaScript API to retrieve the variant for a given experiment.

This hook is isomorphic, so it will always render the control until the client-side is ready and Optimize has loaded.

Example code:

`tsx
import React from 'react'
import { useGoogleOptimize } from '@heights/react-use-google-optimize'

const App = () => {
const [isVariation] = useGoogleOptimize("OPTIMIZE_EXPERIMENT_ID")

return (
<>


{ isVariation ? "This is a variant" : "This is control" }



)
}
`

You can also support multiple tests easily:

`tsx
import React from 'react'
import { useGoogleOptimize } from '@heights/react-use-google-optimize'

const App = () => {
const [isExperimentOneVariation] = useGoogleOptimize("OPTIMIZE_EXPERIMENT_ID_ONE")
const [isExperimentTwoVariation] = useGoogleOptimize("OPTIMIZE_EXPERIMENT_ID_TWO")

return (
<>


{ isExperimentOneVariation ? "This is a variant for heading" : "This is a control heading" }

{ isExperimentTwoVariation ? "This is a variant for description" : "This is a control description" }

)
}
`

Advanced Usage

It's possible to support a number of different variants in your test:

`tsx
import React from 'react'
import { useGoogleOptimize } from '@heights/react-use-google-optimize'

enum VARIATIONS {
CONTROL,
VARIANT_A,
VARIANT_B
}

const variantText = (variant: number): string => {
switch(variant) {
case VARIATIONS.VARIANT_A: {
return ("This is Variant A")
}
case VARIATIONS.VARIANT_B: {
return ("THIS IS VARIANT B")
}
default: {
return ("THIS IS CONTROL")
}
}
}

const App = () => {
const [_, variation] = useGoogleOptimize("OPTIMIZE_EXPERIMENT_ID")

return (
<>


{variantText(variation)}



)
}
``