💡 こちらの機能はAppsでGoogle Tag Manger 連携が必要です

Google Tag Manager(GTM) を STUDIO と連携させると、タグ(Google Analytics などのトラッキングコードや関連するコード)を GTM の管理画面で設定可能になります。

※ Google Tag Manager の導入前に公式のヘルプを一通り読むことをオススメします。

Google Tag Manager 専門用語について

タグ・・・「Google Analytics」「Google 広告」などのツールが提供するコード。通常はサイト内に直接書き込みますが、GTM のコード1つサイトに書くだけで、あとは GTM の画面で管理できるようになります。

トリガー・・・クリック、ページビューなどの特定の種類のイベントを指定します。トリガーで指定されたイベントが検出されたときにタグを呼び出します。タグを配信するには、少なくても1つトリガーを設定する必要があります。

GTM で GA を導入し、クリックイベントを計測する方法を例で解説

Google Tag Manager では様々なタグを管理することが可能ですが、ここでは Google Analytics を例に設定方法を解説します。

事前準備

ステップ1「タグの作成」

  1. [ワークスペース] の [サマリー] ページで [新しいタグ] をクリックします。

  2. [タグの設定] をクリック。

  3. [Google アナリティクス: ユニバーサル アナリティクス] をクリック。

  4. [トラッキングタイプ] は [イベント] を選択。

  5. [カテゴリ] [アクション] [ラベル] [値] を入力。

  6. [Google アナリティクス設定] は [新しい変数...] をクリック。

  7. Google Analytics のトラッキング ID を入力。

  8. 画面右上の [保存] をクリック。

  9. 変数名を決め、[保存] をクリック。

  10. [タグの設定] 画面に戻るので、画面右上の [保存] をクリック。

  11. [トリガーが選択されていません] と表示されますが、ここでは [タグを保存] をクリック。

  12. タグの名前を決め、[保存] をクリック。

ステップ2「トリガーの作成」

  1. [ワークスペース] の [トリガー] ページで [新規] をクリックします。

  2. [トリガーの設定] をクリック。

  3. [クリック > すべての要素] を選択。

  4. [このトリガーの発生場所] は [一部のクリック] を選択。

  5. [Click Element] [CSSセレクタに一致する] [#cv-0001, #cv-0001 *] を入力。(cv-0001 は任意の文字列を入力)

  6. 画面右上の [保存] をクリック。

  7. トリガー名を決め、[保存] をクリック。

ステップ3「タグとトリガーを紐づける」

  1. [ワークスペース] の [タグ] ページで [先ほど作成したタグ名] をクリックします。

  2. [トリガー] をクリック。

  3. [先ほど作成したトリガー名] をクリック。

  4. 画面右上の [保存] をクリック。

ステップ4「変更した作業を公開する」

  1. 画面右上の [公開] ボタンをクリック。

  2. バージョン名などを入力し、公開してください。

ステップ5「動作確認をする」

1. STUDIO エディター で ID が cv-0001 (GTM のトリガーで作成した文字列と同じ ID)の要素を用意する。

2. 画面右上の [公開] をクリックし、更新を行う。

3. 公開サイトで該当の箇所をクリックし、Google Analytics でイベント計測を確認する。

公式のヘルプを参考に解説しています。

うまく動作しない場合、GTM 側で公開ができていなかったり、独自にブラウザに入れているプラグインが邪魔をしていたり、STUDIO に GTM のタグが正しく設定できていなかったりします。

回答が見つかりましたか?