Googleタグマネージャーの使い方｜導入＆アナリティクス連携！
Webサイトを分析したい人「サイトのアクセス解析を効率的にしたい。Googleタグマネージャーって便利と聞いたけど、どんなメリットがあるんですか？良さそうなら活用したいので、導入方法や使い方もあわせて教えて下さい。」
こういった疑問に答えます。
本記事の内容
- Googleタグマネージャー(GTM)とは？
- Googleタグマネージャーの導入手順
- Googleタグマネージャーの使い方（タグの設定）
- Googleタグマネージャーの使い方（プレビュー＆公開）
- Googleタグマネージャーの使い方（アナリティクスで確認）
本記事を書いてる私は、大手メーカーで自社のWebサイトを分析したりSEO施策を考えたりしています。個人では当サイトを運営して1年で月間1万PVを達成しました。こうした経験から、SEOに関してノウハウをシェアしていきます。
もちろんアナリティクスだけでもそれなりのことはできるでしょう。でも、Googleタグマネージャーを使えば、アクセス解析のレベルをグッとひき上げることができるんですよ！
今よりさらにサイトを改善したい方で、Googleタグマネージャーをまだ使ってない方は、ぜひ本記事をご覧ください。Googleタグマネージャーとは？から始まり、導入手順や使い方までを、初心者向けにわかりやすく解説しましたので。
なお前提として、Googleアナリティクスを導入している必要がありますので、まだの方は、Googleアナリティクスの登録・設定方法を参考にして、先に導入しておいてください。
ではみていきましょう。
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タグマネージャーでクリック数やページビューを計測する方法で紹介してますので、そちらも参考にしてください。
今回は以上です。