💡 こちらの機能はAppsでGoogle Tag Manger 連携が必要です |
Google Tag Manager（GTM） を STUDIO と連携させると、タグ（Google Analytics などのトラッキングコードや関連するコード）を GTM の管理画面で設定可能になります。
※ Google Tag Manager の導入前に公式のヘルプを一通り読むことをオススメします。
Google Tag Manager 専門用語について
タグ・・・「Google Analytics」「Google 広告」などのツールが提供するコード。通常はサイト内に直接書き込みますが、GTM のコード1つサイトに書くだけで、あとは GTM の画面で管理できるようになります。
トリガー・・・クリック、ページビューなどの特定の種類のイベントを指定します。トリガーで指定されたイベントが検出されたときにタグを呼び出します。タグを配信するには、少なくても１つトリガーを設定する必要があります。
GTM で GA を導入し、クリックイベントを計測する方法を例で解説
Google Tag Manager では様々なタグを管理することが可能ですが、ここでは Google Analytics を例に設定方法を解説します。
事前準備
Google Analytics でトラッキング ID を確認しておく（STUDIO 側に GA のタグは埋め込まなくて大丈夫です）
ステップ１「タグの作成」
[ワークスペース] の [サマリー] ページで [新しいタグ] をクリックします。
[タグの設定] をクリック。
[Google アナリティクス: ユニバーサル アナリティクス] をクリック。
[トラッキングタイプ] は [イベント] を選択。
[カテゴリ] [アクション] [ラベル] [値] を入力。
[Google アナリティクス設定] は [新しい変数...] をクリック。
Google Analytics のトラッキング ID を入力。
画面右上の [保存] をクリック。
変数名を決め、[保存] をクリック。
[タグの設定] 画面に戻るので、画面右上の [保存] をクリック。
[トリガーが選択されていません] と表示されますが、ここでは [タグを保存] をクリック。
タグの名前を決め、[保存] をクリック。
ステップ２「トリガーの作成」
[ワークスペース] の [トリガー] ページで [新規] をクリックします。
[トリガーの設定] をクリック。
[クリック > すべての要素] を選択。
[このトリガーの発生場所] は [一部のクリック] を選択。
[Click Element] [CSSセレクタに一致する] [#cv-0001, #cv-0001 *] を入力。（cv-0001 は任意の文字列を入力）
画面右上の [保存] をクリック。
トリガー名を決め、[保存] をクリック。
ステップ３「タグとトリガーを紐づける」
[ワークスペース] の [タグ] ページで [先ほど作成したタグ名] をクリックします。
[トリガー] をクリック。
[先ほど作成したトリガー名] をクリック。
画面右上の [保存] をクリック。
ステップ４「変更した作業を公開する」
画面右上の [公開] ボタンをクリック。
バージョン名などを入力し、公開してください。
ステップ５「動作確認をする」
1. STUDIO エディター で ID が cv-0001 （GTM のトリガーで作成した文字列と同じ ID）の要素を用意する。
2. 画面右上の [公開] をクリックし、更新を行う。
3. 公開サイトで該当の箇所をクリックし、Google Analytics でイベント計測を確認する。
※ 公式のヘルプを参考に解説しています。
うまく動作しない場合、GTM 側で公開ができていなかったり、独自にブラウザに入れているプラグインが邪魔をしていたり、STUDIO に GTM のタグが正しく設定できていなかったりします。