Shopify ストアでの A/B テストの実行

• コンテンツスワップテスト: 実験の各バリアントは、専用のページ URL でアクセスできる異なる Shopify テンプレート上に存在します（例: www.mystore.com/products/products/produc-name?view=version-b）。A/B テストツールでは、コンテンツをバリアント（例: B ページ、C ページなど）と入れ替えることができます。
• ビジュアルエディタの使用: Graphic エディタを使用して、商品ページ上で直接バリアントを作成するか、JS/CSS を注入してカスタマイズします。
• Shopify の Liquid と JS SDK を活用: Liquid テンプレートにロジックを追加して、ユーザーのサブセットに対して特定のバリアントを有効化または無効化します。

• Web 実験 を実行している場合は、セットアップを簡素化する Shopify x Kameleoon アプリ を使用することをお勧めします。ステップバイステップの手順については、ドキュメント をご確認ください。
• 機能フラグや機能実験 を実行している場合は、機能実験 ドキュメント に記載されているガイドラインに従ってください。

​

コンテンツスワップテスト

• https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi
• https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi?view=version-b

• product-template — 商品ページのソースコードが含まれます。
• product-recommendations — 「You may also like」推奨ブロックのコードが含まれます。

1. Shopify テーマエディタで Add a new template をクリックします。
2. Product テンプレートタイプを選択し、名前を付けます（version-b を使用していますが、任意の名前を使用できます）。

3. Add a new section をクリックし、product-template-version-b という名前を付けて、元の product-template.liquid ファイルのコードをこの新しいセクションに コピーアンドペースト します。

4. product-template-version-b.liquid セクションから Add to cart ボタンのコードを削除します。

5. 作成した代替商品テンプレート（product.version-b.liquid）から、変更したセクション（product-template-version-b）を呼び出します。

1. Kameleoon アプリ に移動します。
2. New experiment > With the code editor をクリックします。
3. 必要な情報を入力し、Create をクリックします。

4. Add variation の横にある シェブロン > Add code variation をクリックします。

5. 以下のコードを追加し、ユースケースに合わせて VIEW と SELECTOR 変数を調整します。

var VIEW = 'version-b';        // Alternate template handle, e.g. 'version-b'
var SELECTOR = '#MainContent'; // Main container selector

Kameleoon.API.Core.runWhenElementPresent(
  SELECTOR,
  function () {
    fetch(window.location.pathname + '?view=' + encodeURIComponent(VIEW), {
      credentials: 'same-origin'
    })
      .then(function (r) { return r.text(); })
      .then(function (html) {
        var doc = new DOMParser().parseFromString(html, 'text/html');
        var newContent = doc.querySelector(SELECTOR) || doc.body;

		var main = document.querySelector(SELECTOR);
        main.replaceWith(newContent);
      })
      .catch(function (err) {
        console.error('[Kameleoon] Swap failed:', err);
      });
  }
);

• Targeting: 誰に実験を表示するかを定義します（すべてのユーザー、特定のユーザーセグメント）。
• Traffic allocation: 元のバージョンと variation B の間で訪問者を分割する方法を選択します。
• Goals: 成功をどう測定するかを設定します（クリック、コンバージョン、注文）。

• /products/ を含む URL を Include します。
• 無限リダイレクトループを防ぐため、パラメータ view=version-b を持つ URL を Exclude します。

​

グラフィックまたはコードエディタでバリアントを作成する

1. Kameleoon アプリ を開きます。
2. New experiment > With the graphic editor をクリックします。
3. 必要な情報を入力し、Create をクリックします。

4. Add to Cart ボタンを選択します。
5. ボタンを非表示にするには:
   • 左サイドバーの 三点リーダーメニュー > Hide をクリックします。
   • または、選択した要素の下に表示されるツールバーの Hide アイコンをクリックします。

• トラフィックの 50% を割り当てます。
• URL に /products/ を含むすべてのページをターゲットにします。
• 主要 KPI として Shopify Orders を設定します。

​

Liquid 内で JS SDK を使用して機能をトグルする

1. Kameleoon アプリ にアクセスします。
2. Feature flags メニューに移動します。
3. New feature flag をクリックし、このガイド の手順に従います。

• 訪問者が variation B にいる場合、CTA を非表示にします。
• 訪問者が variation A（コントロール）にいる場合、CTA を表示します。

• Kameleoon JS SDK がロードおよび初期化されていることを確認します。
• 機能フラグがアクティブで、訪問者がどのバリエーションにバケットされているかを確認します。
• それに応じて CTA を非表示または表示するロジックを適用します。

1. Shopify 管理画面で、Online Store > Themes > Actions > Edit Code に移動します。
2. product-template.liquid ファイル（または同等のもの）を開きます。
3. Kameleoon 機能フラグロジックを挿入します。

4. Save をクリックして、変更をテーマに適用します。