Passer au contenu

Cette page a été traduite automatiquement et peut contenir des inexactitudes. Pour signaler une erreur de traduction, utilisez le module de commentaires en bas de la table des matières, à droite de la page.

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 :

Une nouvelle application web et une clé API dans votre espace de travail Braze
Une application ChatGPT créée sur la plateforme OpenAI (application exemple OpenAI)

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 pour les applications ChatGPT dans votre projet. Ce fichier contient toute la configuration nécessaire du SDK Braze ainsi que les fonctions utilitaires.

Étape 2 : Installer les dépendances

Installez notre SDK Web pour bénéficier de l’ensemble le plus récent des fonctionnalités de Braze :

Pour une intégration côté client :

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)

Conseil

Recommended Approach: This method enables rich messaging experiences and real-time user interaction tracking within your ChatGPT app 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.

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

"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

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

const [cards, setCards] = useState([]);

useEffect(() => {
  // - Available in version 7.0.0+
  // Subscribe to content card events. The SDK sends the cached cards right away.
  braze.subscribeToContentCardsEvents((event) => {
    switch (event.type) {
      case braze.ChannelEventType.CACHE_REPLAY:
      case braze.ChannelEventType.CACHE_LOAD:
      case braze.ChannelEventType.DATA_UPDATED:
        setCards(event.cacheSnapshot.contentCards.cards);
        break;
    }
  });

  // 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();
  }
}, []);

À partir de la version 7.0.0 du SDK Web, subscribeToContentCardsEvents transmet immédiatement les cartes mises en cache dans un événement CACHE_REPLAY, ce qui rend l’appel à getCachedContentCards() inutile. subscribeToContentCardsUpdates est obsolète depuis la version 7.0.0.

// 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!