Googleタグマネージャーの使い方|導入&アナリティクス連携!

Webサイトを分析したい人「サイトのアクセス解析を効率的にしたい。Googleタグマネージャーって便利と聞いたけど、どんなメリットがあるんですか?良さそうなら活用したいので、導入方法や使い方もあわせて教えてください」
こういった疑問に答えます。
本記事の内容
- Googleタグマネージャーを使うメリット
- Googleタグマネージャーの導入手順と使い方
記事の信頼性
今回は、Googleタグマネージャーの導入手順と使い方を解説します。
Googleタグマネージャーを使えば、Googleアナリティクスでのアクセス解析を、「より高度に」「より簡単に」行うことができます。
そこで本記事では、Googleタグマネージャーの導入手順や使い方をわかりやすく解説しました。
アクセス解析のスキルをレベルアップしたい方は、ぜひご覧ください。
目次
- Googleタグマネージャー(GTM)とは?
- GTMの導入手順
- GTMの使い方:タグの設定
- GTMの使い方:プレビュー&公開
- GTMの使い方:アナリティクスで確認
- まとめ:GTMを使うとワンランク上のアクセス解析ができる
Googleタグマネージャー(GTM)とは?

Googleタグマネージャー(略称:GTM)とは、Googleから無料で提供されているタグマネジメントツールです。「タグマネ」と略して呼ぶ人もいます。
サイトのアクセス分析には、Googleアナリティクスを使ってる方が多いでしょう。このGoogleアナリティクスで、「リンクのクリック数」や「資料のダウンロード数」などを計測するには、タグ(HTMLコード)をWebサイトの対象ページへ埋めこむ必要があります。
そこで毎回HTMLを編集しなくても済むよう、ツールの管理画面上から「どのページへ」「どのタグを埋め込む」をカンタンにできるようにしたのがGoogleタグマネージャーです。
Googleタグマネージャーを使うメリット
- 無料&サイト規模の制限なし
- 色んなタグを一元管理できる
- HTML編集なしでタグ追加できる
- タグ増えてもサイトが重くならない
- プレビューモードで事前確認できる
- トラブル時にバージョンを元に戻せる
- Googleアナリティクスとの相性が良い
上記のとおり、Googleタグマネージャーを使えばいいことだらけ。
デメリットをあえて挙げるなら、最初は少しとっつきにくいこと。私もそうでした。でも使っていくうちに慣れてきますので、ご安心ください。
というわけで、Googeアナリティクスを使ったアクセス解析を、「より簡単に」「より効果的に」行いたい方は、ぜひGoogeタグマネージャーを使いましょう!
ひとつ補足すると、Googleタグマネージャーの導入時だけは、HTMLにタグを埋め込む作業が必要です。その導入手順を以下で説明します。
Googleタグマネージャー(GTM)の導入手順

Googleタグマネージャーの導入手順を解説します(導入が済んでる方は、使い方にスキップ)。
まず、Googleタグマネージャーにアクセスしましょう。
» Googleタグマネージャー
右上の[タグマネージャーにログイン]をクリックします。
[アカウントを作成]をクリックします。
ここからアカウントの作成です。
まずアカウントの設定。
①アカウント名は、わかりやすい名前を入力します。個人サイトならサイト名とか。後でも変更可能です。
②国は[日本]を選びます。
次にコンテナの設定。
コンテナとは、Googeタグマネージャーにおける管理の箱。コンテナを設置すれば、その中で自由にタグの出し入れが可能になります。
③コンテナ名にはドメイン(あくまで名前です)を入力します。
④ターゲットプラットフォームには、Webサイトに設置するなら[ウェブ]を選びます。
最後に[作成]をクリックします。
利用規約が表示されるので、[はい]をクリックします。
コンテナの作成が完了すると、そのそのコンテナを利用するために必要なタグが表示されます。表示されたタグをコピーして、導入したいサイトのHTML(header.phpなど)に貼り付けます。貼り付ける場所は、上段は
内に、下段は直後です。
先ほどのタグが表示された画面で[OK]をクリックすると、ワークスペース(管理画面)が表示されます。
※なお、先ほどのタグは、上図の右上にあるコンテナIDをクリックすると同じものをみれますよ。
以上で、Googleタグマネージャーの導入手順は完了です。
Googleタグマネージャーの使い方(タグの設定)

今回は例として、「記事内に貼られた特定のリンクを何回クリックされたか?」を計測できるように設定します。
具体的には、当サイトのAmazon Audibleの無料体験を紹介したページ内にある、「無料体験への登録リンク」をクリックした回数を計測してみます。
Googleタグマネージャーを使ったタグの設定は3つありまして、以下の順で進めていくとわかりすいです。
変数
の確認:使う変数があるか確認するトリガー
の作成:タグが発動する条件を指定するタグ
の作成:実行されるコードの内容を設定する
では設定方法を順にみていきましょう。
手順①:変数を確認する
まずは、Googleタグマネージャーで使う変数があるかを確認します。
Googleタグマネージャーでよく使う変数は以下の3つ。
- Page URL
- Click URL
- Click Text
上記が設定されているかを確認します。すでに設定されていれば何もすることはありません。
まず、左メニューから[変数]をクリックし、右上の[設定]をクリックします。
以下の3つにチェックをつけます。※それ以外にチェックがついててもOK
・Page URL
・Click URL
・Click Text
これで変数の設定は完了です。
手順②:トリガーを作成する
左メニューから[トリガー]をクリックし、右上の[新規]をクリックします。
左上の[無題のトリガー]をクリックして、わかりやすい名前に変更します。今回は「特定URLのクリック」としました。そして、[トリガーの設定]をクリックします。
表示されたトリガータイプの中から、[クリック] > [リンクのみ]を選びます。
※番号は、下の方にある図中の番号と同じ
①計測を正しく行うために、[タグの配信を待つ]にチェックをつけます。②上限の数値はこのままでOK。
③[PageURL]、[正規表現に一致]を選び、半角で[.*]を入力します。[.*]は何かしらの文字があることを意味しており、この設定によって、あなたのサイトの全ページでこのトリガーが発動する
ことになります。
④[一部のリンククリック]を選びます。
⑤[Click URL
]、[等しい
]を選び、クリック回数を計測したいリンクのURLを貼り付けます。今回の例では、「無料体験への登録リンク」のURLですね。
⑥最後に、右上の[保存]をクリックします。
すると、今回追加したトリガーが表示されてます。
以上でトリガーの作成は完了です。
手順③:タグを作成する
最後に、このトリガーを発動するタグを設定します。
左メニューから[タグ]をクリックし、右上の[新規]をクリックします。
左上の[名前のないタグ]をわかりやすい名前に変更します。今回は「特定URLのクリック」としました。次に[タグの設定]をクリックします。
[ユニバーサルアナリティクス]を選びます。
※番号は、下の方にある図中の番号と同じ
①[トラッキングタイプ]を[イベント
]にします。
②[カテゴリ]にはわかりやすい名前を入力ます。
③アクションは[+]マークをクリックし、[Page URL]を選ぶと、{{Page URL}}が自動で入ります。
④ラベルは[+]をクリックし、[Click Text]を選びます。{{Click Text}}の後に、半角全角どちらでもいいので、コロン(:)を入力しましょう。[+]をクリックし、[Click URL]を選びます。
⑤[値]⑥[非インタラクションヒット]⑦[Googleアナリティクス設定]はそのまま。
⑧[このタグでオーバーライド設定を有効にする]にチェックをつけます。
⑨測定するサイトのGoogleアナリティクスのトラッキングID(UA-xxxxxxx-x)を入力します。
これで、タグの入力は完了です。
続いて、下にある[トリガー]をクリックし、先ほどの手順②で作成したトリガーを選びます。
これで設定が完了なので、右上の[保存]をクリックします。
すると管理画面に、以下のようなタグができあがりました。
以上、Googleタグマネージャーでタグを設定する方法でした。
Googleタグマネージャーの使い方(プレビュー&公開)

Googeタグマネージャーでタグを作れたら、公開前に動作チェックをしましょう。公開前の動作チェックは「プレビュー機能」を使います。便利なのでぜひ使ってください。
プレビューをする前に
Googeタグマネージャーでプレビューするには、「Tag Assistant」というGoogle Chromeの拡張機能が必要です。Cromeウェブストアにいき、追加しておきましょう。
プレビューする方法
まず管理画面の右上にある[プレビュー]をクリックします。
すると、以下のような新しいウィンドウが起動します。プレビューするURLを入力して、[Connect]をクリックします。
すると、先ほど入力したURLのページが自動で立ち上がります。今回の例では、当サイトの「Amazon Audible紹介ページ」のURLを指定したので、以下のページに遷移します。
Tag Assistantのページに戻ると、以下のような画面になっているので、[Continue]をクリックします。
この時点では、今回設定したトリガー(特定URLのクリック)はまだ発生していないので、[Tags Not Fired]のところに表示されています。
ここで、今回設定したトリガー(Amazon無料体験リンクのクリック)を自分で発生させてみます。
Tag Assistantのページに戻ると、今回設定したタグ(特定URLのクリック)が、[Tags Fired
]に移ってます。この[Tags Fired]に表示されれば、今回の設定が正しく動作した証拠です。
こんな感じで「プレビュー機能」を使って、公開前の動作チェックをしましょう。
プレビューを終了するときは、Tag Assistantページの左上のx印をクリックします。
[Stop debugging]をクリックします。
以下のような画面になります。
以上、公開前にプレビューで確認する方法でした。
公開する方法
では、作成したタグを公開しましょう。右上の[公開]をクリックします。
[バージョン名]と[バージョンの説明]にわかりやすい名前と説明を入力し、右上の[公開]ボタンをクリックします。
以下のような表示がされます。
左上の[ワークスペース]をクリックしてみましょう。右上の「ワークスペースの変更:0」になっていれば、作成したタグは公開されてます。バージョンも上がってますね。
以上で、作成タグの公開は完了です。
Googleタグマネージャーの使い方(アナリティクスで確認)

では最後に、今回作成したタグが、Googeアナリティクスに反映されているかを確認しましょう。
Googeアナリティクスを開き、左メニューから[リアルタイム] > [イベント]をクリックします。
この時点では、[イベントカテゴリ]や[イベントアクション]には何もデータがないことを確認します。
つぎに、今回設定したトリガーを自分で発生させてみます。
私の場合ですと、当サイトの「Amazon Audibleへの登録ページリンクがあるページ」を開き、登録ページリンクをクリックします。
再び、Googeアナリティクスに戻ります。
すると[イベントを発生させたアクティブユーザー]が0から1に変わってますね。[イベントカテゴリ]には今回作成した「申し込みURLクリック」が表示され、[イベントアクション]にはイベントが発生したページURLが記載されてます。
これで、今回Googleタグマネージャーで作成したタグと、Googleアナリティクスのひもづけが正常であることを確認できました。
なお、少し時間が経った後は[リアルタイム]ではなく、左メニューの[行動] > [イベント] > [概要]をクリックして、イベントカテゴリやイベントアクションを確認しましょう。
まとめ:Googleタグマネージャーを使うとワンランク上のアクセス解析ができる

Googleタグマネージャーとは?から始まって、導入手順や使い方までを解説しました。
たしかにGoogleタグマネージャーは最初はとっつきにくいかもしれませんが、使っていくうちにすぐに慣れます。
そしてそのうち、「Googleタグマネージャーなしではやっていけない」に変わるはずです。
サイトをさらに改善したい方は、Googleアナリティクスに加えて、ぜひGoogleタグマネージャーも使いこなしていきましょう。
今回紹介した以外のタグ設定例は、Googleタグマネージャーでクリック数やページビューを計測する方法で紹介してますので、そちらも参考にしてください。
今回は以上です。