ハウツー記事

GTMでFacebook Webチャットを追加する方法

Gerardo Salandra
最高経営責任者(CEO)。Respond.io
2018年10月18日

Facebook Customer Chat Plugin は、あなたのウェブサイト上にFacebook Messenger を直接配置する信じられないほどの無料のライブチャットプラグインです。従来のライブチャットベンダーのように、Facebook は、サポートスタッフが訪問者、ユーザー、および顧客とチャットできるFacebook Inbox と呼ばれるバックエンドを提供します。他のライブ チャットとは異なり、Facebook は、あなたの連絡先にメッセージを返すことができ、彼らがあなたのウェブサイトを去った後でも、彼らはFacebook Messenger アプリであなたのメッセージを受信します。問題は、Google タグマネージャでFacebook ウェブチャットをインストールすることができないことです。

FacebookのウェブチャットコードがGTMで動作しない理由

Google タグマネージャを使用して、またはWordpressアドオンを介して埋め込みコードを管理したい場合は、これが不可能であることがわかりますFacebook カスタマーチャットプラグインコードが提供するFacebook 。

The code provided is an HTML snippet, a <div> that must be pasted on every site page individually. This is a problem if you have 100 pages. The obvious option is add to the Facebook Customer Chat script to Google Tag Manager (GTM).

Facebook カスタマーチャットSDKはGoogle Tag Managerと連携しません。
Facebook カスタマーチャットSDK

Facebook カスタマーチャットコードは、Facebook SDKとカスタマーチャットコードを貼り付ける必要があるため、Facebook Web Chat withGoogle Tag Manager (GTM)をインストールする現実的な方法は存在しません。Facebook Customer Chat SDKは、Google Tag Manger (GTM)と共に動作することができないため、 Tag Manger (GTM)は、 Customer Chat SDKと一緒に動作します。

Facebook カスタマーチャットコード

この埋め込みコードを、google タグマネージャで使用できるスクリプトに変換する方法が必要です。

Facebook Web Chat WithGoogle Tag Managerのインストール方法

Facebook Customers Chat Plugin をGoogle Tag Manager (GTM) にインストールするには、次のものが必要です。

1 Rocketbots プラットフォームにログイン し、スペースを作成します。Facebook ページを接続するためのスペースが必要です。

GTMを使用してウェブサイトにFacebook カスタマチャットプラグインを追加するために、すでに1つを持っていない場合はスペースを作成します。
スペースがない場合は、スペースを作る

2Facebook Messenger , 選択し、次へを押して、接続したいFacebook ページを選択します。

選択Facebook Messenger  GTMを使用してウェブサイトにFacebook カスタマーチャットプラグインを追加するには
選択Facebook Messenger

3 チャンネルの詳細を記入 し、追加をチェックFacebook's Customer Chat Widget to your website?

オプションのCustomer ChatプラグインをGTMを使用してあなたのウェブサイトに追加するためのチェック
オプションのCustomer Chatプラグインを追加するためのチェック

4.ドメインをホワイトリスト化し、色を選択し 、詳細設定を記入する。

ホワイトリストのドメイン&Facebook カスタマーチャットプラグインをあなたのウェブサイトに追加する色を選択Facebook カスタマーチャットプラグイン
ホワイトリストに登録されたドメインと色の選択

Facebook Customer Chat Plugin からのコンタクトの場合、この参照コードにより、独自のオンボーディングオートメーションを開始することができます。

Google タグマネージャでFacebook カスタマチャットプラグインをウェブサイトに追加するための詳細設定の調整
アドバンスド・セッティングの調整

5.スクリプトをコピーします。

Google Tag Manager を使ってFacebook Customer Chat Plugin をあなたのウェブサイトに追加するスクリプトをコピーします。
コピー・ザ・スクリプト

6.スクリプトをカスタムHTMLタグとしてGTMに挿入します。

スクリプトを貼り付けて、Facebook カスタマチャットプラグインをGoogle タグマネージャであなたのウェブサイトに追加します。
スクリプトの貼り付け

7.RocketbotsのDoneをクリックして、ページを確認します。

Google Tag Manager でFacebook Customer Chat Plugin を追加するためにあなたのサイトをチェックします。
サイトの確認

さて、それはそんなに難しいことではありませんでしたか?Rocketbots プラットフォームを使用すると、スクリプトとして GTM と Wordpress アドオンで実際に動作する新しいFacebook 顧客チャット コードを生成するのがはるかに簡単で、はるかに苦痛がないことがわかります。

Facebook Customer Chat Plugin と共に、Rocketbots プラットフォームでコンタクトを管理することもより簡単になることがお分かりいただけるでしょう。Rocketbots の AI はFacebook カスタマーチャットでのあなたの会話から学習し、学習すればするほど、より多くの役立つスマートリプライ、類似の質問に対するあなたの過去の回答に基づいているワンクリックリプライを配信するようになります。学習が進めば、AIがあなたの回答を自動化することも可能になります。

タグ
クリップボードにコピーされました

始める準備はできていますか?

ありがとうございました。サインアップフォームに移動しています。
おや?何かが間違っていました。ブラウザを更新してもう一度試してみてください。
ありがとうございました。あなたの投稿を受け取りました。
おっと!?フォームの送信中に何か問題が発生しました。
14日間の無料トライアルを開始