Intelligems for Replo Developers

Use this guide when implementing Intelligems in a Replo site’s code. For account connection, test planning, and launch checks, start with the Intelligems integration guide.

Test a Replo URL against another URL

Use an Intelligems Split URL test when each variation has its own published page.

Publish the Replo page on a subdomain of your store’s domain, such as lp.example.com alongside www.example.com.
In Intelligems, create a Split URL test. Set the page visitors enter as the origin URL and the Replo page as a variation’s destination URL.
Keep Intelligems installed on the origin. Add the Intelligems headless SDK to the Replo page if you need Intelligems to track page views and cart activity there.
Test the full path in a fresh browser session: origin, redirect, Replo page, cart, and checkout. Check that Intelligems records the right variation and order.

Intelligems supports subdomains of the same registered domain, but does not support redirects or shared visitor assignment across unrelated top-level domains. A *.replosites.com destination therefore cannot replace a branded subdomain for this setup. The Split URL redirect happens in the browser after the origin loads; the destination variation has an extra page load. For a performance-sensitive A/A test, split traffic before either page loads instead. The Replo connection can create a pending content/url test, but its current API tool cannot configure the origin and destination URLs. Complete the URL setup in the Intelligems dashboard before starting the test. Sharing a domain is only part of the setup. Verify that Intelligems’ published configuration uses the registered domain and that the visitor ID stays identical across the origin and destination. In headless SDK 1.2.19, a visitor who enters the Replo page first can receive a cookie scoped to that host, then a different ID when visiting Shopify. Test Shopify-first, Replo-first, and direct destination visits separately before launching; matching variation names alone do not prove shared attribution.

Test content on one Replo URL

For two versions of a section on the same published page, use Intelligems’ Next.js App Router SDK. Intelligems assigns each visitor in the browser; useIgVariation then tells the page which section to show. This does not use a server-side assignment endpoint. The SDK needs your Intelligems organization ID and a Shopify Storefront API token intended for browser use. Load the token from the site’s connected Shopify store with ShopifyIntegrationDetailsLoader; you do not need to copy it from Shopify. Use an @replohq/sdk release that exports this loader and DATA_LOADER_KEYS.SHOPIFY_INTEGRATION_DETAILS. The loader returns { shopifyDomain, storefrontAccessToken }. These are public storefront details, separate from the Intelligems External API token saved in the Replo connection. Do not put a Shopify Admin API token or your Intelligems External API token in page code. Install @intelligems/headless in the site, add IntelligemsNextClientsideAppDirectoryProvider around the tested section, and branch on useIgVariation(experienceId). The provider requires organizationId, storefrontApiToken, and activeCurrencyCode. Render a neutral placeholder while the variation loads to avoid briefly showing the wrong version. Add useIgTrack under the provider with the current cart ID and the page’s selected market country and currency. Replo’s useCart() supplies the cart ID. Read the site’s selected-market cookie on the server and look up its value in the merchant’s verified market configuration. Keep market selection independent of language: do not derive it from lang, translation routes, or replo-locale. Each supported market entry needs its Shopify country and actual currency. Confirm these against the store’s Shopify Markets settings; a country that is not configured for international pricing can still return the shop’s default currency. This example uses a site-defined selected-market cookie containing us or canada. Replace the cookie name, market entries, and default with the site’s existing market selector and merchant configuration; selected-market is not a built-in Replo cookie.

import { cookies } from "next/headers";
import { ReploProvider } from "@replohq/sdk/providers/replo-provider";
import { DATA_LOADER_KEYS } from "@replohq/sdk/loaders/loader-keys";
import { PrefetchedLoaders } from "@replohq/sdk/loaders/prefetch-loaders";
import { IntelligemsSection } from "@/components/intelligems-section";

const markets = {
  us: { country: "US", currencyCode: "USD" },
  canada: { country: "CA", currencyCode: "CAD" },
} as const;

export default async function MarketPage() {
  const selectedMarket = (await cookies()).get("selected-market")?.value;
  const market = selectedMarket === "canada" ? markets.canada : markets.us;

  return (
    <ReploProvider markets={{ shopify: { country: market.country } }}>
      <PrefetchedLoaders
        queries={[{ loaderKey: DATA_LOADER_KEYS.SHOPIFY_INTEGRATION_DETAILS, args: {} }]}
      >
        <IntelligemsSection
          marketCountry={market.country}
          marketCurrencyCode={market.currencyCode}
        />
      </PrefetchedLoaders>
    </ReploProvider>
  );
}

Missing or unsupported cookie values use the merchant’s configured default market. Reuse this market resolution for the whole site. If ReploProvider already wraps the site, pass market.country to that existing provider instead of nesting another one. Pass the same country to Shopify loaders and their prefetch arguments when present, so displayed prices and checkout agree. ReploProvider takes a country; Intelligems receives the corresponding configured currency directly, even on pages without products or a cart. When the shopper changes markets, persist the new selection and refresh the server-rendered tree so the loaders, cart provider, and Intelligems all receive the updated market.

"use client";

import { useEffect, useState } from "react";
import {
  IntelligemsNextClientsideAppDirectoryProvider,
  useIgTrack,
  useIgVariation,
} from "@intelligems/headless/next-clientside-app-directory";
import { useCart } from "@replohq/sdk/cart/cart-provider";
import type { StorefrontCountryCode } from "@replohq/sdk/loaders/markets";
import { DATA_LOADER_KEYS } from "@replohq/sdk/loaders/loader-keys";
import { ShopifyIntegrationDetailsLoader } from "@replohq/sdk/loaders/shopify-integration-details-loader";
import {
  isConsentAllowed,
  useConsent,
} from "@replohq/sdk/consent/consent-store";

const experienceId = "<experience-id>";
const treatmentVariationId = "<treatment-variation-id>";
type MarketProps = {
  marketCountry: StorefrontCountryCode;
  marketCurrencyCode: string;
};

function TrackPage({ marketCountry, marketCurrencyCode }: MarketProps) {
  const { cartId } = useCart();
  useIgTrack({
    cartOrCheckoutToken: cartId,
    currency: marketCurrencyCode,
    country: marketCountry,
  });
  return null;
}

function TestedSection(props: MarketProps) {
  const { isReady, variation } = useIgVariation(experienceId);
  if (!isReady) return <div className="min-h-64" role="status">Loading…</div>;
  return (
    <>
      <TrackPage {...props} />
      {variation?.id === treatmentVariationId
        ? <TreatmentSection />
        : <ControlSection />}
    </>
  );
}

export function IntelligemsSection({
  marketCountry,
  marketCurrencyCode,
}: MarketProps) {
  const consent = useConsent();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  if (!mounted) return <div className="min-h-64" />;
  if (!isConsentAllowed({ state: consent, requiredConsent: ["analytics"] })) {
    return <ControlSection />;
  }

  return (
    <ShopifyIntegrationDetailsLoader
      loaderKey={DATA_LOADER_KEYS.SHOPIFY_INTEGRATION_DETAILS}
      fallback={<ControlSection />}
    >
      {({ storefrontAccessToken }) => (
        <IntelligemsNextClientsideAppDirectoryProvider
          key={`${marketCountry}:${marketCurrencyCode}`}
          organizationId="<intelligems-organization-id>"
          storefrontApiToken={storefrontAccessToken}
          activeCurrencyCode={marketCurrencyCode}
          antiFlicker={false}
        >
          <TestedSection
            marketCountry={marketCountry}
            marketCurrencyCode={marketCurrencyCode}
          />
        </IntelligemsNextClientsideAppDirectoryProvider>
      )}
    </ShopifyIntegrationDetailsLoader>
  );
}

Render this component inside ReploProvider, passing the selected market’s actual country and currency. Replace the placeholder organization, experience, and variation IDs with the store’s values. The loader supplies storefrontApiToken from the connected Shopify store. It takes no arguments; the optional server prefetch uses args: {} to match its cache key. Its fallback keeps default content usable if store details cannot load, without mounting Intelligems. If the site already loads the standard Intelligems script, remove it from this page before mounting the headless provider to avoid duplicate tracking. The provider key ensures a market change creates a client with the new currency. The example waits for isReady before displaying a variation and mounting the tracker. Use an error boundary to show default content if the SDK throws an error. Keep a single tracker owner for the page; do not duplicate this wrapper around multiple tested sections. For multiple experiments, wait for all relevant assignments in that owner before measuring the displayed content.

Buy Now attribution

Replo’s Buy Now button creates a separate Shopify cart. The cart ID from useCart() belongs to the regular cart, so it cannot attribute a Buy Now order. In a component under the Intelligems provider, pass the attributes from useIgCartAttributes() into buyNow:

import { useIgCartAttributes } from "@intelligems/headless/next-clientside-app-directory";
import { useBuyNow } from "@replohq/sdk/cart/hooks/use-buy-now";

function ExperimentBuyNowButton({ variantId }: { variantId: string }) {
  const { buyNow } = useBuyNow();
  const { isReady, attributes } = useIgCartAttributes();
  const checkoutAttributes = attributes.filter(
    (attribute): attribute is { key: string; value: string } =>
      typeof attribute.value === "string",
  );

  return (
    <button
      disabled={!isReady || checkoutAttributes.length !== attributes.length}
      onClick={() => void buyNow([{ variantId }], { attributes: checkoutAttributes })}
    >
      Buy now
    </button>
  );
}

Replo includes these attributes when it creates the Shopify cart, before redirecting to checkout. Use an @replohq/sdk release that includes the Buy Now attributes option. For shipping tests, also pass the line item properties returned by useIgCart().wrapCustomAttributes. If analytics consent is declined, checkout can still proceed without Intelligems attributes. This setup covers content assignment and page-view tracking. Price, shipping, and offer tests also need Intelligems’ price/cart hooks and matching Shopify checkout configuration. Confirm a test order appears under the assigned variation before sending live traffic.

Track quiz and other custom goals

Ask Replo to add the Intelligems analytics sink for meaningful actions such as a completed quiz, a selected recommendation, or a successfully submitted lead. Use an SDK release that exports @replohq/sdk/analytics/sinks/intelligems-sink. The sink uses the installed Intelligems tracker and respects analytics consent and assignment readiness; it does not install Intelligems itself. Choose a small set of goals with identical names and success conditions across variations. Avoid tracking every click. The sink forwards no page-view or commerce events by default, so it does not duplicate the events Intelligems already owns. A custom purchase goal is not a substitute for order attribution. Intelligems currently stores custom-event properties but does not make them available for analysis. Use distinct, stable event names for reportable milestones such as Quiz Started and Quiz Completed. Do not send personal answers or contact details as properties. See Intelligems custom events. Before launch, verify each goal in the Intelligems experience report for both variations. Check a normal visitor session as well as preview links: a forced preview proves the page renders, but does not prove the event contributes to reported test results.

Git

Replo SDK

Full SDK Reference

Intelligems for Replo Developers

Test a Replo URL against another URL

Test content on one Replo URL

Buy Now attribution

Track quiz and other custom goals

​Test a Replo URL against another URL

​Test content on one Replo URL

​Buy Now attribution

​Track quiz and other custom goals

Test a Replo URL against another URL

Test content on one Replo URL

Buy Now attribution

Track quiz and other custom goals