> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Kameleoon を使用した Shopify Plus チェックアウトでの A/B テスト

> カート属性と Checkout UI Extensions を介して Kameleoon バリエーションを割り当てることで、Shopify Plus チェックアウト内で準拠した A/B テストを実行します。

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

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

カートページで、Kameleoon を使用してバリエーション (例: バリエーション A またはバリエーション B) を割り当て、`kameleoon-checkout-variant` などのカート属性に割り当てを保持します。この割り当てにより、チェックアウトがバリエーションに対応できるようになります。

以下の JavaScript コードを使用して、バリエーションを割り当て、カート属性を更新します:

```javascript theme={null}
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` 属性を読み取ります。そして、特定のバリエーションに対してのみ、バナーなどの条件付きコンポーネントをレンダリングできます。

```jsx theme={null}
const attributes = useAttributes();
const variant = attributes['kameleoon-checkout-variant'];

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

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

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

***

## まとめ

* カートページで Kameleoon Web 実験を使用してバリエーションを割り当てます。
* 割り当てられたバリエーションを保持するために Shopify カート属性を更新します。
* Shopify Checkout UI Extension を使用してバリエーションを読み取り、動的コンテンツをレンダリングします。
* [コンバージョンガイド](./shopify-checkout-conversions.md) に従って、サンキューページでコンバージョンを追跡します。

この構成は Shopify Plus のポリシーに準拠しており、チェックアウトフロー全体で有効な実験を可能にします。