Googleタグマネージャーを使用して、WebサイトへFlipdeskの基本タグやコンバージョンタグ、その他オプションタグを設置する方法を説明します。
※カートシステムをご利用の場合は、カートシステムで公開されている手順でお試しください。1. 基本タグの設置
Googleタグマネージャーの「カスタムHTML」を使用してFlipdeskの基本タグを追加し、基本的には導入するWebサイトの全ページに設置します。
基本タグの設置手順
1. Googleタグマネージャーにログインして「タグ」メニューから「新規」をクリックし、
「タグの設定」をクリックします。
2. 「タグタイプを選択」から「カスタムHTML」を選択します。
3. 貴社専用の基本タグを赤枠内に貼り付けます。
※基本タグは「管理画面 > タグ管理 > 基本タグ」よりご確認いただけます。
※タグ名は管理がしやすい名前を付けていただいて、問題ありません。
Googleタグマネージャーで基本タグを設置すると、scriptタグのdata属性やdeferが削除されてしまう場合があります。
基本タグ設置後、ブラウザ上のソースで確認した際に属性が消えている場合、Googleタグマネージャーの「カスタムHTML」で下記のスクリプトを記述してください。設置後は、動作することをご確認ください。
<script language="javascript" charset="UTF-8" type="text/javascript">
var script = document.createElement('script');
script.type = 'text/javascript';
script.language = 'javascript';
script.src ='https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★★★';
script.defer = true;
document.head.appendChild(script);
</script>
※api_token=★★★★★
の★部分は企業様ごとにユニークになりますので、管理画面よりご確認ください。
- 会員情報連携(ファイル連携)をしている場合
data-sync-user-id
属性が削除されてしまうケースがあります。- 下記のスクリプトを記述してください。
<script language="javascript" charset="UTF-8" type="text/javascript">
var script = document.createElement('script');
script.type = 'text/javascript';
script.language = 'javascript';
script.src ='https://api.flipdesk.jp/chat_clients/flipdesk_chat.js?api_token=★★★★★';
script.setAttribute('data-sync-user-id', '☆☆☆☆☆');
document.head.appendChild(script);
</script>
※api_token=★★★★★
の★部分は企業様ごとにユニークになりますので、管理画面よりご確認ください。
※'data-sync-user-id', '☆☆☆☆☆'
の☆部分は貴社サイトで使用している会員IDに当たる変数(置換文字や独自タグ)が入ります。
4. 「詳細設定 > タグ配信の優先度」に「1」を入力します。
5. 「トリガー」をクリックし、「トリガーの選択」から「ページビュー」を選択します。
6. 「このトリガーの発生場所」で「すべてのページビュー」にチェックが入っていることを
確認します。
7. 「保存」ボタンをクリックして、基本タグの設定を保存します。
「公開」ボタンのクリックし忘れにご注意ください!
- 「保存」ボタンをクリックするだけでは、設定のみが完了している状態です。
- Flipdeskのタグをサイト上に発火させるためには、必ず「公開」する必要があります。
- 設定後は必ず3. 設定したタグを公開をご確認ください。
2. コンバージョンタグの設置
Googleタグマネージャーの「カスタムHTML」を使用してFlipdeskのコンバージョンタグを追加し、購入完了ページやお申し込み完了ページなどのサンクスページに設置します。
コンバージョンタグの設置手順
1. Flipdesk管理画面へログインして「タグ管理 > コンバージョンタグ」より、設置する
「コンバージョンタグ」をコピーします。
※新フォーマットを推奨
2. Googleタグマネージャーにログインして「タグ」メニューから「新規」をクリックし、
「タグの設定」をクリックします。
3. 「タグタイプを選択」から「カスタムHTML」を選択します。
4. 手順1でコピーしたFlipdeskのコンバージョンタグを「HTML」内に貼り付けます。
※タグ名は管理がしやすい名前を付けていただいて、問題ありません。
5. 手順4で貼り付けたコンバージョンタグ内に、コンバージョンの詳細データを取得するための
パラメータ(変数・置き換え文字)を追記します。
※コンバージョンで使用する変数のマニュアルはこちら
使用されているシステムごとに変数や置き換え文字が異なります。
- コンバージョンタグで取得したデータのパラメータが用意されていない場合は、使用されているシステム側での開発が別途必要になる場合があります。
※上記に当てはまる場合は、システムのご担当者様にご確認ください。 - 計測するコンバージョンのタイプによって、追記するパラメータが異なります。
- カートシステムをご利用の場合、各カートシステムで使用されている変数をご確認ください。
※カートシステムの変数については、ご利用中のカートシステムのご担当者様にご確認ください。
6. 「詳細設定 > タグ配信の優先度」に「2」を入力します。
※基本タグの配信優先度より大きい数字にしていただく必要があります
7. 「トリガー」をクリックし、「トリガーの選択」から「ページビュー」を選択します。
8. 「このトリガーの発生場所」で「一部のページビュー」にチェックが入っている状態で、
「コンバージョン完了ページ」に設置できるよう赤枠内でページを指定します。
9. 「保存」ボタンをクリックして、基本タグの設定を保存します。
カートシステムをご利用のお客様
- カートシステムで用意されている変数は、Googleタグマネージャー上では動作しない場合があります。
- 変数を使用した場合は、必ず動作確認を行なってください。
3. 設定したタグを公開
Googleタグマネージャー上で設定したタグをWebサイト上へ公開します。
この対応を忘れてしまった場合、Flipdeskの各種タグはWebサイト上に設置されませんのでご注意ください。
公開手順
1. 「変更の送信 > 送信設定」にて、「バージョンの公開と作成」を選択します。
2. 「バージョン名」や「バージョンの説明」の記入は任意です。
3. Googleタグマネージャーの画面右上にある「公開」ボタンをクリックします。
![設定したタグの公開](https://support.materialdigital.jp/hs-fs/hubfs/image-png-Jun-27-2024-11-02-08-4488-AM.png?width=688&height=360&name=image-png-Jun-27-2024-11-02-08-4488-AM.png)