Saltar al contenido principal

​
Paso 1: Definir las variaciones de la funcionalidad en Kameleoon​

En su dashboard de Kameleoon, cree un nuevo feature flag que controle qué versión del contenido se muestra. Por ejemplo, si está experimentando con diferentes versiones de una sección de la página de inicio:
  • Nombre del feature flag: Homepage section
  • Variación 1 de la funcionalidad: section_v1
    • Variable 1: content_id = ID del contenido en la versión 1 de su CMS.
  • Variación 2 de la funcionalidad: section_v2
    • Variable 2: content_id = ID del contenido en la versión 2 de su CMS.
Estos valores de content_id deben corresponderse con los identificadores únicos utilizados en su CMS headless para cada versión del contenido.
CMS-1

​
Paso 2: Obtener y mostrar el contenido del CMS​

Ahora, en su aplicación React, utilice el método getFeatureVariable para recuperar el content_id en función de la variación activa y úselo para obtener el contenido correspondiente de su 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;
Mecanismo:
  • Obtención del content id: el método getFeatureVariable recupera el content_id para la variación activa. El content_id se utiliza después para obtener el contenido adecuado del CMS.
  • Gestión de errores: se incluye un bloque try-catch para gestionar cualquier error durante el proceso de obtención del contenido.
  • Renderizado: el contenido obtenido se renderiza dinámicamente en su componente de React.

​
Paso 3: Gestionar el contenido del CMS​

Asegúrese de que cada variación de contenido en su CMS headless tenga un ID único asociado. Estos IDs deben coincidir con las variables content_id configuradas en Kameleoon. Cuando los usuarios cargan la página, Kameleoon decide qué variación servir. En función del content_id, se recupera y muestra el contenido correcto. Conclusión: siguiendo estos pasos, Kameleoon queda integrado con el CMS headless usando el React SDK. Esta configuración permite la experimentación dinámica y la entrega de diferentes variaciones de contenido, mejorando la personalización y la eficacia de la experiencia del usuario.
CMS-2