シングルページアプリでの実験のセットアップ（React、Next.js、Vue.js...）

​

シングルページアプリ（SPA）とは

​

定義と目的

​

実装の課題と解決策

​

ネイティブセットアップ

• スタイル変更
• テキストの変更
• 位置の更新（入れ替え、前後への挿入）
• カスタム CSS セレクタ

1. Admin > Projects をクリックします。
2. プロジェクトの行にある Edit をクリックします。
3. Setup タブをクリックし、Technical configuration セクションの Edit をクリックします。
4. Technical configuration ステップで、Is your website a dynamic website (SPA or PWA)? の下にある Enable support for dynamic websites を ON にします。
5. Next をクリックして Checklist ステップに進み、Save changes をクリックします。

• スコープの選択: サイト全体に対して機能を有効にするか、Graphic エディタを使用して特定の要素に制限できます。スコープを選択した要素に制限すると、全体的なスクリプトの重さを減らすのに役立ちます。要素を動的としてマークする方法については、こちら を参照してください。
• カスタム属性の設定（オプション）: このオプションは要素の識別を改善し、動的な属性とセレクタに関連する問題を回避するのに役立ちます。ウェブサイトが安定または一意の HTML ID を生成しない場合、Kameleoon が変更された要素を識別する際に使用するカスタム属性を定義できます。この属性は、セレクタを構築する際に要素 ID よりも優先されます。
• 動的 ID セレクタの回避（オプション）: このオプションも、動的な属性とセレクタを扱う際に要素の識別を改善します。デフォルトでは、Kameleoon は 5 桁を超える数字シーケンスを含む HTML ID を無視します。必要に応じて、追加の ID パターンを除外する独自の正規表現を定義できます。

​

カスタム属性の設定

• ID ベースの選択: 要素に ID がある場合、Kameleoon はそれを使用してページがロードされたときに要素を特定し変更します。
• コンビネータセレクタ: ID が見つからない場合、Kameleoon は ID を持つ最も近い親要素を使用してセレクタパスを作成します。

​

動的 ID セレクタの回避

​

カスタムセットアップ

​

部分サイト SPA

if (document.location.href.includes('mySPApage')) {
     Kameleoon.API.Core.enableSinglePageSupport();
 }

​

URL の変更なしのページ変更

window.kam_step = JSON.parse(window.sessionStorage.getItem('formStep'))?.step;
 Kameleoon.API.Core.runWhenConditionTrue(() => {
     return window.kam_step != JSON.parse(window.sessionStorage.getItem('formStep'))?.step;
 }, () => {
     Kameleoon.API.Core.load();
 });

​

pathname でページの変更を検出する

if (document.location.href.includes('configurator')) {
    window.kam_configurator_url = document.location.pathname;
    window.kam_configurator_href = document.location.href;
    Kameleoon.API.Core.runWhenConditionTrue(() => {
        return window.kam_configurator_url != document.location.pathname;
    }, () => {
        Kameleoon.Gatherer.Referrer.update(window.kam_configurator_href);
        Kameleoon.API.Core.load();
    });
} else {
    Kameleoon.API.Core.enableSinglePageSupport();
}

​

Kameleoon を再ロードせずにバリエーションコードを再適用する

• 次のいずれかの方法を使用して、ページまたは特定の要素のレンダリングが完了したことを Kameleoon に通知できます。
  • window 変数を定義します。例: window.pageLoadForKam = true。
  • Kameleoon がリッスンできるイベントをページでトリガーします。たとえば、pageLoaded または contentUpdated を使用します: window.addEventListener('pageLoaded', () => { runKameleoonVariationCode(); })。
  • <body> タグまたはターゲット要素に特定のクラスまたは属性を追加します。次に、バリエーションコード でこのクラスまたは属性を使用して、ページや特定の要素に変更を加えます。
• バリエーションコード で、runWhenElementPresent 関数の 4 番目の引数を true に設定できます。この引数により、動的要素とシングルページアプリケーション（SPA）のサポートが有効になります。このオプションが有効な場合、Kameleoon が初期ページロード中に要素の指定された CSS セレクタを見つけられないと、Kameleoon は DOM でセレクタを監視します。要素が DOM に表示されると、Kameleoon はコールバック関数を実行します。さらに、セレクタに一致する新しい要素が後でページに追加された場合、Kameleoon は新たに追加された要素でコールバックを再実行します。

const insertMyNewCTA = () => {
    if (document.querySelector("#kameleoonElement-myNewCTA") == null) {
        Kameleoon.API.Core.runWhenElementPresent(
            '#myElement',
            ([myElement]) => {
                myElement.insertAdjacentHTML('beforebegin', "<button id='kameleoonElement-myNewCTA'>More info</button>");
            },
            null, true
        );
    }
};
insertMyNewCTA();

​

dataLayer からデータを取得する

window.dataLayerLength = window.dataLayerLength || 0;
Kameleoon.API.Core.runWhenConditionTrue(() => {
    return window.dataLayer && window.dataLayerLength != window.dataLayer.length;
}, () => {
    window.dataLayerLength = window.dataLayer.length;
    // Then, retrieve and use dataLayer info here.
});

​

一般的な考慮事項

​

イベントリスナー、タイムアウト、インターバル

​

一意の要素 ID

​

ページビューの増分

• Kameleoon.API.Core.enableSinglePageSupport() が呼ばれ、URL の変更と組み合わされたとき。
• Kameleoon.API.Core.load() が明示的にトリガーされたとき。

​

代替手段

​

REACT および JS SDK

​

GatsbyJS プラグイン

​

Next.js フレームワーク

​

推奨される解決策

• Kameleoon は迅速かつ効率的にロードされます。
• ページがフリッカリングなしでスムーズに表示されます。
• サイトを壊すことなく、適切なタイミングで変更が表示されます。
• ページナビゲーションが正しく機能します。

​

代替アプローチ

• 方法 1: ページ準備完了インジケーター
  • ページが完全にロードされたら、<body> 要素にマーカーを追加します。次に、このマーカーが存在するときにのみ Kameleoon 実験が実行されるように設定します。
• 方法 2: カスタムイベント
  • Kameleoon のコマンドキューを使用して、ページが準備できたらシグナルを送信します: Events.trigger('my page is hydrated')。
  • 次に、このシグナルを待ってから変更を行うように、Custom event ターゲティング基準を使用するように実験を構成します。カスタムイベントとその他のターゲティングの実装に関する詳細については、この記事 を参照してください。