Headless Docs
Latest (1.2.3)
Latest (1.2.3)
  • Overview
  • Change Log
  • General Steps
    • Update Prices on Page
    • Update ATC Events
      • Shopify Functions
      • Shopify Plus + Scripts
    • Preview Your Site
    • Lite Mode
  • Next.js Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Next.js - App Directory Configuraiton
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Gatsby Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Pack Digital Steps
    • Requirements
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Shopify Hydrogen / Remix
    • Requirements
    • Update loader()
    • Add Intelligems Provider
    • Track Page Views
    • Update Prices on Page
    • Update ATC Events
    • Preview Your Site
  • Examples
    • Custom Events
    • Content Testing
    • Gift With Purchases
  • Reference
    • Providers
      • Provider Props
    • Components
      • Price Components
    • Hooks
      • Price Hooks
      • Offer Hooks
      • Track Hooks
      • Experience Hooks
      • Variation Hooks
      • Cart & Checkout Hooks
Powered by GitBook
On this page
  1. Examples

Content Testing

Use content testing to show different site content per Test Group.

const SomeComponent = () => {
  const experienceId = '<EXPERIENCE_ID>';
  const variation = useIgVariation(experienceId);

  const DynamicComponent = useMemo(() => {
    if (variation.isReady) {
      if (variation.variation?.name === 'New Group 1') {
        return (
          <div>
            This component only renders if the Variation is "New Group 1"
          </div>
        );
      } else {
        return (
          <div>
            This component only renders if the Variation is the Control Group
          </div>
        );
      }
    } else {
      // Intelligems configuration has not loaded yet, or
      // Intelligems configuration never requested
      return null;
    }
  }, [variation]);

  return <div>{DynamicComponent}</div>;
};

PreviousCustom EventsNextGift With Purchases