Intégrer Braze aux applications ChatGPT

Ce guide explique comment intégrer Braze aux apps ChatGPT pour permettre l’analyse/analytique et l’enregistrement des événements au sein des applications alimentées par l’intelligence artificielle.

Aperçu

Les apps ChatGPT constituent une plateforme puissante pour créer des applications conversationnelles d’intelligence artificielle. En intégrant Braze à votre app ChatGPT, vous pouvez continuer à maintenir le contrôle des données first-party à l’ère de l’intelligence artificielle, y compris comment :

• Suivre l’engagement et le comportement des utilisateurs au sein de votre application ChatGPT (par exemple, identifier les questions ou les fonctionnalités de chat que vos clients utilisent).
• Segmenter et recibler les campagnes Braze en fonction des schémas d’interaction avec l’intelligence artificielle (par exemple, envoyer un e-mail aux utilisateurs qui ont utilisé le chat plus de trois fois par semaine).

Principaux avantages

• Appropriez-vous votre parcours client : Pendant que les utilisateurs interagissent avec votre marque par le biais de ChatGPT, vous gardez une visibilité sur leur comportement, leurs préférences et leurs modèles d’engagement. Ces données affluent directement sur les profils utilisateurs de Braze, et pas seulement sur les analyses/analytiques de la plateforme d’intelligence artificielle.
• Reciblage multiplateforme : Suivez les interactions des utilisateurs dans votre appli 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 schémas d’utilisation de l’intelligence artificielle.
• Renvoyez du contenu promotionnel 1:1 dans les conversions de ChatGPT : Diffusez des messages in-app, des cartes de contenu et plus encore de Braze directement dans votre expérience sur l’application ChatGPT à l’aide des composants d’interface utilisateur conversationnelle personnalisés que votre équipe a créés pour votre application.
• Attribution des chiffres d’affaires : Suivez les achats et les conversions qui proviennent des interactions avec l’appli 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 dans la plateforme OpenAI(OpenAI sample app)

Intégration de l’application ChatGPT

Configuration

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

Copiez le fichier braze.js de notre référentiel d’intégration des applications ChatGPT dans votre projet. Ce fichier contient toutes les fonctions de configuration et d’aide nécessaires au SDK de 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ôte à côte :

1
npm install @braze/web-sdk

Mise en œuvre

Il existe deux façons d’intégrer Braze à votre application ChatGPT, en fonction de votre cas d’utilisation :

Intégration côte à côte (widgets personnalisés)

Pour afficher les messages Braze et suivre les interactions des utilisateurs dans vos widgets personnalisés de l’application ChatGPT, utilisez l’intégration SDK Web. Vous trouverez un exemple complet d’envoi de messages dans notre dépôt d’échantillons ici.

Configurer les métadonnées des widgets

Ajoutez les métadonnées suivantes au fichier de votre serveur MCP pour autoriser les domaines Braze, en veillant à mettre à jour le domaine du réseau de diffusion 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"
  ],
}

Remplacez YOUR-SDK-ENDPOINT par votre endpoint SDK Braze.

Mise en place du crochet 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ôte à côte avec le serveur (serveur MCP)

Si vous avez également besoin d’une intégration côte à côte pour la fonctionnalité d’envoi de messages sur votre serveur MCP, veuillez contacter [email protected]. Pour le suivi des événements et des achats à partir de votre serveur MCP, utilisez notre API REST.