メインコンテンツへスキップ
Contentful は ヘッドレス CMS です。デジタルコンテンツの独自の要求と、それを制作・操作するすべてのチームのニーズに応えるコンポーザブルコンテンツプラットフォームです。 Contentful 統合を使用すると、CMS に実験機能をもたらし、Contentful から直接コンテンツの実験を実行できます。Kameleoon の強力な分析ソリューションを使用して、Contentful 実験のパフォーマンスを分析することもできます。 主なメリット:
  • 構造化コンテンツで高度なノーコード実験を実行できます。
  • サーバーサイドでの即時バケット割り当てとレイテンシなしで、ちらつき効果を排除できます。
  • 実験における開発者リソースへの依存を減らせます。
  • Contentful で実験を構築するために必要な手作業を減らし、Kameleoon の強力な実験エンジンと分析機能を使用して実験のパフォーマンスを測定できます。

​
考慮事項

この統合を使用する際は、以下の点に注意してください:
  • この統合は機能実験でのみ使用できます。
  • Kameleoon アカウントで Feature Experimentation ソリューションを有効化する必要があります。

​
前提条件

この統合を設定するには、Kameleoon から以下の情報が必要です:
  • ログイン認証情報: Kameleoon のログイン認証情報は、Kameleoon アカウントへのアクセスを可能にするメールアドレスとパスワードの組み合わせです。この統合は、Kameleoon アカウントにログインするために OAuth 認証 を使用します。
  • Sitecode: プロジェクトの Sitecode を提供する必要があります。Sitecode の場所については、専用の Kameleoon ドキュメント を参照してください。

​
インストール

  1. Contentful アカウントに移動します。
  2. Apps > Marketplace をクリックし、Kameleoon を検索します。
  1. Kameleoon アプリをインストールし、アクセスを承認します。
  2. プロジェクトの Sitecode を選択します。
  3. 右上隅の Install をクリックします。
これで Kameleoon アプリは完全にインストールされ、使用できる状態になります。

​
使用方法

​
Kameleoon で機能実験を作成する

新しい機能実験を作成するには:
  1. Kameleoon アカウントにログインします。
  2. 機能フラグダッシュボード に移動します。
  3. New feature flag をクリックします。
  4. 名前、プロジェクト、機能キーを入力します。
  5. Validate をクリックします。
  6. Add a rule > Experiment をクリックして実験配信ルールを追加します。
  7. ルールを自由に設定します。

​
Contentful で Kameleoon Container エントリを作成する

  1. Contentful アカウントにログインします。
  2. Content をクリックします。
  1. Add Entry > Kameleoon Container をクリックします。
  2. Entry Name を追加し、Kameleoon experiments ドロップダウンで実験を選択します。
    • 選択した実験に関連付けられたバリエーションが、割り当てられたトラフィックの割合とともに自動的に表示されます。
  1. 各バリエーションに対して、新しいエントリを作成してバリエーションのコンテンツとして使用するには Create entry and link をクリックします。既存のエントリをバリエーションのコンテンツとして使用したい場合は Link an existing entry をクリックします。

​
コンテンツを公開する準備をする

以下の 4 つのステップを完了すると、Kameleoon Container を公開する準備が整います:
各ステップの完了方法は以下のとおりです:
  • Select experiment: Kameleoon experiments ドロップダウンで実験を選択することで、このステップを完了できます。
  • Add content: 各バリエーションにエントリを関連付けることで、このステップを完了できます。
  • Publish variations: このステップは、バリエーションに関連付けられたすべてのエントリが公開されると完了としてマークされます。
  • Start experiment: このステップを完了するには、Kameleoon アカウントに移動し、手動トグル を使用して本番環境で機能フラグを ON にします。

​
フロントエンドとの統合

Kameleoon Container は、Contentful のレスポンスに導入される新しいコンテンツタイプです。これは、テストしたい 2 つ以上の実際の値を指すコンテナです。次に、フロントエンドを Kameleoon および Kameleoon Container と統合する必要があります。フロントエンドが Kameleoon Container エントリを受け入れてプログラム的に処理するように動作を変更するには、開発者の支援が必要です。 Kameleoon Container をプログラム的に処理する作業は一度だけ行う必要があります。その後、Kameleoon Container を処理するために使用したコードは、Contentful から Kameleoon Container エントリを受信するたびに再利用できます。 ここからは、クライアントのセットアップと Kameleoon との統合方法について、より技術的に深掘りします。開発者は、以下の技術ガイドに進む前に、上で説明した内容に慣れておくと有益です。 セットアップの目的は以下のとおりです:
  • 実験ごとに新しいコードをプッシュすることなく、サーバーサイド実験を有効化する
  • Contentful でコンテンツを、Kameleoon で実験を制御する
  • 高速配信とちらつき効果の回避のためのサーバーサイドバリエーション選択

​
Kameleoon アプリが Contentful API レスポンスをどのように変更するか

前述のとおり、Kameleoon アプリは新しいコンテンツタイプ「Kameleoon Container」を作成します。 Kameleoon Container は、実験の可能な値をネストし、Kameleoon 実験とバリエーション名に関するメタデータを保持するコンテンツタイプです。

​
Kameleoon を使用して正しいバリエーションを選択する

Contentful API レスポンスを受け取り、当社の NodeJS SDK を使用してユーザーに表示するバリエーションを決定する疑似バックエンドを作成します。 Contentful が返す Kameleoon Container JSON レスポンスを見てみましょう。コンテンツタイプが、Kameleoon 実験に関連するいくつかのフィールド (featureKey とバリエーションキーを含むメタ) を公開していることに注目してください。 
{
    "metadata":{
       "tags":[
 `  ]`
 },
    ……
    "fields":{
       "entryName":{
          "en-US":"Black Friday - CTA"
       },
       "experimentName":{
          "en-US":"Black Friday - CTA - Experiment"
       },
       "experimentId":{
          "en-US":"229925"
       },
       "featureKey":{
          "en-US":"contentful_black_friday_cta"
       },
       "siteCode":{
          "en-US":"kqfwz0rys3"
       },
       "meta":{
          "en-US":{
             "off":"5IF12vtaKcFJXtj8ljaDVr",
             "variation_1":"2UrVZemBoltsxHKcqRgjKk",
             "variation_2":"73GxfiNActyOZvP9Hn3sEC"
          }
       },
       "variations":{
          "en-US":[
             {
                "sys":{
                   "type":"Link",
                   "linkType":"Entry",
                   "id":"5IF12vtaKcFJXtj8ljaDVr"
                }
             },
             {
                "sys":{
                   "type":"Link",
                   "linkType":"Entry",
                   "id":"2UrVZemBoltsxHKcqRgjKk"
                }
             },
             {
                "sys":{
                   "type":"Link",
                   "linkType":"Entry",
                   "id":"73GxfiNActyOZvP9Hn3sEC"
                }
             }
          ]
       }
    }
 }
Kameleoon Container からどのエントリを選択するかを決定する前に、Kameleoon から正しいバリエーションを取得する方法を確認する必要があります。以下は、Kameleoon メソッド getFeatureFlagVariationKey() で機能キー contentful_black_friday_cta をハードコードして、ユーザーのバリエーションを取得する例です。 
import { KameleoonClient, CustomData } from '@kameleoon/nodejs-sdk';

 const client = new KameleoonClient({
   siteCode: 'a8st4f59bj',
   credentials: { clientId: 'my_client_id', clientSecret: 'my_client_secret' },
   configuration: { domain: 'www.example.com' },
 });
 async function init(): Promise {
   await client.initialize();

// -- Get visitor code using server `request` and `response`
   const visitorCode = client.getVisitorCode({
     request: req,
     response: res,
   });

// -- Get visitor feature flag variation key
   const variationKey = client.getFeatureFlagVariationKey(
     visitorCode,
     'contentful_black_friday_cta',
   );
 }
 init();
上記のコードでは、getFeatureFlagVariationKey() メソッドが、ユーザー (または訪問者) がバリエーションの 1 つを表示すべきか、元のコンテンツを表示すべきかを決定します。値は、Kameleoon Container の meta フィールドから取得できるバリエーションに対応します。 
"meta":{
          "en-US":{
             "off":"5IF12vtaKcFJXtj8ljaDVr",
             "variation_1":"2UrVZemBoltsxHKcqRgjKk",
             "variation_2":"73GxfiNActyOZvP9Hn3sEC"
          }
       }
次に、Kameleoon Container を自動的に取得し、その値を使用して Kameleoon 実験を設定するようにコードを更新します。これにより、新しい実験を作成して実行するたびに、これを行う必要がなくなります。
これは、その後作成するすべての実験に対して機能する 1 回限りのセットアップです。
import { KameleoonClient, CustomData } from '@kameleoon/nodejs-sdk';
 import sdk from 'contentful-sdk';

  const client = new KameleoonClient({
    siteCode: 'a8st4f59bj', // Your Kameleoon project sitecode
    credentials: { clientId: 'my_client_id', clientSecret: 'my_client_secret' }, // Your Kameleoon API credentials 
    configuration: { domain: 'www.example.com' },
  });

  async function init(): Promise {
    await client.initialize();
  // -- Get visitor code using server request and response
    const visitorCode = client.getVisitorCode({
      request: req,
      response: res,
    });
上記の JSON サンプルから Kameleoon Container の ID を使用しています。実際の実装では、ID はスラッグなどを通じて動的に設定されます。 
const kameleoonContainerEntry = await
sdk.getEntry('5XJ5TWDvAzPh7QgWN4ysaV');
Kameleoon Container エントリから機能キーを取得します: const featureKey = kameleoonContainerEntry.featureKey; バリエーションのキーを取得します: 
const variationKey = client.getFeatureFlagVariationKey(
    visitorCode,
    featureKey,

    );
バリエーションキーを使用して、バリエーションに関連付けられた Contentful エントリを取得します: 
const variationEntry = kameleoonContainerEntry.meta[variationKey];
}
 init();
ここから、表示ロジックに最小限の変更を加えるだけで、正しいエントリを表示できます。

​
Kameleoon を使用してユーザーセグメントをターゲティングする

Kameleoon で特定のユーザーセグメントをターゲティングできます。ユーザーのセグメントを作成し、実験に含めたり除外したりする方法を説明するこちらのドキュメントを参照してください。