Skip to content

Integra Braze con las aplicaciones ChatGPT

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

Una tarjeta de contenido integrada en una aplicación ChatGPT.

Resumen

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

  • Realizar 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).
  • Segmentar y reorientar Campaigns 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 reoriéntalos 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: Entrega mensajes dentro de la aplicación de Braze, Content Cards y mucho más directamente dentro de 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 integrar Braze con tu aplicación ChatGPT, debes disponer de lo siguiente:

Integración de la aplicación ChatGPT

Configuración

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

Copia el archivo braze.js 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

Implementation

There are two ways to integrate Braze with your ChatGPT app depending on your use case:

Client-side integration (custom widgets)

For displaying Braze messaging and tracking user interactions within your custom ChatGPT app widgets, use the Web SDK integration. A full messaging example can be found in our sample repository here.

Configure widget metadata

Add the following metadata to your MCP server file to allow Braze domains, ensuring to update the CDN domain based on your region:

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"
  ],
}

Reemplaza YOUR-SDK-ENDPOINT por tu punto final de SDK de Braze real.

Configurar el hook 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 Content Cards 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();
  }
}, []);

Realizar seguimiento de 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 eventos y compras desde tu servidor MCP, utiliza nuestra REST API.
New Stuff!