メインコンテンツへスキップ
ハイブリッドモードでは、Kameleoon Web エンジンとサーバーサイド SDK を組み合わせることで、各タスクに最適な統合方法を使用できます。
  • サーバーサイドではバリエーションをより簡単に実装・展開できる一方で、サードパーティ製の分析ツールへのトラッキングは、アプリケーションファイル engine.js (以前は kameleoon.js と呼ばれていました) を介して Kameleoon エンジンを使用する方がより効果的に行うことができます。多くのサードパーティ製 Web 分析ソリューションはフロントエンドでのみ動作するためです。
  • セグメント内で、ゴールコンバージョンやデータレイヤー変数に基づくカスタムデータなど、クライアントサイドで収集されるデータを使用してユーザーをターゲティングします。
  • Kameleoon レポートで、フロントエンドアプリケーションエンジンによってクライアントサイドで収集された 25以上のデータポイント を使用してデータをフィルタリングおよび分解します。
  • Web 実験またはパーソナライゼーションに露出したユーザーをフィーチャーフラグから除外します。
本記事では、Kameleoon Web SDK と Kameleoon フロントエンドアプリケーションファイル の間で双方が通信できるように、最適な統合を実装する方法について説明します。 アンチフリッカーなしの Kameleoon 非同期タグ を使用します。
Web エクスペリメンテーションでは通常、フリッカーを防ぐために <head> タグ内または <body> タグの先頭に JavaScript インストールタグを追加する必要があります。フリッカーが懸念事項にならないハイブリッドモードを使用している場合、タグはトラッキング目的でのみ使用されるため、終了 </body> タグの前ならばどこにでもスクリプトをインストールできます。
ハイブリッドエクスペリメンテーションは現在、Web SDK のみと互換性があります。モバイル SDK はサードパーティ製 Web 分析ツールでのハイブリッドモードをまだサポートしていませんが、ウェブサイトとモバイルアプリの両方が提供されている場合は、ウェブサイトで収集されたデータポイントを活用できます。これは、ウェブサイトで識別されたユーザーから収集されたデータが、訪問者が両方のプラットフォーム間で一貫して識別されている限り、モバイルアプリでも使用できることを意味します。

​
バックエンドとフロントエンド間でユーザー ID を同期する​

ハイブリッドモードの課題の1つは、Kameleoon が両側で各訪問者を同一人物として適切に識別できることを確認することです。Kameleoon では、この要件は、すべての訪問者のユニーク ID である visitorCode が両側で同一でなければならないことを意味します。たとえば、バックエンドで実験バリエーション用に visitorCode の値 10ctbql0zpf4rwjy で登録された訪問者は、フロントエンドでコンバージョンがトリガーされたときに訪問者コード 10ctbql0zpf4rwjy に関連付けされる必要があります。同じ ID を使用することで、訪問者のアクションが正しくトラッキングされ、結果として正確なデータと統計が得られます。 ユーザー ID を同期するには、ハイブリッドアプリは他の SDK メソッドを呼び出す前に getVisitorCode() メソッドを呼び出す必要があります。命名規則は言語間で異なるため、メソッド名は SDK によって若干異なりますが、各言語には同様の名前の同等メソッドがあります。Kameleoon では次のアプローチを使用します。
  1. フロントエンドでは、Kameleoon JavaScript エンジンが各新しい訪問者に対してランダムに visitorCode を生成します。エンジンは、ユーザーのブラウザ (例: Cookie やローカルストレージ) で以前の訪問者コードが見つからない場合、訪問者を新規と見なします。これは通常、Kameleoon エンジンが訪問者のブラウザで初めて実行される場合に発生します。Kameleoon エンジンは、バックエンドから渡された Cookie からも識別子を取得できます。このオプションを使用すると、フロントエンドではなくサーバー上で識別子を設定できます。たとえば、各訪問者に独自のユニーク訪問者コードを指定したい場合に、このオプションを使用します。
サブドメイン間でセッションデータを統合 する場合、Kameleoon はローカルストレージで kameleoonVisitorCode キーを検索します。キーが存在する場合、その値が訪問者コードの識別子として使用されます。キーのローカルストレージバージョンは、値が異なる kameleoonVisitorCode Cookie が存在しても、常に優先されます。ローカルストレージと Cookie の値が一致する場合、Kameleoon は JavaScript Cookie をリセットしないことに注意してください。ITP の目的のため、サーバーサイドで設定された可能性のある Cookie はそのまま残しておくことが重要です。
  1. バックエンドでは、SDK 内で getVisitorCode() メソッドまたは同等メソッドを呼び出す必要があります。このメソッドは、他の SDK メソッドに訪問者識別子を提供する前に呼び出すようにしてください。getVisitorCode() は、ランダムに生成された Kameleoon ID に頼るのではなく、独自の識別子を渡すために使用できるオプションの文字列引数を取ります。メソッドが呼び出されると、Kameleoon は最初に現在の HTTP リクエストに関連付けられた kameleoonVisitorCode Cookie またはクエリパラメータを探します。見つかった場合、SDK はこの値を訪問者識別子として使用します。
Cookie やパラメータが見つからない場合、提供されていれば Kameleoon は getVisitorCode() メソッドの引数を識別子として使用します。引数を指定しない場合、Kameleoon は ID をランダムに生成します。どちらの場合でも、Kameleoon はその値で (HTTP ヘッダー経由で) サーバーサイドの kameleoonVisitorCode Cookie も設定します。 このアプローチに従うことで、visitorCode はフロントエンドとバックエンドの間で保存および共有されます。実験が訪問者のウェブサイトでのジャーニーの最初のページに実装されている場合、SDK は識別子を生成して JavaScript エンジンに渡します。バックエンドでジャーニーが getVisitorCode() が呼び出されない (または同期スニペットが実行されない) ページから始まる場合、JavaScript エンジンが最初に識別子を生成して SDK に渡します。SDK はそれを読み取り、その後、ITP の制限を回避するためにサーバーサイドの Cookie として書き直します。

​
フィーチャー実験をフロントエンドのトラッキングコードとリンクする​

SDK を使用して実験バリエーションをセットアップしつつ、JavaScript エンジンを使用してフロントエンドでトラッキングを実装することはしばしば有用です。これは次の理由から、一般的なシナリオです。
  • Web 分析プラットフォーム (Mixpanel や Google Analytics 4 など) はフロントエンドで実装される傾向があります。
  • Web エクスペリメンテーション を使用した Kameleoon の標準的なクライアントサイドのタグ付け計画がすでに使用されている可能性があります。
  • フロントエンド側でイベントや データポイント を分析目的でレポート用にトラッキングする方が便利な場合が多いです。
  • フィーチャー実験で使用するのに適した データポイント は、フロントエンドで収集する方が簡単です。

​
露出イベントをサードパーティ分析に送信する​

Kameleoon は分析および CDP プラットフォームとのネイティブ 統合 を提供します。ハイブリッドモードでは、追加のコードを書くことなく、これらの統合をフィーチャー実験と組み合わせて使用できます。 フロントエンドエンジンは、実験がバックエンドで行われたとき (つまり、訪問者が実験にバケットされたとき) を知る必要があります。これにより、実際に実験をトリガーして見た訪問者のみがカウントされることが保証されます。この目標を達成するには、すべてのサーバーサイド SDK で利用可能な getEngineTrackingCode() メソッド (SDK によって名前が若干異なる場合があります) を使用します。このメソッドは、使用中の分析ソリューションにフロントエンドから露出イベントを自動的に送信するためにページに挿入する JavaScript コードを返します。これは、返される HTML ページに埋め込むことができます。 例: 
<!DOCTYPE html>
<html lang="en">
  <body>
    <script>
      const engineTrackingCode = `
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonQueue.push(['Experiments.assignVariation', 123456, 7890]);
        window.kameleoonQueue.push(['Experiments.trigger', 123456, true]);
      `;
      const script = document.createElement('script');

      script.textContent = engineTrackingCode;
      document.body.appendChild(script);
    </script>
  </body>
</html>
フィーチャー実験を構成する際には、選択した統合 (例: Google Analytics 4 または Mixpanel) を 有効化 する必要もあります。関連データ (実験 ID、実験名、バリエーション ID、バリエーション名など) は、Kameleoon JavaScript エンジンによってサードパーティプラットフォームに自動的に送信されます。

​
フィーチャー実験でフロントエンドのデータポイントとイベントを使用する​

Kameleoon をハイブリッドモードで実装した場合、ゴールと データポイント はフロントエンドで自動的にトラッキングされ、フィルタリングおよび分解の条件として Kameleoon レポートに表示されます。さらに、複数の ターゲティング条件 が Kameleoon SDK で利用可能になり、ターゲティング目的で使用する準備が整います。

​
ハイブリッドモードでの同意管理​

Kameleoon をハイブリッドモードで使用し、同意が「Required」に設定 されている場合、Kameleoon アプリケーションファイルと SDK の両方からユーザーイベントを収集できるように、同意取得時に JavaScript Activation API と SDK メソッドの両方が呼び出されることを確認してください。さらに、Kameleoon は Cookie に visitorCode キーを保存することが制限されているため、すべての最初のリクエストに対して SDK が生成した visitorCode キーが、クライアントサイドで実行されている Kameleoon エンジンと共有されていることを確認してください。技術的考慮事項 を参照してください。
同意情報は、いずれかのコンポーネントが再初期化されたとき (例: ページのリロード時または API.Core.load の呼び出し時) のみ、Kameleoon エンジン (engine.js) と JavaScript SDK の間で同期されます。そのため、この同期メカニズムに頼るのではなく、エンジンと SDK が提供する専用のメソッドを使用して明示的に同意を管理することを強くお勧めします。