Realiza la integración de Braze con las aplicaciones ChatGPT

Esta guía explica cómo integrar Braze con las aplicaciones ChatGPT para habilitar el análisis y el registro de eventos dentro de aplicaciones basadas en inteligencia artificial.

Resumen

Las aplicaciones ChatGPT proporcionan una potente plataforma para crear aplicaciones conversacionales de IA. Al integrar Braze con tu aplicación ChatGPT, podrás seguir manteniendo el control de los datos propios en la era de la IA, incluyendo cómo:

• Realiza un seguimiento de la interacción y el comportamiento de los usuarios dentro de tu aplicación ChatGPT (por ejemplo, identificando qué preguntas o características de chat utilizan tus clientes).
• Segmenta y reorienta las campañas de Braze basándote en patrones de interacción de IA (como el envío por correo electrónico a usuarios que hayan utilizado el chat más de tres veces por semana).

Ventajas principales

• Controla el recorrido del cliente: Mientras los usuarios interactúan con tu marca a través de ChatGPT, tú mantienes la visibilidad de su comportamiento, preferencias y patrones de interacción. Estos datos se transfieren directamente a los perfiles de usuario de Braze, no solo a los análisis de la plataforma de IA.
• Retargeting multiplataforma: Realiza un seguimiento de las interacciones de los usuarios en tu aplicación ChatGPT y reorienta tu atención hacia ellos a través de tus canales propios (correo electrónico, SMS, notificaciones push, mensajes dentro de la aplicación) con campañas personalizadas basadas en sus patrones de uso de la IA.
• Devuelve contenido promocional 1:1 a las conversaciones de ChatGPT: Entregar mensajes Braze dentro de la aplicación, tarjetas de contenido y mucho más directamente desde tu experiencia ChatGPT utilizando los componentes personalizados de la interfaz de usuario conversacional que tu equipo ha creado para tu aplicación.
• Atribución de ingresos: Realiza un seguimiento de las compras y conversiones que se originan en las interacciones con la aplicación ChatGPT.

Requisitos previos

Antes de realizar la integración de Braze con tu aplicación ChatGPT, debes disponer de lo siguiente:

• Una nueva aplicación Web y una clave de API en tu espacio de trabajo de Braze.
• Una aplicación ChatGPT creada en la plataforma OpenAI (aplicación de muestra de OpenAI).

Integración de la aplicación ChatGPT

Configuración

Paso 1: Obtener el archivo de integración de Braze

Copia elbraze.jsarchivo de nuestro repositorio de integración de aplicaciones ChatGPT a tu proyecto. Este archivo contiene toda la configuración necesaria del SDK de Braze y las funciones auxiliares.

Paso 2: Instalar dependencias

Instala nuestro SDK Web para disfrutar del conjunto de características más actualizado de Braze:

Para la integración del lado del cliente:

1
npm install @braze/web-sdk

Aplicación

Hay dos formas de realizar la integración de Braze con tu aplicación ChatGPT, dependiendo de tu caso de uso:

Integración del lado del cliente (widgets personalizados)

Para mostrar mensajes de Braze y realizar el seguimiento de las interacciones de los usuarios dentro de los widgets personalizados de tu aplicación ChatGPT, utiliza la integración de SDK web. Puedes encontrar un ejemplo completo de mensajería en nuestro repositorio de muestras aquí.

Configurar los metadatos del widget

Añade los siguientes metadatos al archivo del servidor MCP para permitir los dominios de Braze, asegurándote de actualizar el dominio CDN según tu región:

1
2
3
4
5
6
7
8
9
"openai/widgetCSP": {
  connect_domains: ["https://YOUR-SDK-ENDPOINT"],
  resource_domains: [
    "https://appboy-images.com",
    "https://braze-images.com",
    "https://cdn.braze.eu",
    "https://use.fontawesome.com"
  ],
}

ReemplazaYOUR-SDK-ENDPOINT por tu punto final SDK de Braze real.

Configura el gancho useBraze.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { useBraze } from "./utils/braze";

function YourWidget() {
  const braze = useBraze({
    apiKey: "your-braze-api-key",
    baseUrl: "your-braze-endpoint.braze.com",
  });

  useEffect(() => {
    if (!braze.isInitialized) {
      return;
    }

    // Set user identity
    braze.changeUser("user-id-123");
    
    // Log widget interactions
    braze.logCustomEvent("viewed_pizzaz_list");
  }, [braze.isInitialized]);

  return (
    // Your widget JSX
  );
}

Mostrar tarjetas de contenido de Braze

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const [cards, setCards] = useState([]);

useEffect(() => {
  // Get cached content cards
  setCards(braze.getCachedContentCards()?.cards ?? []);

  // Subscribe to content card updates
  braze.subscribeToContentCardsUpdates((contentCards) => {
    setCards(contentCards.cards);
  });

  // Open session
  braze.openSession();

  return () => {
    braze.removeAllSubscriptions();
  }
}, []);

Seguir eventos de widgets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Track user interactions within your widget
const handleButtonClick = () => {
  braze.logCustomEvent("widget_button_clicked", {
    button_type: "save_list",
    widget_name: "pizza_list"
  });
};

const handleItemInteraction = (itemId) => {
  braze.logCustomEvent("item_interacted", {
    item_id: itemId,
    interaction_type: "view_details"
  });
};

Integración del lado del servidor (servidor MCP)

Si también necesitas una integración del lado del servidor para la funcionalidad de mensajería en tu servidor MCP, ponte en contacto con [email protected]. Para realizar el seguimiento de los eventos y las compras desde tu servidor MCP, utiliza nuestra API REST.