応用機能・設定を知りたい
タグ設置・外部システムとの連携方法

こちらではタグ設置・外部システムへの連携方法を紹介します。

※APIを使った外部連携についてはシナリオオプションが必須です。
※外部サービスに対する利用方法のサポートは対象外です。

１．タグ設置

・Google サイト
・WiX
・MakeShop
・ショップサーブ
・楽楽リピート
・Shopify
・EC-CUBE4
・HubSpot
・Garoon
・kintone

２．Google Analytics

２－１．概要

MediaTalk上で発生した各種イベント（ユーザ操作など）は、GoogleAnalyticsのイベントトラッキングという手法を使って、お客様のGoogleAnalytics(※)に自動的に記録することが可能です。

※Google Analyticsとは・・・Googleが提供しているアクセス解析ツールです。

●設定方法

※タグマネージャを利用してタグを入れているお客様は追加で別途設定が必要となります。
（詳細は、本ページ下段の「４．Googleタグマネージャをご利用のお客様」に記載しております。）

１．ウィジェットを表示させているページに「Google タグ」を設置してない場合、タグを設置します。
２．Google Analyticsの管理画面にログインします。
３．使用しているGoogle Analytics 4のプロパティを開き、「カスタム定義」をクリックします。

３．カスタムディメンションタブで「カスタムディメンションを作成」をクリックします。

４．イベントパラメータ「event_category」「event_label」を新規追加します。
　　・ディメンション名：識別できる分かりやすい名称を設定
　　・範囲　　　　　　：イベントを選択

●イベントトラッキング設定値

・eventCategory（イベント カテゴリ）　：        すべてのイベントにおいて「MediaTalk」
・eventAction（イベント アクション） 　：        下記一覧を参照
・eventLabel（イベント ラベル）　　 　 ：        下記一覧を参照
・eventValue（イベントの値）　　　　　：        すべてのイベントにおいて「1」

●イベントアクション一覧

アクション	アクション詳細	ラベル
clickMaximize	チャットウィンドウがサイト訪問者のクリック操作により最大化された数。	イベントが発生したページのURL
clickMinimize	チャットウィンドウがサイト訪問者のクリック操作により最小化された数。	イベントが発生したページのURL
clickClose	サイト訪問者のクリック操作によりチャットウィンドウが閉じた数。（「×」クリック数）	イベントが発生したページのURL
sendChat	サイト訪問者がチャットを利用した数（自由入力、選択肢の選択のいずれであってもカウントします）。 ※1回の訪問で1回のみカウント	イベントが発生したページのURL
autoChat	サイト訪問者に自動返信メッセージを送信した数。（※1回の訪問で1回のみカウント）	イベントが発生したページのURL
clickLink	サイト訪問者がリンクをクリックした数。	リンク先URL
clickMail	サイト訪問者がメールリンクをクリックした数。	宛先
manualChat	オペレータがチャット対応した件数。 ※入室から退室までを1回のチャット対応としてカウント	チャット対応した（入室した）オペレータ名
sorryMsg	オペレータ不在または営業時間外などサイト訪問者にsorryメッセージを送信した数。	イベントが発生したページのURL

２－２．リアルタイムでの確認

こちらでは、リアルタイムレポートを確認する方法について説明します。
リアルタイムレポートでは、過去30分間のユーザー数や各イベントの発生数を一覧で確認できます。
※サイドメニューバーの［レポート＞リアルタイム］から確認が可能です。
（チャットのみのアクティビティに絞って確認することはできません）

２－３．サマリの確認

こちらでは、各イベントのサマリを確認する方法について説明します。
※ 集計後でないとデータが反映されません（最大24h）

１．サイドメニューバーの［エンゲージメント > イベント］をクリックする。

２．詳細を確認したいイベント名をクリックする。

３．詳細ページのイベントカテゴリ「MediaTalk」にて、MediaTalkでのイベントアクションを確認することができます。
これらの結果を分析し、効果測定にご活用ください。

２－４．Googleタグマネージャをご利用のお客様

こちらでは、Googleタグマネージャを利用してタグを設置されたお客様へ、MediaTalkのイベントアクションを計測する方法を説明します。

１．２－１．概要に記載されているGA4の「設定方法」の手順２．以降を実施します。
２．ウィジェットを表示させているページに「GTMタグ」を設置してない場合、タグを設置します。
３．Googleタグマネージャの管理画面にログインします。
４．変数のタブを開き、ユーザ定義変数の「新規」をクリックします。

５．変数のタイプに「データレイヤーの変数」を選択します。
　　・「event_category」「event_label」の2つの変数を新規追加する
　　・データレイヤーのバージョン：「バージョン2」を設定

６．トリガーのタブを開き、「新規」をクリックします。

７．トリガー設定でMediaTalkのウィジェットが使用しているイベントを登録します。
　　シナリオ設定でイベント（例：conversion）を追加した場合は、こちらも追加ください。
　　※使用しているイベントは２－１．概要の「イベントアクション一覧」から確認できます。

８．タグのタブを開き、「新規」をクリックします。

９．「Googleアナリティクス: GA4イベント」を選択します。
　　・使用しているGoogle Analytics 4の測定IDを設定
　　・イベント名に{{Event}}を設定
　　・イベントパラメータは下記の通りに設定
　　　①パラメータ名：event_category　値 ：{{event_category}}
　　　②パラメータ名： event_label　　 値 ：{{event_label}}
　　・トリガーに手順７で登録したトリガーを全て設定

１０．［ワークスペース］へ戻り［公開］をクリックすると設定が完了します。
　＊念のため、［公開］右側のプルダウンより表示される［プレビュー］を確認後に
　　公開するようにしましょう。

３．Google AnalyticsでのCV計測方法①（MediaTalkの設定）

３－１．概要

シナリオ設定内の機能でGoogle AnalyticsでのCV計測の設定をすると、シナリオ設定上でコンバージョンしたチャットの成果（申し込み、資料請求など）をGoogle Analyticsのイベントで計測することができます。

３－２．設定方法

まずMediaTalkの管理画面の [チャットボット設定] > [シナリオ設定] より、Google AnalyticsでCV計測をしたいシナリオを選択し、[外部連携] のアクションを追加します。
※コンバージョンとするアクション以降に追加してください。

連携タイプはスクリプトを選択し、赤枠内に以下のコードを入力します。

var sendGAEventTrack = function(eventAction, eventLabel, eventValue) {  
     if (typeof gtag === 'function') {
        // GA4 or UNI
        gtag('event', eventAction, {
          'event_category': 'MediaTalk',
          'event_label': eventLabel,
          'value': eventValue
        });
      }  else if (typeof gtag !== 'function' && typeof ga !== 'function' && typeof dataLayer === 'object' && typeof dataLayer.push === 'function') {
        // GTM
        dataLayer.push({
          'event': eventAction,
          'event_category': 'MediaTalk',
          'event_label': eventLabel,
          'value': eventValue
        })
      } else if (typeof ga === 'function') {
        // UNI
        ga(function() {
          var tracker = ga.getAll()[0];
          console.log(tracker.get('name'));
          tracker.send('event', 'MediaTalk', eventAction, eventLabel, eventValue);
        });
        ga('send', 'event', 'MediaTalk', eventAction, eventLabel, eventValue);
      }
 };
sendGAEventTrack('conversion', 'ここにイベントラベル名を入力して下さい', 1);

（入力例）

以上の設定を追加することにより、Google Analyticsの下記項目にて
シナリオ設定上でコンバージョンした件数の計測が可能になります。

・eventCategory（イベント カテゴリ）      ：        MediaTalk
・eventAction（イベント アクション）       ：        conversion
・eventLabel（イベント ラベル）                ：        上記コード内で設定した値

４．Google AnalyticsでのCV計測方法②（Google Analyticsの設定）

こちらではGoogle Analyticsでの設定方法をご紹介いたします。
※MediaTalk側の設定方法はこちらを参照ください。

４－１．設定方法

１．［管理＞イベント］からイベントタブを開きます。

２．既存のイベントにて、コンバージョンとして計測したい内容の「コンバージョンとしてマークを付ける」をONにする

４－２．計測結果の確認

１．［レポート＞エンゲージメント＞コンバージョン］をクリックする。

２．コンバージョンに設定したものが一覧で確認でき、イベント名をクリックすることで詳細の確認が可能です。
※詳細ページのデフォルトチャネルグループ右の「＋」より、イベントラベルの追加が可能です

５．広告

外部連携のスクリプト機能でコンバージョン トラッキングを設定すると、広告経由でのチャットの成果（申し込み、資料請求など）をGoogle 広告（旧Google AdWords）及びYahoo!プロモーション広告の管理画面で計測することができます。

MediaTalkでGoogle 広告及びYahoo!プロモーション広告のコンバージョン トラッキングを設定する方法を説明します。

５－１．設定方法

ご利用のツール名をクリックして頂くと該当のページにジャンプします。

• Google広告について
• Yahoo!プロモーション広告について

５－２．Google広告について

まずMediaTalkの管理画面の [チャットボット設定] > [シナリオ設定] より、コンバージョン トラッキングを設定したいシナリオを選択し、[外部連携] のアクションを追加します。

連携タイプはスクリプトを選択し、赤枠内に以下のコードを入力します。

/* Google広告トラッキング */
 var img;
 google_conversion_id = 'YOUR_CONVERSION_ID';
 google_conversion_label = 'YOUR_CONVERSION_LABEL';
 google_conversion_value = 0;
 img = new Image(1, 1);
 img.id = 'conversionCaller'+google_conversion_id;
 img.src = 'https://www.googleadservices.com/pagead/conversion/'+google_conversion_id+'/?label='+google_conversion_label+'&script=0';
 document.body.appendChild(img);

コード内の YOUR_CONVERSION_ID と YOUR_CONVERSION_LABEL はお客様自身で設定が必要な値になります。

以下の手順に従ってこれらの値を取得します。

1. Google 広告アカウントにログイン後、 [ツール] > [コンバージョン] を選択します。

2. 左上の丸い [+] ボタンをクリックします。

3. [ウェブサイト] を選択します。

4. 本画面でウェブサイトのコンバージョン アクションの作成を行います。
お客様の用途に応じて各項目の設定を入力して下さい。入力後、 [作成して続行] をクリックします。

5.  [自分でタグをインストールする] を選択します。

6. ページ下部の [イベントスニペット] において [ページの読み込み] を選択し、
YOUR_CONVERSION_ID （以下①、AW-以降の数字）と YOUR_CONVERSION_LABEL （以下②、 スラッシュ記号以降の英数字）をコピーして [次へ] を選択します。

7. これらの YOUR_CONVERSION_ID （①）と YOUR_CONVERSION_LABEL （②）の値をコード内に貼り付け、設定完了です。

（設定例）

 var img;
 google_conversion_id = '835699059';
 google_conversion_label = 'N85BCN3AgloBEPOCv44D';
 google_conversion_value = 0;
 img = new Image(1, 1);
 img.id = 'conversionCaller'+google_conversion_id;
 img.src = 'https://www.googleadservices.com/pagead/conversion/'+google_conversion_id+'/?label='+google_conversion_label+'&script=0';
 document.body.appendChild(img);

６．チャットツール

６－１．Slackへの通知方法

１．概要

外部連携のAPI連携機能で下記の手順に従ってSlack通知の設定をすると、
ヒアリングのアクションでサイト訪問者から入力された内容をSlackに通知を出すことが可能になります。

これによりメール送信アクションと同時に、Slackにてお客様からのお問い合わせに気付くことができます。

２．設定方法

1.MediaTalkの管理画面の [チャットボット設定] > [シナリオ設定] より、Slack通知を設定したいシナリオを選択し、[外部連携] のアクションを追加します。
※ [ヒアリング] アクション以降に追加をして下さい。

2.①～④の各項目の入力内容について説明致します。

（入力例）

①連携先URL

下記手順に従ってURLを発行します。

・Slackのアプリケーション追加ページより「incoming-webhooks」を検索します。

・[設定を追加]をクリックします。
・MediaTalkからの通知を送信するチャンネルを選ぶ画面が表示されるので、選択し
[Incoming Webhook インテグレーションの追加] をクリックします。

・発行された WebhookURL を①連携先URL部分に貼り付けます。

②メソッド種別

　POST にチェックを入れます。

③リクエストヘッダー

名前、値にそれぞれ下記を入力します。

名前	Content-type
値	application/x-www-form-urlencoded

④リクエストボディ

payload={"text":"通知内容をこちらで自由に編集してください。変数の使用も可能です。"}
（設定例）
payload={"text":"MediaTalkから以下の問い合わせがありました。対応をお願いします。
 {{会社名}}
 {{名前}}
 {{メールアドレス}}
 {{問い合わせ内容}}"}

上記を設定すると、Slack側には下記のように通知が届きます。

Slack通知が問題なく行われることを確認し、設定完了です。

有人チャットリクエスト時等、外部システムへ通知を出すことが可能なため、
スマホでも通知が見れるので対応スピードが上がります。

・Slackへの通知方法
・Chatworkへの通知方法

※他にも、Teams、Googleハングアウトなどで実績があります。

６－２．Chat workへの連携方法

１．概要

外部連携のAPI連携機能で下記の手順に従ってChatwork通知の設定をすると、
ヒアリングのアクションでサイト訪問者から入力された内容をChatworkに通知を出すことが可能になります。

これによりメール送信アクションと同時に、Chatworkにてお客様からのお問い合わせに気付くことができます。

２．設定方法

1.MediaTalkの管理画面の [チャットボット設定] > [シナリオ設定] より、Chatwork通知を設定したいシナリオを選択し、[外部連携] のアクションを追加します。
※ [ヒアリング] アクション以降に追加をして下さい。

2.①～⑤の各項目の入力内容について説明致します。

（入力例）

①連携先URL

下記を入力します。

https://api.chatwork.com/v2/rooms/※/messages

※部分にはMediaTalkからの通知を送信したいチャットルームID（RID）の数字を入力して下さい。
チャットのルームID（RID）の確認方法はこちら

②メソッド種別

POST にチェックを入れます。

③リクエストヘッダー

名前、値にそれぞれ下記を入力します。

名前	X-ChatWorkToken
値	下記手順で発行したAPIトークンを入力

下記サイトにアクセスし、Chatworkのパスワードを入力します。
https://www.chatwork.com/service/packages/chatwork/subpackages/api/token.php

パスワード入力後、赤枠内にAPIトークンが発行されます。
こちらのAPIトークンを使用します。

④リクエストヘッダー

　名前、値にそれぞれ下記を入力します。

名前	Content-Type
値	application/x-www-form-urlencoded

⑤リクエストボディ

body	通知内容をこちらで自由に編集してください。変数の使用も可能です。

（設定例）

body=MediaTalkから以下の問い合わせがありました。対応をお願いします。
 {{会社名}}
 {{名前}}
 {{メールアドレス}}
 {{問い合わせ内容}}

上記を設定すると、Chatwork側には下記のように通知が届きます。

Chatwork通知が問題なく行われることを確認し、設定完了です。

７．CRMツール

下記外部システム・方法での連携実績がございます。
※マニュアルは順次作成予定です。

・MediaTalkで新規リード獲得時に、外部システムに新規リードを登録できます。
⇒Salesforce、Marketo、Pardot など

８．各種カレンダー

８－１．概要

「Google カレンダー」と「Office365 カレンダー」にて、各カレンダーの任意のアカウントの予定に対して下記が実現可能です。

・空いている日時の中から、サイト訪問者に希望日時を選択させる
・選択された希望日時に、MediaTalkがカレンダーへ自動で予定を登録する

８－２．設定方法

1．MediaTalkの管理画面の [チャットボット設定] > [シナリオ設定] より、カレンダー連携を設定したいシナリオを選択し、[外部連携] のアクションを追加します。

2．①～④の各項目の入力内容について説明いたします。

①連携タイプ
外部サービスとの連携をするため、[外部サービス]を選択します。

②連携サービス
連携する外部サービスを選択します。

③連携方式
連携の方式を設定します。

・参照・登録：外部カレンダーの参照と登録をどちらも実行します。
・参照のみ(スケジュールを確認する)：外部カレンダーの参照のみ実行します。
・登録のみ(スケジュールを登録する)：外部カレンダーの登録のみ実行します。

※連携方式が[登録のみ]の場合、[ヒアリングor一括ヒアリングor入力フォームor外部連携(外部サービスの参照のみ)]アクション以降に、[外部連携(外部サービスの登録のみ)]アクションを追加して下さい。

④連携するアカウントにログインする
各アカウントにログインし、連携先を登録します。

・Googleカレンダーの場合
[連携するGoogleアカウントにログインする]を選択し、連携するアカウントにログインします。

※Google アカウントログイン時の警告について
Google側の審査対応の影響により、ログイン時に以下の画面が表示されることがあります。
以下の操作を実施し、設定を進めてください。

[詳細]を選択し、下記図の赤枠部分をクリックします。

その後、[許可]を選択することで連携が可能となります。

・Office365 カレンダーの場合
[連携するMicrosoftアカウントにログインする]を選択し、連携するアカウントにログインします。

3.連携先のカレンダーを登録後、入力フォームの内容を設定します。

■参照するカレンダー名
参照するカレンダーを選択します。

■日付ヒアリング設定
ここでは日付のヒアリング設定を行います。

※プレビュー画面

日付変数名	ここで設定した変数名にサイト訪問者の回答した日付が保存されます。
日付質問内容	カレンダー選択の際にチャットボットが自動送信する質問内容を設定します。
過去日を選択できなくする	サイト訪問日より過去の日付を選択できなくします。 (過去の日付を選択できるようにする場合はチェックを外します)
当日から＿日以降を選択できるようにする	サイト訪問日から設定した日数以降を選択できるようにします。例えば、当日は選択できなくし翌日以降から選択可能とする場合は「1」と設定します。
当日から＿日以降を選択できないようにする	サイト訪問日から設定した日数以降を選択できないようにします。
選択できない日付を設定する（定休日など）	選択できない曜日や日付（または選択できる日付）を設定することができます。
デザインをカスタマイズする	カレンダーのデザイン（配色）を自由にカスタマイズすることができます。

■時刻ヒアリング設定
ここでは時刻のヒアリング設定を行います。

※プレビュー画面
・連携したカレンダーを参照し、空いている日時のみ表示されます。
・時刻は1時間ごとの表示です。

時刻変数名	ここで設定した変数名にサイト訪問者の回答した時刻が保存されます。
時刻質問内容	時刻選択の際にチャットボットが自動送信する質問内容を設定します。
デザインをカスタマイズする	時刻のデザイン（配色）を自由にカスタマイズすることができます。

■外部カレンダー登録情報設定
外部カレンダーへの登録内容を設定します。
※連携方式が[参照のみ(スケジュールを確認する)]の場合表示されません

件名	ヒアリングした情報を外部カレンダーに登録する際の件名を設定します。
メモ	ヒアリングした情報を外部カレンダーに登録する際のメモを設定します。

■入力内容の確認を行う

入力内容の確認を行う	質問内容を全て聞き終えた後に、サイト訪問者に確認メッセージを送ることが出来ます。 確認内容：確認メッセージとして送信するメッセージを設定します。 選択肢(OK)：OK（次のアクションを実行）の場合の選択肢の名称を設定します。 選択肢(NG)：NG（再入力）の場合の選択肢の名称を設定します。 タイプ：回答形式を設定します。 表示形式：[ラジオボタン]の場合、吹き出しの表示有無を選択できます。

■連携するMicrosoft/Googleアカウントを変更する
連携するアカウントを変更することができます。

※連携方式が[登録のみ(スケジュールを登録する)]の場合（設定例）

※時間は必ず半角で「10：00～11：00」(赤枠内参照)のように記入して下さい。

※[ヒアリングor一括ヒアリングor入力フォームor外部連携(外部サービスの参照のみ)]アクション以降に、[外部連携(外部サービスの登録のみ)]アクションを追加し、下記図のように、日付変数名、時刻変数名、件名、メモのみ設定して下さい。

4.サイト訪問者からのヒアリング後、下記のようにカレンダーに登録されます。

・Googleカレンダーの場合(例)

・Office365 カレンダーの場合(例)