Skip to content

BrazeをChatGPTアプリと統合する

このガイドでは、BrazeをChatGPTアプリと統合し、AI搭載アプリケーション内で分析とイベントロギングを有効にする方法を説明します。

ChatGPTアプリに統合されたコンテンツカード。

概要

ChatGPTアプリは、AI対話型アプリケーションを構築するための強力なプラットフォームを提供します。BrazeをChatGPTアプリと統合することで、AI時代においてもファーストパーティデータのコントロールを維持し続けることができます。具体的には以下のことが可能です。

  • ChatGPTアプリ内でのユーザーエンゲージメントと動作をトラッキングする（例：顧客がどの質問やチャット機能を利用しているかを特定する）
  • AIインタラクションパターンに基づいてBraze キャンペーンをセグメント化し、リターゲティングする（例：週に3回以上チャットを利用したユーザーにメールを送信する）

主な利点

  • カスタマージャーニーを自分のものに： ユーザーがChatGPTを通じてブランドとやり取りする間も、その動作、好み、エンゲージメントパターンを把握し続けることができます。このデータはAIプラットフォームの分析だけでなく、Brazeユーザープロファイルに直接流れ込みます。
  • クロスプラットフォームリターゲティング： ChatGPTアプリでのユーザーインタラクションをトラッキングし、AI利用パターンに基づいたパーソナライズ済みキャンペーンで、自社チャネル（メール、SMS、プッシュ通知、アプリ内メッセージ）全体でリターゲティングできます。
  • ChatGPTの会話に1:1のプロモーションコンテンツを返す： チームがアプリ用に構築したカスタム対話型UIコンポーネントを使って、ChatGPT体験内で直接Brazeのアプリ内メッセージ、Content Cardsなどを配信できます。
  • 収益アトリビューション： ChatGPTアプリのインタラクションから発生した購入とコンバージョンをトラッキングできます。

前提条件

BrazeをChatGPTアプリと統合する前に、以下が必要です。

ChatGPTアプリの統合

セットアップ

ステップ1:Brazeの統合ファイルを取得する

ChatGPTアプリ統合リポジトリからbraze.jsファイルをプロジェクトにコピーします。このファイルには、必要なすべてのBraze SDKの設定とヘルパー関数が含まれています。

ステップ2:依存関係をインストールする

Brazeの最新機能を利用するには、Web SDKをインストールします。

クライアントサイド統合の場合：

1

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)

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.

Configure widget metadata

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

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

YOUR-SDK-ENDPOINTを実際のBraze SDKエンドポイントに置き換えてください。

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

Braze Content Cardsを表示する

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

ウィジェットイベントをトラッキングする

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

サーバーサイド統合（MCPサーバー）

MCPサーバー上でメッセージング機能のサーバーサイド統合も必要な場合は、[email protected]までお問い合わせください。MCPサーバーからのイベントや購入のトラッキングには、REST APIを使用してください。
New Stuff!