Skip to content

Braze とChatGPT アプリ の統合

本書では、Braze をChatGPT アプリ s と統合して、AI を搭載したアプリアプリケーション内で分析およびイベントログを有効にする方法について説明します。

チャットGPTアプリに統合されたコンテンツカード。

概要

ChatGPT アプリは、AI 対話型アプリライセンスを構築するための強力なプラットフォームを提供します。Braze をChatGPT アプリと統合することで、次の方法を含め、AI 時代のファーストパーティデータコントロールを引き続き維持できます。

  • ChatGPT アプリ内のユーザー エンゲージメントと動作を追跡する(顧客が使用する疑問またはチャット機能を特定するなど)
  • AIインターアクション型をベースにしたセグメントとリターゲティングする Braze キャンペーンs(1週間に3回以上チャットを利用したユーザーsのメールなど)

主な効果

  • カスタマージャーニーを所有する:ユーザーはChatGPTを介してブランドと対話する一方で、その行動、好み、およびエンゲージメント形態の可視性を維持します。このデータは、AI プラットフォームの分析だけでなく、Braze ユーザープロファイルにも直接的に流れます。
  • クロスプラットフォーム リターゲティング:ChatGPT アプリでユーザーのインターアクションを追跡し、AI 使用パターンに基づいてパーソナライズされた キャンペーン s を使用して、所有するチャネル(メール、SMS、プッシュ通知 s、アプリ内メッセージング) 間でリターゲティングするします。
  • 1:1 プロモーションコンテンツをChatGPT 会話に返します。Braze アプリ内メッセージ s、 コンテンツカード など、アプリ用に作成したカスタム会話UI コンポーネントを使用して、ChatGPT エクスペリエンス内で直接的に配信します。
  • 収益アトリビューション:ChatGPT アプリ inter アクション s から発信される購買とコンバージョンを追跡します。

前提条件

Braze をChatGPT アプリに統合するには、次のものが必要です。

ChatGPTアプリとの統合

設定

ステップ 1: Braze統合ファイルを入手する

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

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

WebSDKをインストールしてBrazeの最新機能を利用する：

クライアントサイドに統合する：

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

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

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サーバーからのイベントや購入のトラッキングには、REST APIを使用する。MCPサーバーのメッセージング機能も必要な場合は、サポートケースを開封する。
Github   GitHub でこのページを編集
New Stuff!