@react-hook/google-optimize v1.2.1

A React hook for using Google Optimize variants in components

Quick Start

Using the useGoogleOptimize hook requires that you've installed Google Tag Manager and created Google Optimize test cases.

import useGoogleOptimize from '@react-hook/google-optimize'
// Test React components
const CartABTest = (props) => {
  const CartVariant = useGoogleOptimize('experimentId', [CartA, CartB, CartC])
  return !CartVariant ? 'Loading...' : <CartVariant {...props} />
}
// Test any value
const CartABValueTest = (props) => {
  const variant = useGoogleOptimize('experimentId', [false, true])
  return variant === null ? (
    'Loading...'
  ) : variant ? (
    <CartA {...props} />
  ) : (
    <CartB {...props} />
  )
}

API

useGoogleOptimize(experimentId, variants, timeout?)

function useGoogleOptimize<T>(
  experimentId: string,
  variants: T[],
  timeout?: number
): T | null

Arguments

Returns T | null

This hook returns the variant selected by Google Optimize. While the variant selection is loading, this hook returns null.

Future work

In the future this hook snould cause the component to suspend until the variant is available.

LICENSE

MIT