Skip to content

BrazeをChatGPTアプリと統合する

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

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

概要

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

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

主な利点

  • カスタマージャーニーを自分のものに： ユーザーがChatGPTを通じてブランドとやり取りする間も、その動作、好み、エンゲージメントパターンを把握し続けることができます。このデータはAIプラットフォームの分析だけでなく、Brazeユーザープロファイルに直接流れ込みます。
  • クロスプラットフォームリターゲティング： ChatGPTアプリでのユーザーインタラクションをトラッキングし、AI利用パターンに基づいたパーソナライズ済みCampaignsで、自社チャネル（メール、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

実装

BrazeをChatGPTアプリに統合する方法は、ユースケースに応じて2通りある：

クライアントサイド統合（カスタムウィジェット）

カスタムChatGPTアプリウィジェット内でBrazeメッセージングを表示し、ユーザーインタラクションをトラッキングするには、Web SDK統合を使用する。完全なメッセージングの例は、こちらのサンプルリポジトリで見つけることができる。

ウィジェットのメタデータを設定する

MCPサーバーファイルに以下のメタデータを追加し、Brazeドメインを許可する。CDNドメインは地域に応じて更新すること：

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

実際のBraze SDKエンドポイントでYOUR-SDK-ENDPOINT置き換える。

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コンテンツカードを表示する

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!