SimplicityにGoogle Tag Managerでアナリティクスを設置する方法

Google Tag Managerは、トラフィックの解析を行う各種タグの管理、設置をまとめて行うことができる便利なツールです。Google Tag Managerを利用すると、アナリティクス、AdWords、DoubleClickやサードパーティのタグをマニュアルでページに設置する代わりに、コンテナ(Container)に格納して一括して管理できます。（対応するタグの一覧）

Google Tag Managerはアナリティクスファミリーの一員です。アナリティクスのタグを利用して様々な解析を行う際に、Google Tag Managerを利用すると設置、管理が容易になります。Google アナリティクスのトラッキングコードの設置もサポートしているため、アナリティクスをサイトに設置することにも利用できます。

本記事では、SimplicityのサイトにGoogle Tag Managerを利用してアナリティクスのトラッキングコードを設置する方法を紹介します。他のテーマでも、基本的な手順、設置方法は同じです。

目次 - Table of Contents

1 Google Tag Manager アカウントを作成する
- 1.1 アカウントの作成
2 コンテナスニペットコードの種類と設置場所
3 SimplicityでのGoogle Tag Managerの設置方法
- 3.1 スクリプト部の設置
- 3.2 ノンスクリプト部の設置
4 コンテナにアナリティクスタグを追加

Google Tag Manager アカウントを作成する

Googleのヘルプページには、Tag Managerのアカウントは組織の最上のレベル、会社名を設定すると書かれています。通常、一つの会社に一つのアカウントがあれば、全てのサイトのタグを管理できます。

一つのGoogle アカウントで複数のTag Managerのアカウントを作成することも可能です。

Google Tag Managerでは、通常、アカウントを会社名、コンテナをドメイン名にするのが一般的なようです。私は、ドメイン毎にアカウントを分けています。

アカウントの作成

Tag Managerのホームページにアクセスします。

Googleのアカウントのログイン画面が表示された場合は、Analyticsと同じアカウントのメールアドレス、パスワードを入力することをお勧めします。（管理上、利便性が高いと思うためです。会社で複数の人が利用する場合は、該当しません。）

ログインすると以下の様なTag Managerのホーム画面が表示されます。画面上段左に表示される［アカウントを作成］をクリックします。

新しいアカウントの追加画面が表示されます。アカウント名を入力します。（通常は会社名等を入れます。）その下のボックス（Googleや他の人と匿名でデータを共有）をチェックすると、ベンチマークサービスを利用することができます。ベンチマークサービスは、サイトの特定につながるすべての情報を削除して、アカウントのデータとその他の多くの匿名サイトのデータと合わせて、総合的な傾向を表示する機能です。

アカウント名を入力し終えたら、［続行］ボタンを押します。続いて、コンテナの設定画面が表示されます。コンテナ名は、通常はサイトのURLを入力します。コンテナの使用場所を、”ウェッブ”、”iOS”、”Android”、”AMP”の中から選びます。通常のウェッブページであれば、ウェッブを選択します。

コンテナ名と設置場所の種類を選んで［作成］ボタンを押すと、Google Tag Managerの利用規約が表示されます。

利用規約の内容を確認して、同意した場合は、青の［はい］ボタンを押します。

タグマネージャーのコード（コンテナ・スニペット）が表示されます。

コンテナスニペットコードの種類と設置場所

コードは、スクリプト部とノンスクリプト部の二つに分かれます。

スクリプト部は<head>タグ内のできるだけ上の方に設置することが望ましいです。ノンスクリプト部は<body>タグのオープニング直後に設置します。

ノンスクリプト部を<body>タグの最後に配置しても、動作はするのですが、最適な結果を得るためには、<body>タグ開始直後に配置することが望ましい（Google推奨）です。

SimplicityでのGoogle Tag Managerの設置方法

スクリプト部の設置

Simplicityでの<head>タグ内へのGoogle Tag Manager コンテナスニペットのスクリプト部設置は子テーマのテンプレートファイルを編集して、コードを追加する方法が最も適しています。以下に設置手順を紹介します。

WordPressのダッシュボードメニュー内の［外観］をクリックし表示されるサブメニューからテーマの編集を選択します。

テーマの編集画面が表示されます。画面右側にテンプレートと表示され、その下に縦に並んでファイル名が表示されています。その中の”header-insert.php”と言うファイル名をクリックします。

header-insert.phpの編集画面が表示されます。ファイル内のコードが表示されます。本サイトの場合は、AdSenseのページ単位の広告が既に設置されています。Google Tag Managerのスクリプト部のコードを、ページ単位の広告コードの上に貼り付けます。（以下の画像参照）

ページ単位の広告コードより上にGTMのスクリプト部スニペットコードを貼り付けている理由は、当該スニペットは<head>タグ内のできるだけ上の方に配置することをGoogleが推奨しているためです。

Google アナリティクスで、WordPress ログインしているユーザー（サイト管理者）を除外したい場合は、上の画面内の”//ログインユーザーをカウントしない場合は//↓ここに挿入”の直下にコードを貼り付けます。

本サイトの場合は、アナリティクスでサイト運営者のIPアドレスを除外するフィルタの表示オプション設定を行っているため、ログインユーザーを含めてカウントする方の場所にGoogle Tag Managerのスクリプト部を設置しています。

https://www.blogging-life.com/analytics-exclude-internal-traffic/

ノンスクリプト部の設置

Simplicityでの、Google Tag Managerのノンスクリプト部の設置方法は、大きく分けると二つの方法があります。

一つは、テーマを編集して設置する方法です。しかし、子テーマで設置できるのは、<body>タグの一番最後になります。Googleが推奨する設置場所は、<body>タグ内の一番上（<body>の直下）です。（参照：タグマネージャヘルプ設定とインストールコンテナをウェッブページに追加する）

Googleの推奨に従う場合は、<body>タグの直下に設置します。親テーマのテンプレートファイルを編集する方法もありますが、あまりお勧めできません。以下にプラグイン Header and Footer を使用して<body>タグ直下にコードを設置する方法を紹介します。

[fa class=”fa-exclamation-triangle”] 注意事項

以下の方法は、通常ページの設置では問題ないのですが、SimplicityでAMP対応にしているとAMPページの方にもコードが設置されてしまいエラーとなります。AMP対応にしている場合は、子テーマのフッター挿入ファイル(footer-insert.php)にタグマネージャのノンスクリプトコードを設置して下さい。

Header and Footer のインストールと利用方法は、以下の記事を併せてご参照下さい。

https://www.blogging-life.com/pagelevelads-installation-plugin/

Header and Footerは、<head>タグ内にコードを挿入する機能も備えているのですが、タグマネージャのスクリプト部はできるだけ上に設置したいため、Simplicityの子テーマの方でまとめて設置しています。子テーマとプラグイン両方で<head>タグ内にコードを挿入するのは機能が衝突・重複するため好ましくないです。テーマではなく、Header and Footerの方でまとめて<head>タグ内に配置する方法も代案としてあります。本サイトでは、<head>タグの設置はテーマ側でまとめて行っています。