Skip to content

Intégrer Braze aux applications ChatGPT

Ce guide explique comment intégrer Braze aux applications ChatGPT afin de permettre l’analyse et la journalisation des événements dans les applications basées sur l’intelligence artificielle.

Une carte de contenu intégrée à une application ChatGPT.

Aperçu

Les applications ChatGPT offrent une plateforme performante pour créer des applications conversationnelles basées sur l’intelligence artificielle. En intégrant Braze à votre application ChatGPT, vous pouvez continuer à contrôler vos données first-party à l’ère de l’intelligence artificielle, notamment en ce qui concerne :

  • Le suivi de l’engagement et du comportement des utilisateurs au sein de votre application ChatGPT (par exemple, en identifiant les questions ou les fonctionnalités de chat que vos clients utilisent).
  • La segmentation et le reciblage des campagnes Braze en fonction des modèles d’interaction basés sur l’intelligence artificielle (par exemple, en envoyant des e-mails aux utilisateurs qui ont utilisé le chat plus de trois fois par semaine).

Principaux avantages

  • Maîtrisez le parcours client : Lorsque les utilisateurs interagissent avec votre marque via ChatGPT, vous conservez une visibilité sur leur comportement, leurs préférences et leurs habitudes d’engagement. Ces données sont directement transférées vers les profils utilisateurs Braze, et non pas uniquement vers les analyses de la plateforme d’intelligence artificielle.
  • Reciblage multiplateforme : Suivez les interactions des utilisateurs dans votre application ChatGPT et reciblez-les sur vos canaux propriétaires (e-mail, SMS, notifications push, messages in-app) avec des campagnes personnalisées basées sur leurs habitudes d’utilisation de l’intelligence artificielle.
  • Renvoyez du contenu promotionnel 1:1 dans les conversations ChatGPT : Diffusez des messages in-app Braze, des Content Cards et bien plus encore directement dans votre expérience ChatGPT à l’aide des composants d’interface utilisateur conversationnelle personnalisés que votre équipe a créés pour votre application.
  • Attribution du chiffre d’affaires : Suivez les achats et les conversions provenant des interactions avec l’application ChatGPT.

Conditions préalables

Avant d’intégrer Braze à votre application ChatGPT, vous devez disposer des éléments suivants :

Intégration de l’application ChatGPT

Configuration

Étape 1 : Obtenir le fichier d’intégration Braze

Copiez le fichier braze.js depuis notre dépôt d’intégration des applications ChatGPT dans votre projet. Ce fichier contient toutes les configurations et fonctions d’aide nécessaires au SDK Braze.

Étape 2 : Installer les dépendances

Installez notre SDK Web pour bénéficier des fonctionnalités les plus récentes de Braze :

Pour l’intégration côté client :

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

Remplacez YOUR-SDK-ENDPOINT par votre endpoint SDK Braze réel.

Configurer le 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
  );
}

Afficher les Content Cards 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();
  }
}, []);

Suivre les événements du widget

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"
  });
};

Intégration côté serveur (serveur MCP)

Si vous avez également besoin d’une intégration côté serveur pour les fonctionnalités d’envoi de messages sur votre serveur MCP, contactez [email protected]. Pour suivre les événements et les achats depuis votre serveur MCP, utilisez notre REST API.
New Stuff!