ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

Googleタグマネージャー設定手順

Googleタグマネージャー設定手順

「Googleタグマネージャーって何?」

「Googleタグマネージャーの設定手順を知りたい」

悩み

こんな悩みにお答えします。

じつは、

個人的に、Web広告運用の仕事をすることになったのGoogleタグマネージャーの必要性にせまられ、いろいろ調査、設定した内容をまとめました。

この記事では、以下についてを解説しています。

  • Googleタグマネージャー とは
  • Googleタグマネージャー 設定手順

Googleタグマネージャーを使うことで、Webサイトのさまざまなデータを効率的に測定できるようになり、売上の向上、広告費の最適化などをできるようになります。

目次
  1. Googleタグマネージャー とは
  2. Googleタグマネージャー 設定手順
    1. 変数
      1. ユーザー定義変数
      2. 組み込み変数
    2. トリガー
      1. メールフォーム送信完了
      2. 電話番号リンククリック(発信発信)
    3. タグ
      1. Googleアナリティクス (UA)
        1. トラッキング
      2. Googleアナリティクス (GA4)
        1. トラッキング
      3. Google広告
        1. コンバージョンリンカー
        2. メールフォーム
        3. 電話番号リンククリック(発信発信)
      4. Yahoo広告
        1. サイトジェネラルタグ・コンバージョン測定補完機能タグ
        2. メールフォーム
        3. 電話番号リンククリック(発信発信)
  3. まとめ

Googleタグマネージャー とは

Googleタグマネージャー

Googleタグマネージャーは、Googleが提供するタグ管理システムです。

Webサイトなどの分析に必要なタグ、トラッキングコードをかんたんで効率的に追加、更新することができます。

商品販売やサービス申し込みなどがあるサイトでは、よりユーザー行動を詳細に分析する必要があるためタグマネージャーを設置することは必須といえます。

設定方法は慣れていないとやや難しいかもしれませんが、手順どおりすすめればできないことはありません。

Googleタグマネージャー 設定手順

変数

ユーザー定義変数

左サイドバーの変数をクリックします。

ユーザー定義変数で「新規」をクリックします。

「変数の設定」の中央付近をクリックします → 右から変数タイプを選択が表示されます。

「Google アナリティクス設定」をクリックします → 変数タイプを選択が隠れます。

「Google アナリティクス設定」が選択された状態になります。

トラッキング IDに、Googleアナリティクスで取得したトラッキングコード(UA-●●●●●)が入力します。

右上の「保存」をクリックします。

組み込み変数

変数でデフォルト設定されていないクリックの項目を追加していきます。
これでクリックしたときに取得できる項目を変数としておくことができます。

組み込み変数の「設定」をクリックします → 組み込み変数の設定が表示されます

「クリック」以下の項目を選択します。

  • click Element
  • click Classes
  • click ID
  • click Target
  • click URL
  • click Text

「✕」 または左の半透明のところをクリックします

組み込み変数一覧に選択した「Click 」が追加表示されています

トリガー

トリガーを設定します。

トリガーはデータをカウントするきっかけになるもので、「問い合わせフォーム送信を完了した」、「電話発信をした」ということをトリガーとして登録しておきます。

トリガーを登録しておくことで、Googleアナリティクス、Google広告、Yahoo広告など同じ操作を別々に登録することなく共通化し使いまわしをすることができます。

いろいろなタグを追加するつもりがなく、タグをひとつだけ追加する場合は、タグ追加時に同時に設定してもかまいません。

メールフォーム送信完了

メールフォームの設計、プログラムによって、設定方法が変わります。
ここでは、入力画面と送信完了画面が異なるURLの場合を例に解説します。
送信完了画面のURLは「thanks.html」が含まれるものとします。

「新規」をクリックします

トリガーの名前を入力します。「サンクスページ」など好みの名前でかまいません。

「トリガーの設定」の中央付近をクリックします → 右から「トリガーのタイプ」を選択が表示されます

「ページビュー」をクリックします → 「トリガーのタイプ」を選択が隠れます

「ページビュー」が選択されます。

「一部のページビュー」を選択します

URLの条件を選択、入力します

  • Page URL
  • 含む
  • thanks.html

例の場合、URLにthanks.htmlが含まれているページへ到達したときにトリガーが発生します。

問い合わせフォーム完了ページを見た( = 問い合わせした)ことが記録されることになります。

右上の「保存」をクリックします

電話番号リンククリック(発信発信)

ここでは、aタグのhref属性に「tel:」が含まれているもの(=電話番号リンク)がクリックされた場合を例に解説します。

「新規」をクリックします

トリガーの名前を入力します。「電話番号リンククリック」

「トリガーの設定」の中央付近をクリックします → 右から「トリガーのタイプ」を選択が表示されます

「リンクのみ」をクリックします → 「トリガーのタイプ」を選択が隠れます
「リンクのみ」が選択されます。

「タグの配信を待つ」を✅します

待ち時間上限「2000」ミリ秒 のままで大丈夫です

これらすべての条件が true の場合にこのトリガーを有効化

  • Page URL
  • 正規表現に一致
  • .*

「一部のリンククリック」を選択します

  • Click URL
  • 含む
  • tel:

「保存」をクリックします

タグ

コンバージョン測定などに必要なタグを追加していきます。

Googleアナリティクス (UA)

Googleアナリティクス

まず、Googleアナリティクスでトラッキングコードを取得します。

Googleアナリティクスのコード取得手順は以下の記事で解説しています。

【2020最新】Googleアナリティクス 設定手順【GA4対応】

Googleアナリティクスの設定方法が変わって困っていますか?この記事では、新しくなったGoogleアナリティクスに新規サイトを追加する手順、旧バージョンのタグを取得する方法ついて解説しています。ぜひご覧ください。

旧バージョン(UA)の場合は、「UA-●●●●●」のパターンの英数字のみが必要になります。

トラッキング

ワークスペース、左サイドバーのサマリーで「新しいタグを追加」をクリックします。
※左サイドバーのタグで「新規」をクリックしても同じようにタグが追加できます。

タグの名前を入力します 「Google広告 コンバージョン リンカー」など、管理しやすい名前をつけるとよいです。
※あとからでもかまいません。

「タグの設定」の中央付近をクリックします → 右からタグタイプを選択が表示されます。

「Google アナリティクス:ユニバーサル アナリティクス」をクリックします → タグタイプを選択が隠れます。

「Google アナリティクス:ユニバーサル アナリティクス」が選択された状態になります。

トラッキング タイプでページビューを選択します。

Google アナリティクス設定で、{{Google アナリティクス 設定}}を選択します。
ユーザー定義変数で設定したトラッキングコード(UA-●●●●●)が設定されます。

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

「All Pages」をクリックします → タグタイプを選択が隠れます。

「All Pages」が選択された状態になります。
これでWebサイト内のすべてのページに「コンバージョン リンカー」を設定するということになります。

Googleアナリティクス (GA4)

Googleアナリティクス

まず、Googleアナリティクスでトラッキングコードを取得します。

Googleアナリティクス(UA)で新旧バージョンを設定していれば、すでに設定できています。

Googleアナリティクスのコード取得手順は以下の記事で解説しています。

【2020最新】Googleアナリティクス 設定手順【GA4対応】

Googleアナリティクスの設定方法が変わって困っていますか?この記事では、新しくなったGoogleアナリティクスに新規サイトを追加する手順、旧バージョンのタグを取得する方法ついて解説しています。ぜひご覧ください。

新バージョン(GA4)の場合は、「G-●●●●●」のパターンの英数字のみが必要になります。

トラッキング

ワークスペース、左サイドバーのサマリーで「新しいタグを追加」をクリックします。
※左サイドバーのタグで「新規」をクリックしても同じようにタグが追加できます。

タグの名前を入力します 「Google広告 コンバージョン リンカー」など、管理しやすい名前をつけるとよいです。
※あとからでもかまいません。

「タグの設定」の中央付近をクリックします → 右からタグタイプを選択が表示されます。

「Google アナリティクス:GA4 設定」をクリックします → タグタイプを選択が隠れます。

「Google アナリティクス:GA4 設定」が選択された状態になります。

測定 IDに、Google広告で取得した測定 ID(G-●●●●●)を入力します。

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

「All Pages」をクリックします → タグタイプを選択が隠れます。

「All Pages」が選択された状態になります。
これでWebサイト内のすべてのページに「コンバージョン リンカー」を設定するということになります。

GA4については、トラッキング測定の設定のみでコンバージョン測定については、まだわかっていません。

Google広告

Google広告

まず、Google広告でコンバージョンアクションを追加し、コンバージョンタグを設定、タグを取得します。
GTMでタグを設定する場合は、JavaScriptコードは必要なく、「コンバージョン ID」「コンバージョン ラベル」のみが必要になります。

Google広告のコンバージョンを測定するには、共通で「コンバージョンリンカー」を設定し、それぞれ目的に応じたコンバージョンタグを必要なだけ設定します。
ここでは「メールフォーム送信完了」と「電話発信」をコンバージョンとして設定します。

ワークスペース、左サイドバーのサマリーで「新しいタグを追加」をクリックします。
※左サイドバーのタグで「新規」をクリックしても同じようにタグが追加できます。

タグの名前を入力します 「Google広告 コンバージョン リンカー」など、管理しやすい名前をつけるとよいです。
※あとからでもかまいません。

「タグの設定」の中央付近をクリックします → 右からタグタイプを選択が表示されます。

以下、それぞれのタグ、トリガーを設定します。

コンバージョンリンカー

「コンバージョン リンカー」をクリックします → タグタイプを選択が隠れます。

「コンバージョン リンカー」が選択された状態になります。
その他の設定は不要です。

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

「All Pages」をクリックします → タグタイプを選択が隠れます。

「All Pages」が選択された状態になります。
これでWebサイト内のすべてのページに「コンバージョン リンカー」を設定するということになります。

メールフォーム

「Google広告のコンバージョントラッキング」をクリックします → タグタイプを選択が隠れます

「Google広告のコンバージョントラッキング」が選択された状態になります。
その他の設定は不要です。

コンバージョン IDに、Google広告で取得したコンバージョン IDを入力します。

コンバージョン ラベルに、Google広告で取得したコンバージョン ラベルを入力します。

その他の入力欄は必要に応じて入力します。
ここでは未入力でもかまいません。

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

メールフォーム送信完了のトリガー設定済みの場合は、「サンクスページ」(任意の名前)をクリックします → タグタイプを選択が隠れます。

メールフォーム送信完了のトリガー未設定の場合は、メールフォーム送信完了と同様の設定をここで設定し、選択します。

「サンクスページ」が選択された状態になります。
これで「thanks.html」が含まれるページを測定するということになります。

電話番号リンククリック(発信発信)

「Google広告のコンバージョントラッキング」をクリックします → タグタイプを選択が隠れます

「Google広告のコンバージョントラッキング」が選択された状態になります。
その他の設定は不要です。

コンバージョン IDに、Google広告で取得したコンバージョン IDを入力します

コンバージョン ラベルに、Google広告で取得したコンバージョン ラベルを入力します

その他の入力欄は必要に応じて入力します。
ここでは未入力でもかまいません。

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

電話番号リンククリック(発信発信)のトリガー設定済みの場合は、「電話番号リンククリック」(任意の名前)をクリックします → タグタイプを選択が隠れます。

電話番号リンククリック(発信発信)のトリガー未設定の場合は、電話番号リンククリック(発信発信)と同様の設定をここで設定し、選択します。

「電話番号リンククリック」が選択された状態になります。
これで「tel:」が含まれたリンククリック(電話発信)を測定するということになります。

右上の「保存」をクリックします

Yahoo広告

Yahoo広告

まず、Yahoo広告でコンバージョン測定を追加し、コンバージョンタグを設定、タグを取得します。
GTMでタグを設定する場合は、JavaScriptコードをそのまま使います。
「サイトジェネラルタグ・コンバージョン測定補完機能タグ」「コンバージョン測定タグ」をそのまま使います。

Yahoo広告のコンバージョンを測定するには、共通で「サイトジェネラルタグ・コンバージョン測定補完機能タグ」を設定し、それぞれ目的に応じたコンバージョンタグを必要なだけ設定します。
ここでは「メールフォーム送信完了」と「電話発信」をコンバージョンとして設定します。

ワークスペース、左サイドバーのサマリーで「新しいタグを追加」をクリックします。
※左サイドバーのタグで「新規」をクリックしても同じようにタグが追加できます。

タグの名前を入力します 「Yahoo広告 サイトジェネラルタグ」など、管理しやすい名前をつけるとよいです。
※あとからでもかまいません。

「タグの設定」の中央付近をクリックします → 右からタグタイプを選択が表示されます。

以下、それぞれのタグ、トリガーを設定します。

サイトジェネラルタグ・コンバージョン測定補完機能タグ

「カスタム HTML」をクリックします → タグタイプを選択が隠れます。

「カスタム HTML」が選択された状態になります。

HTMLのテキストエリアにYahoo広告で取得したJavaScriptコードをそのまま貼り付けます。
以下のようなコードです。

<script async src="https://s.yimg.jp/images/listing/tool/cv/ytag.js"></script>
<script>
window.yjDataLayer = window.yjDataLayer || [];
function ytag() { yjDataLayer.push(arguments); }
ytag({"type":"ycl_cookie"});
</script>

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

「All Pages」をクリックします → タグタイプを選択が隠れます。

「All Pages」が選択された状態になります。
これでWebサイト内のすべてのページに「サイトジェネラルタグ・コンバージョン測定補完機能タグ」を設定するということになります。

メールフォーム

「カスタム HTML」をクリックします → タグタイプを選択が隠れます。

「カスタム HTML」が選択された状態になります。

HTMLのテキストエリアにYahoo広告で取得したJavaScriptコードをそのまま貼り付けます。
以下のようなコードです。

<script async>
ytag({
  "type": "yss_conversion",
  "config": {
    "yahoo_conversion_id": "●●●●●",
    "yahoo_conversion_label": "●●●●●",
    "yahoo_conversion_value": "0"
  }
});
</script>

JavaScriptコードのyahoo_conversion_idの値に、Yahoo広告で取得したコンバージョン IDが入力されています。

JavaScriptコードのyahoo_conversion_labelの値に、Yahoo広告で取得したコンバージョン ラベルが入力されています。

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

メールフォーム送信完了のトリガー設定済みの場合は、「サンクスページ」(任意の名前)をクリックします → タグタイプを選択が隠れます。

メールフォーム送信完了のトリガー未設定の場合は、メールフォーム送信完了と同様の設定をここで設定し、選択します。

「サンクスページ」が選択された状態になります。
これで「thanks.html」が含まれるページを測定するということになります。

電話番号リンククリック(発信発信)

「カスタム HTML」をクリックします → タグタイプを選択が隠れます。

「カスタム HTML」が選択された状態になります。

HTMLのテキストエリアにYahoo広告で取得したJavaScriptコードをそのまま貼り付けます。
以下のようなコードです。

<script async>
yahoo_report_conversion = function(url) {
  var opt = {
    "yahoo_conversion_id": "●●●●●",
    "yahoo_conversion_label": "●●●●●",
    "yahoo_conversion_value": 0,
    "yahoo_remarketing_only": false,
    "onload_callback": function() {
      if (typeof(url) != 'undefined') {
        window.location = url;
      }
    }
  };
  ytag({"type":"yss_call_conversion", "config": opt});
}
</script>

JavaScriptコードのyahoo_conversion_idの値に、Yahoo広告で取得したコンバージョン IDが入力されています。

JavaScriptコードのyahoo_conversion_labelの値に、Yahoo広告で取得したコンバージョン ラベルが入力されています。

「トリガー」の中央付近をクリックします → 右からトリガーを選択が表示されます。

電話番号リンククリック(発信発信)のトリガー設定済みの場合は、「電話番号リンククリック」(任意の名前)をクリックします → タグタイプを選択が隠れます。

電話番号リンククリック(発信発信)のトリガー未設定の場合は、電話番号リンククリック(発信発信)と同様の設定をここで設定し、選択します。

「電話番号リンククリック」が選択された状態になります。
これで「tel:」が含まれたリンククリック(電話発信)を測定するということになります。

右上の「保存」をクリックします

まとめ

Googleタグマネージャー設定手順を解説しました。

  • 変数
  • トリガー
  • タグ
  • Googleアナリティクス (UA)
  • Googleアナリティクス (GA4)
  • Google広告
  • Yahoo広告

Googleタグマネージャーを使うことで、Webサイトのさまざまなデータを効率的に測定できるようになり、売上の向上、広告費の最適化などをできるようになります。