AMPページにGoogle タグマネージャでアナリティクスを設置する方法

AMPページには、通常のページとは異なる形式のアナリティクスのコードを配置する必要があります。AMP対応のテーマやプラグインは、アナリティクスのコードをAMP用に変換して配置する機能を備えています。

テーマのアナリティクス設置機能を使用せずにGoogle Tag ManagerでAMP対応のサイトにアナリティクスを設置した場合、AMPページにも同様にタグマネージャで設定を行う必要があります。（一部のAMP対応WordPress プラグインはGoogle タグマネージャをサポートしているものがあります。）

通常ページにタグマネージャで使用してアナリティクスを設置する方法は、以下に添付する記事をご参照下さい。

https://www.blogging-life.com/ua-gtm-on-simplicity-wp-theme/

Google タグマネージャは、AMPにも対応しています。AMP用のアナリティクスのサポートもデフォルトで備えています。本記事では、AMPページにタグマネージャでアナリティクスを設置する方法を紹介します。

タグマネージャでAMPページにアナリティクスを設置する方法

新しいAMP用コンテナを作成

Tag Managerのホームページにログインします。青色のバーにアカウント名が表示され、枠内にコンテナ名が表示されています。青色のアカウントバーの右側にある縦に三つ並んだドットをクリックします。

ドット部をクリックすると、ドロップダウンメニューでアカウント設定のオプションが表示されます。

メニューから”コンテナを作成”をクリックします。以下の様なコンテナの作成画面がウインドウ表示されます。コンテナ名を入力して、使用場所にAMPを選択します。

下に表示される青の［作成］ボタンを押します。作成したコンテナスニペットコードが表示されます。

コンテナスニペットコード

通常のタグマネージャのコンテナと同様にスニペットコードは、スクリプト部とノンスクリプト部の二つに分かれています。

スクリプト部は、AMPページの</head>のすぐ上（<head>タグ内の一番下）に配置します。ノンスクリプト部は、<body>タグ内の先頭に配置します。

ノンスクリプト部は、<body>タグ内の一番下でも動作はします。しかし、最適な解析データを得るためには、<body>タグ内の一番上に配置することをGoogleは推奨しています。

タグマネージャのコードをAMPページに配置する方法

AMPページにタグマネージャのコードを設置する方法は、大きく分けると対応するプラグインを使用するか、テンプレートファイルを編集するかの二つの選択肢があります。AMP用のプラグインではタグマネージャに対応しているものもあります。（別途紹介予定です。Simplicity以外のサイトでは、AMP対応プラグインの関数を利用してタグマネージャのコードを設置する自作プラグインで行っています。）

ここでは、テーマのテンプレートファイルを編集して設置する方法を紹介します。

Simplicityのテンプレートをファイルを編集してタグマネージャを設置する方法

現状、SimplicityのAMPページヘッダー部に挿入するための小テーマは用意されていないため、AMPのsingle.phpファイル（single-amp.php）を直接編集してタグマネージャーのコードを設置しています。

以下はタグマネージャーのコンテナスニペットコードを設置した箇所付近のコードの画像です。

</head>のすぐ上にスクリプト部のコード、<body>タグの直下にノンスクリプト部のコードを設置しています。

コードの貼り付けを行ったら、［ファイルを更新］のボタンを押してファイルを保存します。

親テーマを編集するのは、保守性が良くないためあまり好ましい方法ではありませんが、現状は暫定的に親テーマを編集して配置しています。

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

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

Google Tag Managerのアカウント画面に戻ります。下の画面内の［新しいタグ］をクリックします。（または、”新しいタグを追加”をクリックします。）

コンテナ名とタグの種別選択

タグに名前を入力します。タグの設定欄のタグのロゴをクリックし、表示されるタグタイプからユニバーサルアナリティクスを選択します。

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

トラッキングIDの入力

トラッキングIDをAMP専用にするか否か？

技術的な制約などから、AMPのトラフィックは通常のWebトラフィックとは異なるクライアントIDを使用しています。また、AMPページのトラフィックパターンは通常のページとはかなり異なります。そのためAMPのトラフィックを計測するのに別個（専用）のプロパティを使用することをGoogleは推奨しています。一つ（同じ）プロパティで、AMPとノンAMPのトラフィックを計測する場合は、データソースディメンションかカスタムディメンションを使用することを勧めています。

参照：　Adding Analytics to your AMP pages

プロパティを分ける理由についてのGoogleの説明、分けた場合の不都合なところ、難点などについては、以下の記事をご参照下さい。

https://www.blogging-life.com/use-separate-property-for-amp-or-not/

AMPと通常ページではトラフィックパターンは大きく異なるので、Googleが推奨するように異なるプロパティを使用した方が、より細やかな分析を行うことができます。その一方で、大まかなアクセス解析であれば、一つのプロパティでまとめて計測するのもオプションとしてはあります。上記の様に同じプロパティを使用する場合は、ディメンションで分けるのがGoogleの推奨ですが、フィルタで分けてレポートを見るのでも、大まかな分析としては十分だと思います。

フィルタを使用して、サイト全体（AMPとレギュラーページ）、AMPのみ、通常ページのみの表示設定を行う方がシンプルで一般的には十分だと思います。

https://www.blogging-life.com/filter-for-amp-pages-in-analytics/

アナリティクスの機能を利用して、詳細な分析を行う場合は、AMP用のプロパティを設定する方が適切だと思います。

Simplicityの機能でアナリティクスを設定した場合は、同じプロパティでAMPページと通常ページの解析を行います。一般的な使い方であれば、特に問題はなく、むしろフィルタを活用したりすれば、データ分析もし易いと思います。

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