ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

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

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

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

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

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

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

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

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

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

アカウントの作成

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

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

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

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

Google Tag Managerのアカウント名を入力します

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

Google Tag Managerコンテナ名を入力し、設置場所の種類を選択します。

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

Google Tag Manager 利用規約確認画面

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

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

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

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

Google Tag Manager コンテナスニペット(コード)

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

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

SimplicityでのGoogle Tag Managerの設置方法

スクリプト部の設置

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

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

メニューからテーマの編集を選択する。

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

Simplicity 子テーマの編集画面

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

Simplicityの子テーマに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>タグの設置はテーマ側でまとめて行っています。
Header and Footerを使用したタグマネージャノンスクリプト部の設置

WordPress管理画面のメニュー[設定]をクリック、またはマウスオーバーして表示されるプラグインのリストから[Header and Footer]を選びます。

設定メニュー内のHead and Footerを選択

Header and Footerの設定画面が表示されます。After the <body>タグの入力欄にGoogle Tag Managerのノンスクリプト部のコードを貼り付けます。

After <body>タグの欄にGTMのノンスクリプト部コードを貼り付けます。

画面をスクロールダウンして、[save]ボタンを押して、保存実行します。

以上でタグマネージャ コンテナのコードの設置作業は完了です。

コンテナにアナリティクス タグを追加

Google Tag Managerのアカウント画面に戻ります。下の画面内の[新しいタグ]をクリックします。

Google Tag Manager 新たに作成したアカウントページ

以下の様な”名前のないタグ”の画面が表示されます。

タグ名入力前のタグ追加画面

“名前のないタグ”の部分に名前を入力します。ここでは例として、”Google Analytics”を入力しました。続いて、タグの設定欄内の”タグタイプを選択して設定を開始”の上に表示されるタグマークをクリックするとタグタイプの選択リストが画面右にスライドインして表示されます。

スライドインして表示されるタグタイプからユニバーサルアナリティクスを選択

タグタイプの中のユニバーサルアナリティクスをクリックすると、タグの設定画面に戻り、タグタイプにユニバーサルアナリティクスが表示されています。トラッキングIDを入力します。

タグ設定画面:アナリティクスのトラッキングIDを入力します

トラッキングIDの取得については、Google アナリティクス アカウントの作成とコードの設置の仕方の記事の該当部(リンク)をご参照下さい。

トラッキングIDを入力後、下に表示されるトリガー部の”トリガーを選択してこのタグを配信…”の上のアイコンをクリックすると、以下のトリガーの選択画面がスライドイン表示されます。アナリティクスの場合は、全ページ(All Pages)を選択します。(それ以外の選択肢は現状ありません。)

タグマネージャ コンテナのトリガー設定、全ページを選択

All Pagesをクリックするとコンテナの設定画面に戻ります。以下の様にタグにユニバーサルアナリティクス、トリガーは全ページの設定となっています

GTM アナリティクスコンテナ設定完了

青の[保存]ボタンを押します。Google Tag Managerのワークスペースの画面が表示されます。中央青色で表示される現在編集中のワークスペースの下に追加済みの数1と表示されています。この状態は、まだコンテナは公開されていません。(緑色で未公開のコンテナと表示されています。)

タグマネージャ ワークスペース

上段右の赤色の[公開]ボタンを押します。バージョン管理のための設定画面がスライドイン表示されます。バージョン名と説明を記入します。

タグマネージャ コンテナ バーション名と説明入力

名前と説明を記入後、右上の[公開]ボタンを押すと以下の画面が表示されます。

タグマネージャ アナリティクス コンテナ公開完了画面

設定を行ったユニバーサルアナリティクスのコンテナ・バージョン1の公開画面です。

以上でGoogle Tag Managerによるアナリティクスの設定作業完了です。

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

タグマネージャでアナリティクスを設置した場合、Simplicity側のアナリティクスの設定は必ず外して(削除して)下さい。

説明は長くなりましたが、作業自体は比較的シンプルです。タグマネージャを利用して、様々な解析をすることが可能になります。

タグマネージャはAMPも対応しています。AMPのアナリティクスの設定方法は以下の記事をご参照下さい。

https://www.blogging-life.com/install-amp-analytics-by-tag-manager/

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!