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タグマネージャーを使ったタグの設定は３つありまして、以下の順で進めていくとわかりすいです。
変数の確認：使う変数があるか確認するトリガーの作成：タグが発動する条件を指定するタグの作成：実行されるコードの内容を設定する
では設定方法を順にみていきましょう。
手順①：変数を確認する
まずは、Googleタグマネージャーで使う変数があるかを確認します。
Googleタグマネージャーでよく使う変数は以下の３つ。
- Page URL
- Click URL
- Click Text
上記が設定されているかを確認します。すでに設定されていれば何もすることはありません。
まず、左メニューから[変数]をクリックし、右上の[設定]をクリックします。
以下の３つにチェックをつけます。※それ以外にチェックがついてても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ページの左上のｘ印をクリックします。
[Stop debugging]をクリックします。
以下のような画面になります。
以上、公開前にプレビューで確認する方法でした。
公開する方法
では、作成したタグを公開しましょう。右上の[公開]をクリックします。
[バージョン名]と[バージョンの説明]にわかりやすい名前と説明を入力し、右上の[公開]ボタンをクリックします。
以下のような表示がされます。
左上の[ワークスペース]をクリックしてみましょう。右上の「ワークスペースの変更:0」になっていれば、作成したタグは公開されてます。バージョンも上がってますね。
以上で、作成タグの公開は完了です。
Googleタグマネージャーの使い方（アナリティクスで確認）
では最後に、今回作成したタグが、Googeアナリティクスに反映されているかを確認しましょう。
Googeアナリティクスを開き、左メニューから[リアルタイム] > [イベント]をクリックします。
この時点では、[イベントカテゴリ]や[イベントアクション]には何もデータがないことを確認します。
つぎに、今回設定したトリガーを自分で発生させてみます。
私の場合ですと、当サイトの「Amazon Audibleへの登録ページリンクがあるページ」を開き、登録ページリンクをクリックします。
再び、Googeアナリティクスに戻ります。
すると[イベントを発生させたアクティブユーザー]が０から１に変わってますね。[イベントカテゴリ]には今回作成した「申し込みURLクリック」が表示され、[イベントアクション]にはイベントが発生したページURLが記載されてます。
これで、今回Googleタグマネージャーで作成したタグと、Googleアナリティクスのひもづけが正常であることを確認できました。
なお、少し時間が経った後は[リアルタイム]ではなく、左メニューの[行動] > [イベント] > [概要]をクリックして、イベントカテゴリやイベントアクションを確認しましょう。
まとめ：Googleタグマネージャーを使うとワンランク上のアクセス解析ができる
Googleタグマネージャーとは？から始まって、導入手順や使い方までを解説しました。
たしかにGoogleタグマネージャーは最初はとっつきにくいかもしれませんが、使っていくうちにすぐに慣れます。
そしてそのうち、「Googleタグマネージャーなしではやっていけない」に変わるはずです。
サイトをさらに改善したい方は、Googleアナリティクスに加えて、ぜひGoogleタグマネージャーも使いこなしていきましょう。
今回紹介した以外のタグ設定例は、Googleタグマネージャーでクリック数やページビューを計測する方法で紹介してますので、そちらも参考にしてください。
今回は以上です。