Zum Hauptinhalt springen
Contentful ist ein Headless CMS: eine zusammensetzbare Content-Plattform, die den einzigartigen Anforderungen digitaler Inhalte und aller Teams, die sie produzieren und damit arbeiten, gerecht wird. Mit der Contentful-Integration können Sie Experimentierfunktionen in Ihr CMS bringen und Experimente an Inhalten direkt aus Contentful heraus ausführen. Sie können auch die leistungsstarke Analytik-Lösung von Kameleoon verwenden, um die Leistung von Contentful-Experimenten zu analysieren. Wichtige Vorteile:
  • Führen Sie fortgeschrittene No-Code-Experimente an strukturierten Inhalten aus.
  • Eliminieren Sie den Flicker-Effekt durch serverseitiges sofortiges Bucketing ohne Latenz.
  • Reduzieren Sie Ihre Abhängigkeit von Entwicklerressourcen für Experimente.
  • Reduzieren Sie den manuellen Aufwand, der erforderlich ist, um Experimente in Contentful aufzubauen, und nutzen Sie die leistungsstarke Experimentier-Engine und die Analytik-Funktionen von Kameleoon, um die Leistung Ihrer Experimente zu messen.

​
Hinweise

Beachten Sie diese Punkte bei der Verwendung dieser Integration:
  • Sie können diese Integration nur mit Feature-Experimenten verwenden.
  • Sie müssen die Feature Experimentation-Lösung in Ihrem Kameleoon-Konto aktivieren.

​
Voraussetzungen

Um diese Integration zu konfigurieren, benötigen Sie die folgenden Informationen von Kameleoon:
  • Anmeldedaten: Ihre Kameleoon-Anmeldedaten bestehen aus der E-Mail-Adresse und Passwortkombination, die Ihnen den Zugriff auf Ihr Kameleoon-Konto ermöglichen. Diese Integration verwendet die OAuth-Authentifizierung, um Sie in Ihrem Kameleoon-Konto anzumelden.
  • Sitecode: Sie müssen den Sitecode Ihres Projekts angeben. Siehe die entsprechende Kameleoon-Dokumentation, um zu erfahren, wo Sie Ihren Sitecode finden.

​
Installation

  1. Gehen Sie zu Ihrem Contentful-Konto.
  2. Klicken Sie auf Apps > Marketplace und suchen Sie nach Kameleoon.
  1. Installieren Sie die Kameleoon-App und autorisieren Sie den Zugriff.
  2. Wählen Sie den Sitecode Ihres Projekts aus.
  3. Klicken Sie oben rechts auf Install.
Die Kameleoon-App ist nun vollständig installiert und einsatzbereit.

​
Nutzung

​
Erstellen Sie ein Feature-Experiment in Kameleoon

So erstellen Sie ein neues Feature-Experiment:
  1. Melden Sie sich bei Ihrem Kameleoon-Konto an.
  2. Navigieren Sie zum Feature Flag-Dashboard.
  3. Klicken Sie auf New feature flag.
  4. Geben Sie einen Namen, ein Projekt und einen Feature Key ein.
  5. Validate.
  6. Klicken Sie auf Add a rule > Experiment, um eine Experiment Delivery Rule hinzuzufügen.
  7. Konfigurieren Sie die Regel nach Ihren Wünschen.

​
Erstellen Sie einen Kameleoon Container-Eintrag in Contentful

  1. Melden Sie sich bei Ihrem Contentful-Konto an.
  2. Klicken Sie auf Content.
  1. Klicken Sie auf Add Entry > Kameleoon Container.
  2. Fügen Sie einen Entry Name hinzu und wählen Sie ein Experiment im Dropdown Kameleoon experiments aus.
    • Die mit dem ausgewählten Experiment verknüpften Variations werden automatisch angezeigt, zusammen mit dem zugewiesenen Traffic-Prozentsatz.
  1. Klicken Sie für jede Variation auf Create entry and link, um einen neuen Eintrag zu erstellen und ihn als Inhalt Ihrer Variation zu verwenden, oder klicken Sie auf Link an existing entry, wenn Sie einen vorhandenen Eintrag als Inhalt der Variation verwenden möchten.

​
Bereiten Sie sich auf die Veröffentlichung Ihres Inhalts vor

Ihr Kameleoon Container ist bereit zur Veröffentlichung, wenn Sie diese vier Schritte abgeschlossen haben:
So können Sie jeden Schritt abschließen:
  • Select experiment: Sie können diesen Schritt abschließen, indem Sie ein Experiment im Dropdown Kameleoon experiments auswählen.
  • Add content: Sie können diesen Schritt abschließen, indem Sie jeder Variation einen Eintrag zuordnen.
  • Publish variations: Dieser Schritt ist als abgeschlossen markiert, wenn alle mit den Variations verknüpften Einträge veröffentlicht werden.
  • Start experiment: Um diesen Schritt abzuschließen, gehen Sie zu Ihrem Kameleoon-Konto und verwenden Sie den manuellen Schalter, um das Feature Flag in der Produktionsumgebung auf ON zu setzen.

​
Integration mit Ihrem Frontend

Kameleoon Container ist ein neuer Inhaltstyp, der in die Contentful-Antwort eingeführt wird. Es ist ein Container, der auf zwei oder mehr tatsächliche Werte verweist, die wir testen möchten. Sie müssen nun Ihr Frontend mit Kameleoon und dem Kameleoon Container integrieren. Sie benötigen die Hilfe eines Entwicklers, um die Funktionsweise Ihres Frontends so zu ändern, dass es Kameleoon Container-Einträge akzeptiert und programmatisch verarbeitet. Das programmatische Verarbeiten des Kameleoon Containers ist etwas, das Sie nur einmal tun müssen. Anschließend kann der Code, der zur Verarbeitung des Kameleoon Containers verwendet wird, jedes Mal wiederverwendet werden, wenn Sie einen Kameleoon Container-Eintrag von Contentful erhalten. Von hier aus müssen wir technisch tiefer in das Setup des Kunden und seine Integration mit Kameleoon eintauchen. Für Entwickler ist es vorteilhaft, sich mit den oben beschriebenen Inhalten vertraut zu machen, bevor sie mit der technischen Anleitung unten fortfahren. Die Ziele des Setups sind:
  • Ermöglichen serverseitiger Experimente, ohne neuen Code pro Experiment auszurollen
  • Steuerung von Inhalten in Contentful und Experimenten in Kameleoon
  • Serverseitige Auswahl von Variations für schnelle Bereitstellung und zur Vermeidung des Flicker-Effekts

​
Wie die Kameleoon-App die Contentful-API-Antwort verändert

Wie oben erwähnt, erstellt die Kameleoon-App einen neuen Inhaltstyp: den Kameleoon Container. Der Kameleoon Container ist ein Inhaltstyp, der die möglichen Werte für das Experiment verschachtelt und Metadaten über das Kameleoon-Experiment und die Variation-Namen enthält.

​
Verwenden von Kameleoon zur Auswahl der richtigen Variation

Wir werden ein Pseudo-Backend erstellen, das die Contentful-API-Antwort entgegennimmt und unser NodeJS SDK verwendet, um zu bestimmen, welche Variation dem Benutzer angezeigt werden soll. Beginnen wir damit, die von Contentful zurückgegebene Kameleoon Container JSON-Antwort zu betrachten. Beachten Sie, dass der Inhaltstyp mehrere Felder bezüglich des Kameleoon-Experiments offenlegt: einen featureKey und ein Meta mit Variation-Keys. 
{
    "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"
                }
             }
          ]
       }
    }
 }
Bevor wir auswählen können, welchen Eintrag wir aus unserem Kameleoon Container auswählen, müssen wir sehen, wie wir die richtige Variation von Kameleoon erhalten. Unten ist ein Beispiel mit dem fest codierten Feature Key contentful_black_friday_cta in der Kameleoon-Methode getFeatureFlagVariationKey(), die eine Variation für den Benutzer abruft. 
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();
Im obigen Code bestimmt die Methode getFeatureFlagVariationKey(), ob der Benutzer (oder Besucher) eine der Variations oder den ursprünglichen Inhalt sehen soll. Der Wert entspricht einer Variation, die wir aus dem Meta-Feld des Kameleoon Containers abrufen können. 
"meta":{
          "en-US":{
             "off":"5IF12vtaKcFJXtj8ljaDVr",
             "variation_1":"2UrVZemBoltsxHKcqRgjKk",
             "variation_2":"73GxfiNActyOZvP9Hn3sEC"
          }
       }
Jetzt aktualisieren wir unseren Code, um das automatische Abrufen des Kameleoon Containers einzubeziehen und seine Werte zur Befüllung des Kameleoon-Experiments zu verwenden, sodass Sie dies nicht jedes Mal tun müssen, wenn Sie ein neues Experiment erstellen und ausführen.
Dies ist eine einmalige Einrichtung, die für alle nachfolgenden Experimente funktioniert, die Sie erstellen.
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,
    });
Wir verwenden die ID des Kameleoon Containers aus dem obigen JSON-Beispiel. In einer realen Implementierung würde die ID beispielsweise dynamisch über einen Slug festgelegt. 
const kameleoonContainerEntry = await
sdk.getEntry('5XJ5TWDvAzPh7QgWN4ysaV');
Wir erhalten den Feature Key vom Kameleoon Container-Eintrag: const featureKey = kameleoonContainerEntry.featureKey; Wir erhalten den Key der Variation: 
const variationKey = client.getFeatureFlagVariationKey(
    visitorCode,
    featureKey,

    );
Wir erhalten den Contentful-Eintrag, der mit der Variation verknüpft ist, anhand des Variation-Keys: 
const variationEntry = kameleoonContainerEntry.meta[variationKey];
}
 init();
Von hier aus können Sie minimale Änderungen an Ihrer Anzeigelogik vornehmen, um den richtigen Eintrag anzuzeigen.

​
Verwenden von Kameleoon, um ein Benutzersegment zu targetieren

Sie können in Kameleoon ein bestimmtes Benutzersegment targetieren. Sie können diese Dokumentation lesen, die erklärt, wie Sie Benutzersegmente erstellen und sie in Ihr Experiment einbeziehen/ausschließen können.