Zum Inhalt springen

Diese Seite wurde automatisch übersetzt und kann Ungenauigkeiten enthalten. Um einen Übersetzungsfehler zu melden, nutzen Sie das Feedback unten im Inhaltsverzeichnis rechts auf der Seite.

Braze in ChatGPT-Apps integrieren

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

Setup

Schritt 1: Braze-Integrationsdatei herunterladen

Kopieren Sie die Datei braze.js aus unserem ChatGPT-Apps-Integrations-Repository in Ihr Projekt. Diese Datei enthält alle erforderlichen Braze-SDK-Konfigurationen und Hilfsfunktionen.

Schritt 2: Abhängigkeiten installieren

Installieren Sie unser Web-SDK für den aktuellsten Funktionsumfang von Braze:

Für die clientseitige Integration:

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)

Tipp

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

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

Den useBraze-Hook einrichten

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

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

Ab Web SDK 7.0.0 liefert subscribeToContentCardsEvents die zwischengespeicherten Karten sofort in einem CACHE_REPLAY-Event, sodass der Aufruf von getCachedContentCards() nicht mehr erforderlich ist. subscribeToContentCardsUpdates ist ab Version 7.0.0 veraltet.

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

Server-seitige Integration (MCP-Server)

Wenn Sie auch eine serverseitige Integration für Messaging-Funktionalität auf Ihrem MCP-Server benötigen, kontaktieren Sie [email protected]. Zum Tracken von Events und Käufen über Ihren MCP-Server verwenden Sie unsere REST API.

New Stuff!