Google Tag ManagerはGoogleがマーケティングプラットフォームで提供する無料サービスの1つで、コードを修正しなくてもウェブサイトに埋め込めれたタグを管理するツールで多様なマーケティングを支える強力なツールです。
マーケティングキャンペーンの作成時、スタートイベントや追加イベントを多様に設定できるためです。
特にビルダー社の管理画面で連携する顧客情報よりもより多くの顧客の行動を追跡できます。（例：ページ70%スクロールダウン、カートボタンクリックなど）
GTMを利用するには、チャネルトークを設置したサイトにGTMを設置する必要があります。以下の手順に従ってGTMを設置してください。
タグマネージャーの管理画面にログインし [アカウント作成] ボタンをクリックします。
アカウント情報を入力します。
アカウント設定：基本的なアカウント内容を記載してください。
コンテナ設定
コンテナは1つの作業環境だと考えてください。1つのアカウントに複数のコンテナを作成できます。作業者またはウェブ/アプリ環境別に複数のコンテナを作ることができます。
作成したアカウントのGTMスクリプトをホームページに挿入してください。
[テンプレート] - [タグ テンプレート] エリア右上にある [検索ギャラリー] をクリックします。
右上の検索アイコンをクリックして [Channel.io] を検索し [ワークスペースに追加] を押して、テンプレートを追加します。
追加が完了すると以下のように表示されます。
トリガーはイベントが発動する「条件」となります。
例えば「カートに追加」イベントをチャネルトークに反映させるためには顧客が「カート」ボタンを押す必要があります。「ページ接続」イベントは顧客がページに接続しなければ発動しません。顧客がカートボタンをクリックすること、顧客がページに接続することを「トリガー」と考えください。
チャネルトークで活用できるトリガーにはスクロール(Scroll)トリガーとクリック(Click)トリガーがあります。
スクロールトリガーは顧客が「スクロール」行動を追跡して利用するトリガーです。例えば、顧客が「ページのスクロールを25％程度下げたとき」をターゲットにすることができます。
左トリガーメニューを選択し [新規] をクリックします。
トリガーの名前を入力し、トリガー構成領域をクリック→トリガータイプの中から「スクロール深さ」を選択してください。
縦または横スクロール深さを選択し、トリガー実行条件およびページ動作条件を設定後に保存してください。 以下のように設定した場合、GTMをインストールしたウェブサイトのすべてのページで、顧客が縦にスクロールを25％下げたときにトリガーが動作します。
クリックトリガーは顧客の「クリック」する行動を追跡して活用します。例えば、顧客が「特定のボタンをクリックしたとき」をターゲットにすることができます。
クリックトリガーを作成するには、クリックするボタンまたは領域を指定する必要があります。その中でよく使われるのはurl(どのurl をクリックした時)、class(どのclass領域をクリックした時)、id(HTMLタグのid値)です。
サイトでクリックトリガーに設定する領域を確認してみましょう。
目的の領域でマウス右クリック→検証で確認するか、
ご利用のブラウザの設定→デベロッパーツール内のElements項目で確認できます。
例えば、下の画像のように、CARTというボタンの上でマウス右クリック→チェックを押したときにtext値とID値が確認されます。text値は、他の領域に同じ単語がある場合、正しく動作しないことがあり、ID値でターゲットすることをお勧めします。
id値を利用する場合： actionCart値を利用すればよい。
class の値が確認されたら、浮かぶことなく完全な形の値を記載してください(ex. sub_cart)。
詳細については、以下の例で説明します。
作成したトリガーを使ってタグを作るとチャネルトークにイベントを送ることができます。タグはトリガーが発生した時にどのようなアクションをするかにおいての「内容」です。
先に顧客がカートボタンをクリックしてトリガーが作動(イベントが発生)した場合、このイベントを送信してくれる機能をタグ付けします。
上で作成したスクロールトリガーとクリックトリガーをタグ付けしてイベント設置をしてみましょう！
「顧客が商品ページで30％程度スクロールしたとき」のイベントを作成する例です。
左のトリガーメニューを選択 → [新規] をクリックします。
トリガーの名前を入力し、トリガーの設定領域をクリック → トリガータイプの中から [スクロール距離] を選択します。
縦スクロールの距離30％を選択し、トリガー実行条件はウィンドウの読み取り(gtm load)に設定します。
タグメニューを選択 → 右側の [新規] ボタンをクリックします。
タグの名前を入力し、タグの設定領域をクリック → タグのタイプからChannel.ioのテンプレートを選択します。
以下のように内容を入力してください。
Action：行動を追跡して送信できるようにTrack(Send Event)に設定します。
Event Name：イベント内容を確認しやすい名前を設定してください。ex）scroll30
Event Property
Keyにはurlを入力し、Value値には横の＋ボタンをクリックしてPage URLを追加してください。
→これによりイベントがチャネルトークに送信されるときにどのURLで発生したのかが分かります。
先ほど作成したスクロールトリガーを呼び出してから保存すると完成したイベントを確認できます。
新しいウィンドウで開くデモサイトで実施にイベントを発生させてみることができます。
[プレビュー] をクリックするとTag Assistantウィンドウが開き、GTMがインストールされているWebサイトのアドレスを入力して [Connect] をクリックします。
接続が完了するとイベントをテストできるサイトが新しいウィンドウで開きます。
指定したトリガーアクションを直接実行してみてください。
実際にトリガーがうまくいくと、Tag Not Fired→Firedに移動します。
プレビューテストが完了したら、元のウィンドウに戻って [公開] ボタンをクリックします。必要に応じてバージョン情報を入力し [公開] を押して適用させます。
配信トリガーのイベントリストで上記で設定したイベントを開始イベントに設定し、メッセージを作成して実行してください。
設定したメッセージは顧客がサイトでスクロールを30％下げたときに送信されるようになります。
公開直後はチャネルトークで開始イベントが認識されません。
チャネルトークのマーケティングイベントのリストに表示するには、実際にサイトでイベントが発生する必要があります。リストに表示されるようにトリガー行動をしてください。
顧客が「カート」ボタンをクリックしたときのイベントを作成する例です。
トリガーの名前を入力し、トリガーの設定領域をクリック → トリガータイプの中から「すべての要素」を選択します。
トリガーの設定内容を設定してください。
a. 「一部クリック」を選択
b. 確認した値を選択して含めるか等しい条件として追加
c. 保存ボタンをクリックして保存
ボタンでID値が確認された場合はClick IDを選択して右側にID値を入力してください。class値が確認された場合はclass値を入力してください。
Click要素がリストに表示されない場合は「組み込み変数を選択します」をクリックしてClick要素を選択してください。
タグの名前を設定してください。
タグの設定内容を作成してください。
タグタイプ：Channel.ioのテンプレートを選択してください。
Action：行動を追跡して送信できるようにTrack(Send Event)に設定してください。
Event Name：英語と数字で分かりやすく設定してください。
Event Property
Keyにはurl、Value値は横にある＋ボタンをクリックしてPage URLを追加してください。
先に設定したClickトリガーを読み込んでください。
右上の保存ボタンを押して作成してください。
上記の「自社の製品に興味を持っている顧客に話しかける」のケースの「4. プレビューと公開」と同じです。
配信トリガーのイベントリストで上記で設定したイベントを開始イベントに設定し、メッセージを作成して実行してください。
設定したメッセージは、顧客がカートに入れるボタンを押したときに送信されます。