GoogleTagManagerで超簡単にGoogleAnalyticsを設定する方法

GoogleTagManagerで超簡単にGoogleAnalyticsを設定する方法

なにかと便利なGoogleTagManager
設置したら早速実際のタグを仕込んでみましょう。

GoogleTagManagerの設置がまだのかたはこちら

GoogleAnalyticsのトラッキングIDを取得

まずはGoogleAnalyticsから自分のサイトと紐付けるトラッキングIDを確認します。

GoogleAnalyticsを開いて左メニューから「管理」に進みます。

アナリティクスの管理をクリック
アナリティクスの管理をクリック

プロパティ列(真ん中の列)の「トラッキング情報」、「トラッキングコード」を順番にクリックします。

プロパティ列のトラッキングをクリック
プロパティ列のトラッキングをクリック

表示されるコードがトラッキングIDです。
コピーしておきましょう。

トラッキングID
トラッキングID

GoogleTagManagerの設定

次にGoogleTagManagerにGoogleAnalyticsのタグを仕込みます。

GTMを開きいて対象のコンテナ(GTM設定済のサイト)をクリックします。

GTMでコンテナを選択
GTMでコンテナを選択

新しいタグをクリック

新しいタグを追加
新しいタグを追加

タグの設定画面になります。
わかりやすい名前をつけて「タグの設定」あたりをクリックします。

タグ設定画面
タグ設定画面

タグを選択する画面になります。
GTMには穴埋め式で設定できるタグがいくつも用意されてます。
※ここに無いタグは「カスタムHTML」を選択して独自のタグを埋め込みますが今回はあらかじめ用意されているGoogleAnalyticsを選択します。

GoogleAnalyticsを選択
GoogleAnalyticsを選択

細かい設定もできますがとりあえずは「このタグでオーバーライド設定を有効にする」にチェックして表示される「トラッキングID」にさきほど確認したGoogleAnalyticsのトラッキングIDを設定して右上の保存ボタンをクリックします。

トラッキングIDを入力
トラッキングIDを入力

タグの設定画面に戻るので次は下段のトリガーを設定します。
※トリガーとは文字通り「引き金」という意味でこのトリガーイベントが発生したときに今設定したタグが実行されます。
GoogleAnalyticsでは「All Pages」のみなのでそのまま選択します。

トリガーはAllPagesを選択
トリガーはAllPagesを選択

設定はここまでです。

動作確認しましょう(重要)

GoogleAnalyticsに限らず、設定が完了したら必ず動作確認しましょう。
GTMではプレビューモードと呼ばれる検証機能を利用して動作確認ができます。

プレビューモードを起動

コンテナトップ右上のプレビューボタンをクリックすると下記オレンジ枠のとおりプレビューしてデバッグモードにします。

プレビュー設定
プレビュー設定

タグを仕込んだサイトで確認

GTM管理画面を開いている同じウェブブラウザでタグを仕込んだ自分のサイトを開きます。
画面下部にGTMのデバック画面が表示されます。
デバック画面ではHTMLのhead部分①とbody部分②に設置されたタグが実行されてるかどうかがわかります。
GoogleAnalyticsはhead部分に自動挿入されるので下記だと①で「Tags Fired On This Page」②で「Tags Not Fired On This Page」と表示されてるのがわかります。

Tags Fired On This Pageと表示されていればタグが実行されています。

有識者は「Fire」を直訳してしばしば「発火」と表現します。

プレビュー確認
プレビュー確認

確認できたらプレビューモードは終了させておきましょう。

GoogleTagManagerの公開設定を忘れずに

デバックで動作確認したらコンテナトップ画面でタグを一般公開しておきます。
右上の公開ボタンをクリックします。

公開設定
公開設定

名前の入力を求められたらわかりやすい名前をつけておきましょう

名前をつけて公開
名前をつけて公開

サイトとGoogleAnalyticsでも確認

念のためサイトにGoogleAnalyticsのコードを出力されてるか確認しておきましょう。
JavaScriptで出力されるため「ソースの表示」ではGTMのコードが表示されるだけでGAのコードは表示されません。
確認方法はchromeであれば右クリックの「検証」、FireFoxであれば右クリックの「要素を調査」で行います。
いずれもF12でも表示可能です。

head内に「https://www.google-analytics.com/analytics.js」があることを確認します。

GoogleAnalytics確認
GoogleAnalytics確認

GoogleAnalyticsでもリアルタイムで計測されてることを確認しておきましょう。

GoogleAnalyticsリアルタイムで確認
GoogleAnalyticsリアルタイムで確認

WordPressテーマの機能でGoogleAnalyticsを設定しない理由

実はWordPressテーマにはアカウントIDを入力すればGoogleAnalyticsが設定できる便利で簡単な機能もあります。
LION MEDIAだと
外観→カスタマイズ→アクセス解析設定で入力できます。

テーマ機能でGoogleAnalytics設定
テーマ機能でGoogleAnalytics設定

アクセス数などGoogleAnalyticsの基本的な機能はこれで十分ですがこの機能を使わずGTMで独自に設定した理由は高度な解析設定ができるようにしておきたいからなんです。

高度な解析設定が必要な場合は独自設定

逆にいうとよくわからなければ素直にテーマの機能設定でGoogleAnalyticsを利用可能にすることをおすすめします。
あとからでも変更できますので。

GoogleTagManagerカテゴリの最新記事