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のアプリ内メッセージやコンテンツカードなどを配信する。
  • 収益アトリビューション：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を使用する。
Github   GitHub でこのページを編集
New Stuff!