Zum Hauptinhalt springen

​
Schritt 1: Feature-Variationen in Kameleoon definieren​

Erstellen Sie in Ihrem Kameleoon-Dashboard ein neues Feature Flag, das steuert, welche Version des Inhalts angezeigt wird. Wenn Sie beispielsweise verschiedene Versionen eines Startseiten-Abschnitts ausprobieren:
  • Name des Feature Flags: Homepage section
  • Feature-Variation 1: section_v1
    • Feature-Variable 1: content_id = ID des Inhalts auf Version 1 Ihres CMS.
  • Feature-Variation 2: section_v2
    • Feature-Variable 2: content_id = ID des Inhalts auf Version 2 Ihres CMS.
Diese content_id-Werte sollten den eindeutigen Bezeichnern entsprechen, die in Ihrem Headless-CMS fuer jede Inhaltsversion verwendet werden.
CMS-1

​
Schritt 2: Inhalt vom CMS abrufen und anzeigen​

Verwenden Sie nun in Ihrer React-Anwendung die Methode getFeatureVariable, um die content_id basierend auf der aktiven Variation abzurufen, und verwenden Sie sie, um den entsprechenden Inhalt aus Ihrem Headless-CMS abzurufen. 
// 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;
Mechanismus:
  • Abrufen der content id: Die Methode getFeatureVariable ruft die content_id fuer die aktive Variation ab. Die content_id wird dann verwendet, um den entsprechenden Inhalt aus dem CMS abzurufen.
  • Fehlerbehandlung: Ein try-catch-Block ist enthalten, um Fehler waehrend des Inhaltsabrufs zu behandeln.
  • Rendering: Der abgerufene Inhalt wird dynamisch in Ihrer React-Komponente gerendert.

​
Schritt 3: CMS-Inhalt verwalten​

Stellen Sie sicher, dass jede Inhaltsvariation in Ihrem Headless-CMS mit einer eindeutigen ID verknuepft ist. Diese IDs sollten den in Kameleoon festgelegten content_id-Feature-Variablen entsprechen. Wenn Benutzer die Seite laden, entscheidet Kameleoon, welche Variation ausgeliefert wird. Basierend auf der content_id wird der korrekte Inhalt abgerufen und angezeigt. Fazit: Indem Sie diese Schritte befolgen, wird Kameleoon mithilfe des React-SDK in das Headless-CMS integriert. Diese Einrichtung ermoeglicht dynamische Experimentation und die Auslieferung verschiedener Inhaltsvariationen und verbessert die Personalisierung sowie die Effektivitaet der Benutzererfahrung.
\u0001\u0001\u0001 CMS-2