latest:Tutorials-for-admins/Chat/SendGoogleAnalyticsDataFromWebChats/ja

チャットシナリオからGoogleアナリティクスのイベントを送信する方法

このチュートリアルでは、チャットウィジェットとシナリオを設定して主要なインタラクションデータを送信することで、WebチャットをGoogleアナリティクス4（GA4）と連携させる方法を説明します。続行する前に、以下の準備が完了していることを確認してください：

チャットシナリオとサービスの設定
ウェブサイト上でウェブチャットウィジェットを設定済みであること
チャットウィジェットを設定しているウェブサイトでGA4を使用していること
GA4のカスタムイベントについて理解していること
Measurement Protocolイベントを送信するためのAPIシークレットを生成済みであること

手順

担当者が顧客からのウェブチャットに応答するたびに、Googleアナリティクスにカスタムイベントを送信したい場合を想定します。これには、顧客のウェブサイト訪問時にGoogleアナリティクスのclientIdおよびsessionIdを取得し、それらをチャットシナリオに送信した上で、GA4に送信するカスタムイベントデータ内でこれらを使用する必要があります。

以下のステップでは、その方法について説明します：

GA4のセッションID およびクライアントID を取得する方法
clientId および sessionId データをシナリオに送信するように、チャットウィジェットの設定を編集する方法
clientId および sessionId を使用してカスタムイベントを送信するように、チャットシナリオを設定する方法

1. gtag.js を使用したクライアント ID およびセッション ID の取得

gtagの「get」コマンドを使用すると、顧客がGA4で計測されているページにアクセスした際に、現在のクライアントIDとセッションIDを取得できます。以下にコード例を示します。この例では、 gtag.js ライブラリがすでに読み込まれていることを前提としています。

コードスニペット内のG-XXXXXXXX を、ご自身の GA4 の測定ID に置き換え、ウェブページのHTMLに追加してください。このコードスニペットは以下の処理を行います：
- クライアントIDとセッションIDをリクエストします
- クライアントIDとセッションIDを「params」オブジェクトに追加します
- 取得した値をブラウザのコンソールに記録します

<script>
// Initialize a params variable to hold the session ID and client ID
var params = {};

// Get the session ID.
gtag(
  'get', // Specifies the 'get' command to retrieve a value.
  'G-XXXXXXXX', // The measurement ID of the Google Analytics property.
  'session_id', // The name of the metric to retrieve ('session_id' in this case).
  (id) => { // Callback function that receives the retrieved session ID.
    console.log("Session ID", id); // Logs the session ID to the console.
    params['session_id'] = id; // Adds the session ID to the 'params' object.
  }
);

// Get the client ID.
gtag('get', 'G-XXXXXXXX', 'client_id', (client_id) => { console.log("Client ID",client_id); params['client_id'] = client_id; });

// Log the 'params' object to console, so we can check that both IDs are present.
console.log("Params object populated with session and client id:",params)
</script>

ページを開き、ブラウザのコンソールログを確認して、セッション id とクライアント id がログに記録されているか、また両方が params オブジェクトに保存されているかを確認してください。

ブラウザのログに値（セッション ID とクライアント ID）が表示されていない場合は、以下の点を確認すると役立つかもしれません：
- ウェブページで gtag.js ライブラリが正しく読み込まれているか
- ウェブサイトに適切な計測 id（「G-XXXXXXX」のフォーマット）を使用しているか
- ブラウザが Cookie や JavaScript をブロックしていないか

2. チャットウィジェットの設定を編集する

ウェブサイトの訪問者のセッションIDとクライアントIDを取得できることを確認したら、これらの JavaScript 変数を、チャットウィジェットの設定時にシナリオへ渡すことができます。

上記のコードスニペットをチャットウィジェットの設定に組み込んでください。以下のコード例における次の点に注意してください：
- params オブジェクトは、{'session_id':0, 'client_id':0} で初期化されます
- クライアントIDとセッションIDはGA4から取得され、paramsオブジェクトに保存されます
- paramsオブジェクトは、parameters:params という行でチャット設定に渡されます

<link type="text/css" rel="stylesheet" href="https://example.brightpattern.com/clientweb/chat-client-v4/css/form.css">
<script type="text/javascript">

    // Initialize 'params' object
    var params = {'session_id':0, 'client_id':0};

    // Get Session ID and Client ID
    gtag('get', 'G-XXXXXXXX', 'session_id', (id) => {params['session_id'] = id;});
    gtag('get', 'G-XXXXXXXX', 'client_id', (client_id) => {params['client_id'] = client_id; });
    console.log("Params",params);
    
    // Configure the chat widget
    SERVICE_PATTERN_CHAT_CONFIG = {
        appId: '70a6624585ef2b0981fed84fcd12d4db',
        apiUrl: 'https://example.brightpattern.com/clientweb/api/v1',
        tenantUrl: 'example.brightpattern.com',
        chatPath: 'https://example.brightpattern.com/clientweb/chat-client-v4/',
          
        // Send the Session ID and Client ID as custom parameters to the chat widget
        parameters: params
    };
</script>
<script src="https://example.brightpattern.com/clientweb/chat-client-v4/js/init.js" defer></script>

appId、apiUrl、tenantUrl、および chatPath が、お使いのチャットウィジェットに合わせて正しい値に設定されていることをご確認ください。
G-XXXXXXXX を、ご自身の GA4 の測定 id に置き換えていることをご確認ください。

3. GA4 イベントを送信するためのチャットシナリオの設定

前のステップで、Webチャット設定のパラメータには、オブジェクト{'session_id':<セッションID>, 'client_id':<クライアントID>}が設定されたことを思い出してください。その結果、以下のシナリオ変数には、セッション ID とクライアント ID が設定されます：

$(item.externalChatData.session_id) には、セッション ID が含まれます
$(item.externalChatData.client_id) には、クライアント ID が含まれます

詳細については、関連するチュートリアル「Web HTML を通じて JavaScript 変数を渡す方法」をご参照ください。次のステップでは、Webチャットを開始した顧客のセッションIDおよびクライアントIDと紐づいたGA4イベントを送信するための、簡単なシナリオの設定方法について説明します。

チャットウィジェットに関連付けられたチャットシナリオを開き、以下のブロックを追加してください：
- 内線メッセージブロックを使用して、セッション id とクライアント id が正しく受信されたかを確認します
- URL取得ブロックを使用して、 Measurement Protocol API経由で1つまたは複数のGA4イベントを送信します
- URL取得ブロックの結果を確認するための内線メッセージブロック
- エージェント検索（チャット）ブロック（既定設定）を使用して、エージェントを検索します
- チャット接続ブロックを使用して、エージェントをチャットに接続します

最初の「内線メッセージ」ブロックを選択し、指定されたプロパティを設定して、シナリオ変数 $(item.externalChatData.session_id) および $(item.externalChatData.client_id) が適切に設定されていることを確認してください：
- ユーザー名：このシナリオをテストする際に、エージェントデスクトップで使用するエージェントのユーザー名です。この例では、ユーザー名「administrator」のアカウントを使用しています。
- メッセージ：チャットウィジェットによって値が設定されるシナリオ変数の値を表示するメッセージを設定してください：
```
Session ID
$(item.externalChatData.session_id)
Client ID
$(item.externalChatData.client_id)
```

「URL取得」ブロックを選択し、 Measurement Protocol API経由でカスタムGA4イベントを送信するように設定します：
- タイトルテキスト：任意の名前を使用できますが、複数の「URL取得」ブロックを区別するために、内容がわかる名前を付けると特に便利です。
- リクエストタイプ：POST
- 取得するURL： Measurement Protocol のエンドポイント：https://www.google-analytics.com/mp/collect
- URLパラメータ：以下の名前と値を持つ2つのパラメータを追加してください：
  - api_secret：値は、ご使用のウェブサイトに関連付けられたGA4プロパティの Measurement Protocol APIシークレットでなければなりません。
  - measurement_id：ご使用のウェブサイトに関連付けられたGA4プロパティの測定id です。
- コンテンツタイプ：application/json
- 本文： Measurement Protocol イベントエンドポイントへのクエリパラメータです。以下の例では、シナリオ変数 $(item.externalChatData.session_id) および $(item.externalChatData.client_id) を使用する「custom_scenario_event」というイベントを送信します：
```
{
   "client_id": "$(item.externalChatData.client_id)",
   "events": [
     {
        "name": "custom_scenario_event",
        "params": {
          "custom_scenario_param": "Some info about the customer",
         "session_id": "$(item.externalChatData.session_id)"
        }
     }
   ]
  }
```
- レスポンス本文のコンテンツ：JSON

2番目の「内線メッセージ」ブロックを選択します。前のブロックである「URL取得」により、2つのシナリオ変数 $(fetchURLResultCode) および $(fetchURLResultBody) が設定され、イベントの作成が成功したかどうかを示します。結果コードが -1 の場合、これは成功を意味します。失敗した場合は、結果本文からエラーの原因を特定できます。指示に従ってブロックを設定してください：
- ユーザー名：このシナリオをテストする際に、エージェントデスクトップで使用するエージェントのユーザー名です。この例では、ユーザー名「administrator」のアカウントを使用しています。
- メッセージ：「URL取得」ブロックによって設定されるシナリオ変数の値を表示するメッセージを設定します：
```
Code: $(fetchURLResultCode)
Body: $(fetchURLResultBody)
```

「*URL取得*」ブロックからのデバッグ情報を用いて、「*内線メッセージ」*ブロックを設定します

「エージェント検索」および「チャット接続」は、既定の設定のままにしておいてください。
シナリオを保存します。

4. カスタムイベントが GA4 に送信されることを確認する

以下のステップに従い、Google アナリティクスアカウントでイベントが受信されていることを確認してください。

前の手順で作成された内線メッセージを受信するように設定されたユーザーの認証情報を使用して、エージェントデスクトップにログインします。
実際の顧客と同じように、ウェブサイトからウェブチャットセッションを開始します。
チャットを開始すると、エージェントデスクトップ内に内部メッセージが表示されます。これらのメッセージは、正常に機能しているかどうかを確認するのに役立ちます。具体的には、以下の内容を示すメッセージを確認してください。
- クライアント ID およびセッション ID の受信：クライアント ID およびセッション ID の取得に成功したことを確認するメッセージ
- URL取得の成功：-1という結果コードを示すメッセージです。これは、「URL取得」ブロックが正常に実行されたことを具体的に示しています。異なる結果コードが表示された場合は、「URL取得」ブロックの設定をトラブルシューティングしてください。

セッション ID、クライアント ID、結果コード、および空の結果本文を示す内線メッセージ

Google アナリティクスのダッシュボードで、レポート＞リアルタイム概要に移動し、「イベント名別のイベント数」ウィジェットでカスタムイベントを確認してください。

カスタムイベントが表示された Google アナリティクスのリアルタイムダッシュボード

その他の考慮事項

データプライバシー：Google アナリティクスにデータを送信する際は、データプライバシーに関する規制に留意してください。GDPR や CCPA などの規制を確実に遵守するようにしてください。機密データを GA4 に送信する前に、匿名化やハッシュ化を行うことを検討してください。
追加のイベント：最初のチャット接続だけでなく、それ以上の情報を追跡できるように機能を拡張しましょう。エージェントの割り当て、チャットの継続時間、顧客満足度評価、特定の会話の節目など、重要なインタラクションポイントに関するイベントを送信してください。
カスタムディメンションとカスタム指標：GA4でカスタムディメンションとカスタム指標を使用し、チャットインタラクションをより詳細に分析できるようにしてください。これらを使用することで、話し合われた製品カテゴリーや顧客セグメントなど、ビジネスニーズに特化した情報を取得できます。
テストと検証：正確なデータ収集を確保するため、実装を徹底的にテストしてください。GA4のリアルタイムレポートを使用して、テスト中にイベントが正しく送信されていることを確認してください。また、時間の経過に伴うデータ品質をモニタリングし、不一致を識別して対処してください。

< 前へ | 次へ >