Skip to content

Integrieren Sie Braze in ChatGPT-Apps

Dieser Leitfaden beschreibt, wie Sie Braze in ChatGPT-Apps integrieren können, um Analytics und Ereignisprotokollierung in KI-gestützten Anwendungen zu ermöglichen.

Eine in die ChatGPT-App integrierte Content-Card.

Übersicht

ChatGPT-Apps bieten eine leistungsstarke Plattform für die Entwicklung von KI-basierten Konversationsanwendungen. Durch die Integration von Braze in Ihre ChatGPT-App können Sie auch im Zeitalter der KI weiterhin die Kontrolle über Ihre First-Party-Daten behalten, einschließlich der folgenden Aspekte:

  • Verfolgen Sie das Engagement und das Verhalten der Nutzer:innen innerhalb Ihrer ChatGPT-App (z. B. indem Sie ermitteln, welche Fragen oder Chat-Features Ihre Kund:innen nutzen).
  • Segmentieren und retargeten Sie Braze Campaigns auf der Grundlage von KI-Interaktionsmustern (z. B. indem Sie E-Mails an Nutzer:innen senden, die den Chat mehr als dreimal pro Woche genutzt haben).

Wesentliche Vorteile

  • Übernehmen Sie die Verantwortung für die Customer Journey: Während die Nutzer:innen über ChatGPT mit Ihrer Marke interagieren, behalten Sie Einblick in ihr Verhalten, ihre Präferenzen und ihr Engagement. Diese Daten werden direkt in die Braze-Nutzerprofile übertragen und nicht nur in die Analytics der KI-Plattform.
  • Plattformübergreifendes Retargeting: Verfolgen Sie die Interaktionen der Nutzer:innen in Ihrer ChatGPT-App und sprechen Sie sie über Ihre Owned Channels (E-Mail, SMS, Push-Benachrichtigungen, In-App-Nachrichten) mit personalisierten Campaigns an, die auf ihren KI-Nutzungsmustern basieren.
  • Geben Sie 1:1-Aktionsinhalte an ChatGPT-Konversationen zurück: Liefern Sie Braze In-App-Nachrichten, Content Cards und mehr direkt innerhalb Ihrer ChatGPT-Erfahrung aus, indem Sie die angepassten Konversations-UI-Komponenten verwenden, die Ihr Team für Ihre App entwickelt hat.
  • Umsatz-Attribution: Verfolgen Sie Käufe und Conversions, die aus Interaktionen mit der ChatGPT-App stammen.

Voraussetzungen

Bevor Sie Braze in Ihre ChatGPT-App integrieren, müssen Sie über Folgendes verfügen:

  • Eine neue Web-App und ein API-Schlüssel in Ihrem Braze-Workspace
  • Eine ChatGPT-App, die auf der OpenAI-Plattform erstellt wurde (OpenAI-Beispiel-App)

Integration der ChatGPT-App

Einrichtung

Schritt 1: Die Braze-Integrationsdatei herunterladen

Bitte kopieren Sie diebraze.jsDatei aus unserem ChatGPT-Apps-Integrations-Repository in Ihr Projekt. Diese Datei enthält alle erforderlichen Konfigurations- und Hilfsfunktionen für das Braze SDK.

Schritt 2: Installieren Sie die Abhängigkeiten.

Installieren Sie unser Internet-SDK, um die aktuellsten Features von Braze zu nutzen:

Für die clientseitige Integration:

1

npm install @braze/web-sdk

Implementierung

Es gibt zwei Möglichkeiten für die Integration von Braze in Ihre ChatGPT-App je nach Ihrem Anwendungsfall:

Clientseitige Integration (angepasste Widgets)

Um Braze-Nachrichten anzuzeigen und Benutzerinteraktionen innerhalb Ihrer angepassten ChatGPT-App-Widgets zu verfolgen, verwenden Sie bitte die Web-SDK-Integration. Ein vollständiges Beispiel für das Messaging finden Sie in unserem Beispiel-Repository hier.

Widget-Metadaten konfigurieren

Fügen Sie die folgenden Metadaten zu Ihrer MCP-Serverdatei hinzu, um Braze-Domains zulässig zu machen. Achten Sie dabei darauf, die CDN-Domain entsprechend Ihrer Region zu aktualisieren:

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

Ersetzen Sie YOUR-SDK-ENDPOINTdies bitte durch Ihren tatsächlichen Braze SDK-Endpunkt.

Richten Sie den useBraze-Hook ein.

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

Braze-Content-Cards anzeigen

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

Widget-Ereignisse verfolgen

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

Serverseitige Integration (MCP-Server)

Sollten Sie auch eine serverseitige Integration für Messaging-Funktionen auf Ihrem MCP-Server benötigen, wenden Sie sich bitte an [email protected]. Für das Tracking von Ereignissen und Käufen von Ihrem MCP-Server verwenden Sie bitte unsere REST API.
New Stuff!