Googleタグマネージャでアナリティクスを管理しよう！メリット・ページビュー設定方法

Webサイトやアプリを運営してる方にとっては馴染みのある「Googleアナリティクス」。日々の目標を追ったり施策の分析で役に立ちます。
このアナリティクスですが、もっと便利に運用できる「Googleタグマネージャ」と言うサービスがあるんです！一度導入すれば、開発無しでページビューやイベント管理ができます。
このブログもタグマネージャを使ってページビューやイベントを管理しています。

この記事では、Googleタグマネージャのメリットや、導入〜ページビュー設定方法までをご紹介します。現在Googleアナリティクスを使っている方向けに、乗り換え方法も記載しています。

Googleタグマネージャでアナリティクスを管理するメリット

エンジニアの開発が要らない

タグマネージャ1番のメリットは、エンジニアの開発に依存しないことです。
例えば、「このイベントを取りたい」と思った時、直接以下のコードをエンジニアに実装してもらわなければなりません。

ga('send','event','[カテゴリー]','[アクション]','[ラベル]','[値]');

今すぐ欲しいと思っても、「次のリリースまで待って欲しい」なんてことも。素早くPDCAを回したい時に困ってしまいますね。

一方でGoogleタグマネージャの場合は、その心配は要りません。管理画面から必要な条件を設定するだけで、簡単・すぐに実装できます。
更に、タグマネージャからHTML挿入やJavaScript実行もできます。アプリに関わるソースは直接記述し、分析で必要なscriptタグ等はタグマネージャで実行するなど、使い分けも可能です。

イベント等の管理が煩雑にならない

アナリティクスでよくあるのが「このタグどこで実装してたっけ？」問題です。
ソースコードに記載する場合、先ほど記載したイベントコードを各所に貼り付けます。小規模のサービスであればまだ管理しきれるかもしれませんが、ある程度規模が多くなると、どこにどのタグがあるかわからなくなってしまいます。

その点Googleタグマネージャでは「タグ」と呼ばれる単位で、全ての情報を管理できます。管理が煩雑になることはありません。

さっそく設定してみよう！導入方法

それではさっそくGoogleタグマネージャを設定していきましょう。すでにGoogleアナリティクスを導入している方の設定方法も合わせてご紹介します。

1.アカウント、コンテナ作成

まずはアカウントを作成しましょう。こちらからGoogleアカウントでログインして下さい。
すると、以下の画面が表示されます。

「アカウントを作成」を押してください。作成画面に移るのでアカウント名を入力しましょう。
アカウント名は基本社名を入力すれば問題ありません。サービスが多数ある場合には、部署単位でも良いでしょう。

入力したら、「続行」を押して、コンテナ作成画面に移ります。コンテナとは、アカウントに紐づくサービス名を指します。このブログでは、アカウント名を「Goodpatch」、コンテナ名を「Goodpatch Blog」で設定しました。

作成ボタンを押せば完了です。
コンテナは1アカウントに複数作成できますので、コンテナを増やしたい場合はトップページの右メニューから作成しましょう。

2.サイトへコードを挿入

作成が完了すると、タグマネージャインストール画面が開きます。手順に沿ってコードをサイトに挿入して下さい。

これで導入は完了です。ただ、まだ何も設定していないため、値は取れない状態です。まず最初の1歩として、タグマネージャを使ってページビューを取ってみましょう。

タグマネージャでページビューを設定しよう

設定の前に覚えておきたい、よく使う3つの要素

設定を行う前に、基本的な構成についてご紹介します。

変数

どのような値を使うのか、定義を行います。デフォルトで用意されていますが、カスタムで作成することもできます。変数はトリガーやアクションで使用します。

トリガー

アクションを起こす条件を定義します。

タグ

タグはトリガーを使用して、行いたいアクションを指定します。

---

これらを踏まえて、今回のページビューを設定するには、変数：アナリティクスIDを使ってトリガー：全てのページ遷移の条件でページビューをカウントとタグで設定します。さっそく設定しましょう。

1.タグの作成

「ワークスペース>タグ>新規」を押してください。

上の画面が表示されます。タグの設定を押してください。「タグタイプを選択」画面が開きますので、「ユニバーサルアナリティクス」を選択します。そうすると「Googleアナリティクス設定」で変数が指定できるようになります。「新しい変数」を選択・作成を行いましょう。

2.変数の作成

どこのアナリティクスに送るか変数を設定しましょう。トラッキングIDに対象のGoogleアナリティクスID（UA-xxxxxxxx）を入れてください。入力できたら変数名を入れて保存しましょう。

Googleアナリティクス設定に、作成した変数が入ります。

3.トリガーの選択

次にタグのトリガーを設定しましょう。どのタイミングでタグを送るか設定します。トリガーを押すとデフォルトの項目が用意されています。今回は「All Pages（全てのページ遷移がトリガー）」を選択しましょう。

---

これで、全ての設定が完了です。最後にタグ名を入れて保存しましょう。

テスト・リリースをしてみよう

では最後に作成したタグが正常に動いているかテストを行い、リリースしてみましょう。

ワークスペースに戻り、プレビューを押してください。オレンジ色の背景で「プレビュー中のワークスペース」と出たらテスト実行中となります。

タグを入れたページを見てみましょう。

タグを埋めたサイトの下に、タグマネージャのテスト画面が表示されます。
「Tags Fired On This Page」が実行されたタグを表します。今回作成した「ページビュー」が実行されています！これでテストは完了です。テストを終了するにはワークスペースの「プレビューモードを終了」をクリックしてください。

リリースを行うにはワークスペース右側の「送信」をクリックしてください。
バージョン名とバージョンの説明をクリックすれば、リリース完了です。

リリース履歴は「バージョン」から確認することができます。リリース後は「Googleアナリティクス>リアルタイム」からアクセスがカウントされているかチェックを行いましょう。

---

注）Googleアナリティクスを新しく作成したばかりの場合、リリース後しばらくページビューが取れない事があります。その場合、30分ほど時間を置いてから再度ページビューがカウントされているかチェックを行って下さい。

既にGoogleアナリティクスを導入している場合

ここで問題なのが既にGoogleアナリティクスを導入している場合。アナリティクスタグ削除によってページビューが取れなくなったり、2重カウントする場合があります。
誤差を最小限に抑えたい場合は、以下の順序で行うことをおすすめします。

1. 検証環境にタグマネージャを入れてページビューをリリースしておく
2. 本番環境リリース時にアナリティクスコードと差し替える

ちなみに、Googleタグマネージャへ移行しても、今までソースコードに記述していたイベントは問題なく動作します。

今回紹介したの機能はほんの一部！色々できる万能ツール

今回はGoogleタグマネージャの中でも、基本的な使い方とページビューの設定までをご紹介しました。
ただ、今回紹介したのは機能のほんの一部に過ぎません。アナリティクスでは、イベント管理、HTMLタグ埋め込み、SPA（Single Page Application）対応、クロスドメイン対応などが簡単に行なえます。
さらに、AdWordsの管理など、他サービスとの連携も可能です。なんでもできる万能ツールなのです！

次回はGoogleタグマネージャを使ったクリックイベントの管理方法をご紹介します。今まで煩雑に運用されていたクリックイベントが綺麗に整理できます。お楽しみに！