Skip to content

Intégrer Braze aux applications ChatGPT

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

Une carte de contenu intégrée à l'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 :

  • Suivez l’engagement et le 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).
  • Segmentez et reciblez les 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-mails, SMS, notifications push, messages in-app) avec des campagnes personnalisées basées sur leurs habitudes d’utilisation de l’intelligence artificielle.
  • Renvoyer du contenu promotionnel 1:1 aux conversations ChatGPT : Diffusez des messages in-app Braze, des cartes de contenu 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’effectuer l’intégration de 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

Veuillez copier lebraze.jsfichier depuis notre référentiel d’intégration des applications ChatGPT vers votre projet. Ce fichier contient toutes les configurations et fonctions d’aide nécessaires au SDK Braze.

Étape 2 : Veuillez installer les dépendances.

Veuillez installer 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

Mise en œuvre

Il existe deux méthodes pour réaliser l’intégration de Braze à votre application ChatGPT, en fonction de votre cas d’utilisation :

Intégration côté client (widgets personnalisés)

Pour afficher les messages Braze et suivre les interactions des utilisateurs dans les widgets personnalisés de votre application ChatGPT, veuillez utiliser l’intégration SDK. Un exemple complet d’envoi de messages est disponible dans notre référentiel d’exemples ici.

Configurer les métadonnées du widget

Veuillez ajouter les métadonnées suivantes à votre fichier serveur MCP afin d’autoriser les domaines Braze, en veillant à mettre à jour le domaine du réseau de diffusion de contenu en fonction de votre région :

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

Veuillez remplacerYOUR-SDK-ENDPOINTpar 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 cartes de contenu 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 l’envoi de messages sur votre serveur MCP, veuillez contacter [email protected]. Pour suivre les événements et les achats depuis votre serveur MCP, veuillez utiliser notre API REST.
Github   Modifier cette page sur GitHub
New Stuff!