メインコンテンツへスキップ
この記事では、Kameleoon Web 実験、Shopify カート属性、Checkout UI Extensions を使用して、Shopify Plus チェックアウト内で準拠した A/B テストを実行する方法について説明します。

​
ステップ 1: Kameleoon Web 実験でバリエーションを割り当てる

カートページで、Kameleoon を使用してバリエーション (例: バリエーション A またはバリエーション B) を割り当て、kameleoon-checkout-variant などのカート属性に割り当てを保持します。この割り当てにより、チェックアウトがバリエーションに対応できるようになります。 以下の JavaScript コードを使用して、バリエーションを割り当て、カート属性を更新します: 
const experimentId = 12345;
Kameleoon.API.Experiments.trigger(experimentId);
const experiment = Kameleoon.API.Experiments.getById(experimentId);
const variationName = experiment?.associatedVariation?.name;

if (variationName) {
    fetch('/cart/update.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ attributes: { 'kameleoon-checkout-variant': variationName } }),
    });
}

​
ステップ 2: Shopify Checkout UI Extension を使用する

Shopify Plus Checkout UI Extension 内で、React API を使用して kameleoon-checkout-variant 属性を読み取ります。そして、特定のバリエーションに対してのみ、バナーなどの条件付きコンポーネントをレンダリングできます。 
const attributes = useAttributes();
const variant = attributes['kameleoon-checkout-variant'];

if (variant === 'Variation B') {
  return <Banner title="You unlocked free express shipping!" />;
}

​
サンキューページでコンバージョンを追跡する

注文確認ページで実験中のユーザーのコンバージョンを追跡するには、Shopify チェックアウトコンバージョン に関するガイドを参照してください。

​
まとめ

  • カートページで Kameleoon Web 実験を使用してバリエーションを割り当てます。
  • 割り当てられたバリエーションを保持するために Shopify カート属性を更新します。
  • Shopify Checkout UI Extension を使用してバリエーションを読み取り、動的コンテンツをレンダリングします。
  • コンバージョンガイド に従って、サンキューページでコンバージョンを追跡します。
この構成は Shopify Plus のポリシーに準拠しており、チェックアウトフロー全体で有効な実験を可能にします。