React hook for Google Optimize experiments
npm install @heights/react-use-google-optimizeReact hook for Google Optimize experiments.
``sh
// Yarn
yarn add @heights/react-use-google-optimize
// NPM
npm i -S @heights/react-use-google-optimize
`
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 (
<>
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)}
>
)
}
``