GTMの基本を一通り覚える実践的マニュアル

GTMの基本を一通り覚える実践的マニュアル

導入と設定の、おおまかなフロー

  1. 導入する
    1. アカウント、コンテナを作る
    2. GTMをサイトにインストールする
  1. タグとトリガーを作る
    1. タグを作る
    2. トリガーを作る
  1. デバッグする
    1. プレビューモードを使う
  1. 公開する

導入

アカウントと、コンテナを作る

1: 「アカウントを作成」をクリック
2: アカウントとコンテナの内容を入力、選択

GTMをサイトにインストールする

1: 管理> Google タグ マネージャーをインストール を選択
2: 次のようにコードが表示される。これを、コンテナスニペットと呼ぶ
3: コードをサイトのソースに記述する
前者の<script>タグは、可能な限り<head>の直後に、後者の<noscript>タグは、<body>の直後に配置する。次のようなイメージ。
Google Tag Manager ... ... Google Tag Manager (noscript) ... ... ... ...

タグとトリガーの設定

タグの新規作成

1: 「タグ」の画面で、「新規」をクリック
2: 名前を入力する。これは、GTMコンテナ内での管理のための名前。
3: 「タグの設定」で、タグタイプを選択
4: タグの具体的な設定を、する
5: トリガーの設定。あらかじめ作っておいたタグを選ぶ、もしくは、ここでトリガーの新規作成をする

トリガーの新規作成

1: 「トリガー」の画面で、「新規」をクリック
2: 名前を入力
3: トリガータイプを選択
4: トリガーの内容の具体的な設定をする

プレビューする

1: 画面右上あたりの「プレビュー」をクリックする
2: GTMをインストールしたサイトのURLを入力し、Connect をクリック。
Include debug signal in the URL にチェックを入れると、?gtm_debug= というURLパラメーターが付与される。デバッグのセッションであることを解析ツールか何かに明示したいときは使う
3: 別タブでサイトが開かれる。可能であれば、サイトと、デバッグの画面を並べて表示するのが作業しやすくておすすめ。この画像は、縦に並べた画像
4: デバッグ画面の Continue をクリックする
5: デバッグ の画面を見てみる
  1. 画面左の、1~5は、サイトで何が起きたか(ページが読まれ始めた、表示完了した、何かクリックした、など)が、発生順に確認できる
  1. Tags Fired は、発火(配信)したタグ
  1. Tags Not Fired は、発火していないタグ
6: どのタイミングで、どのタグが発火したか、順を追って確認する
Consent Initialization ではどのタグも発火していないことが確認できた
Initialization では、GA4_測定IDが発火したのが確認できた。これは意図通り
Container Loaded では、ページビュートリガーで設定した複数のタグが発火したことが確認できた。また、発火させたくないタグが発火していないことも確認できた。意図通り
次のページへ遷移してみる。画面左側に、Link Clickと、2ページ目の挙動が表示された
Link Click の Variables を確認してみる。この、Click URL や Click Text などが、なんという Value で表示されているか確認すると、このままトリガーの設定内容として使える
2ページ目の Container Loaded でも確かに意図したタグが発火していることを確認できた
コンバージョン時のタグ発火を確認する
  1. お問い合わせフォームへ遷移する
  1. お問い合わせ完了まで進む
    1. お問い合わせ送信完了ページでの Container Loaded で、各コンバージョン関連のタグが発火した。意図どおり
      Variables を確認してみる
      ブラウザのアドレスバーには https://sem-cafe.jp/contact?complete#trust-form と表示されているが、GTMは、Page URL を "https://sem-cafe.jp/contact?complete" と認識していることを確認できる。もし意図通り発火しないときは、このように確認すると、対処方法がわかる
      Tags の画面で表示されたタグ名をクリックして、中身を確認してみる
      どういうHTMLか、どのトリガーにヒットしたか、していないか、確認できる
      Names では変数名が確認できる
      Values を選択すると、変数の中身が確認できる
 

公開する

画面右上の「公開」をクリック
どんな変更内容かざっと確認する。このバージョンの名前や説明などを書く必要があれば書く
公開する