ヘッドレス CMS 連携ガイド - Kameleoon Documentation

ステップ 1: Kameleoon でフィーチャーバリエーションを定義する

Kameleoon のダッシュボードで、表示するコンテンツのバージョンを制御する新しいフィーチャーフラグを作成します。たとえば、ホームページセクションの異なるバージョンで実験している場合：

フィーチャーフラグ名: Homepage section
フィーチャーバリエーション 1: section_v1
- フィーチャー変数 1: content_id = CMS のバージョン 1 のコンテンツの ID。
フィーチャーバリエーション 2: section_v2
- フィーチャー変数 2: content_id = CMS のバージョン 2 のコンテンツの ID。

これらの content_id 値は、ヘッドレス CMS で各コンテンツバージョンに使用される一意の識別子に対応している必要があります。

CMS-1

ステップ 2: CMS からコンテンツを取得して表示する

次に、React アプリケーションで getFeatureVariable メソッドを使用して、アクティブなバリエーションに基づいて content_id を取得し、それを使用してヘッドレス CMS から該当するコンテンツを取得します。

// Define the type for your CMS content
interface CMSContent {
  title: string;
  body: string;
}

function HomepageSection() {
  const [content, setContent] = useState<CMSContent | null>(null);

  useEffect(() => {
    const fetchContent = async () => {
      try {
        // Fetch the content_id for the current variation
        const content_id: string = await getFeatureVariable<string>(
          'homepage_section',
          'content_id'
        );

        // Fetch the content from your headless CMS using the content_id
        const response = await fetch(`https://your-cms.com/api/content/${content_id}`);
        const data: CMSContent = await response.json();

        // Update the state with the fetched content
        setContent(data);
      } catch (error) {
        console.error('Error fetching content:', error);
      }
    };

    fetchContent();
  }, []);

  return (
    <div>
      {/* Render the content fetched from your headless CMS */}
      {content ? (
        <div>
          <h1>{content.title}</h1>
          <p>{content.body}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default HomepageSection;

仕組み:

コンテンツ ID の取得: getFeatureVariable メソッドは、アクティブなバリエーションの content_id を取得します。その後、content_id を使用して CMS から適切なコンテンツを取得します。
エラーハンドリング: try-catch ブロックを含めて、コンテンツ取得プロセス中のエラーを処理します。
レンダリング: 取得したコンテンツが React コンポーネント内で動的にレンダリングされます。

ステップ 3: CMS コンテンツの管理

ヘッドレス CMS の各コンテンツバリエーションが一意の ID に関連付けられていることを確認してください。これらの ID は、Kameleoon で設定された content_id フィーチャー変数と一致する必要があります。ユーザーがページをロードすると、Kameleoon がどのバリエーションを提供するか決定します。content_id に基づいて、正しいコンテンツが取得されて表示されます。 まとめ: これらのステップに従うことで、Kameleoon は React SDK を使用してヘッドレス CMS と統合されます。このセットアップにより、異なるコンテンツバリエーションの動的な実験と配信が可能となり、パーソナライズとユーザーエクスペリエンスの有効性が向上します。

CMS-2

⌘I