ブロギングライフ

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

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

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

Google タグマネージャ ログイン後の画面

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

タグマネージャ アカウント設定メニュー項目表示

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

コンテナ名を入力して、使用場所AMPを選択します

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

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

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

タグマネージャ AMP用コンテナ スクリプトコード

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

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

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

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

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

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

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

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

SimplicityのAMP single.phpファイルにタグマネージャーのコードを設置

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

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

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

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

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

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

タグマネージャンの管理画面から新しいタグを追加をクリックします

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

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

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

トラッキング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)を選択します。(それ以外の選択肢は現状ありません。)

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

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

コンテナの設定を保存

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

青の[保存]ボタンを押します。

AMP用コンテナの公開

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

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

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

AMP用コンテナ公開後の画面

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

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

タグマネージャは一旦ページに設定してしまえば、タグの追加や変更はタグマネージャの管理画面で柔軟に行うことができます。アナリティクスや他の解析タグを使用する場合は、とても便利な機能です。

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

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

Return Top
error: Content is protected !!