Passer au contenu principal

​
Etape 1 : definir les variations de feature dans Kameleoon​

Dans votre dashboard Kameleoon, creez un nouveau feature flag qui controle quelle version de contenu est affichee. Par exemple, si vous experimentez differentes versions d’une section d’accueil :
  • Nom du feature flag : Homepage section
  • Variation de feature 1 : section_v1
    • Variable de feature 1 : content_id = ID du contenu sur la version 1 de votre CMS.
  • Variation de feature 2 : section_v2
    • Variable de feature 2 : content_id = ID du contenu sur la version 2 de votre CMS.
Ces valeurs content_id doivent correspondre aux identifiants uniques utilises dans votre CMS headless pour chaque version de contenu.
CMS-1

​
Etape 2 : recuperer et afficher le contenu depuis le CMS​

Maintenant, dans votre application React, utilisez la methode getFeatureVariable pour recuperer le content_id en fonction de la variation active et l’utiliser pour recuperer le contenu correspondant depuis votre CMS headless. 
// 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;
Mecanisme :
  • Recuperation du content id : La methode getFeatureVariable recupere le content_id pour la variation active. Le content_id est ensuite utilise pour recuperer le contenu approprie depuis le CMS.
  • Gestion des erreurs : Un bloc try-catch est inclus pour gerer les erreurs eventuelles pendant le processus de recuperation du contenu.
  • Rendu : Le contenu recupere est affiche dynamiquement dans votre composant React.

​
Etape 3 : gerer le contenu du CMS​

Assurez-vous que chaque variation de contenu dans votre CMS headless est associee a un ID unique. Ces ID doivent correspondre aux variables de feature content_id definies dans Kameleoon. Lorsque les utilisateurs chargent la page, Kameleoon decide quelle variation servir. En fonction du content_id, le contenu correct est recupere et affiche. Conclusion : En suivant ces etapes, Kameleoon est integre au CMS headless en utilisant le SDK React. Cette configuration permet une experimentation dynamique et la livraison de differentes variations de contenu, ameliorant la personnalisation et l’efficacite de l’experience utilisateur.
\u0001\u0001\u0001 CMS-2