AMPのカスタマイズ Analyticsのトラッキングコードを実装

tacsan

6年前

WordPress Twenty Seventeen
AMPページに
Analyticsのトラッキングコードを実装

AMP化が完了すると、『AMP化の効果』が気になるところだが、残念ながら「AMP for WordPress」プラグインのインストールだけでは Google Analytics で計測されない。そこで、AMPページに【 Analyticsのトラッキングコードを実装】するカスタマイズを行った。

以下に、【 Analyticsのトラッキングコードを実装】する AMPのカスタマイズ要領を記載。

参考：

WordPress 目的の異なる AMP化で判ったこと

WordPress Twenty Seventeen 全く異なる目的で AMP化をしたことで理解できたこと判ったこと多数『Accelerated Mobile Pages』：通

2018-08-18

2023-10-07

Analyticsのトラッキングコードを実装する方法
方法ー１：AMP Analytics Options で設定。
方法ー２：functions.php で、AMPスクリプトを挿入する。
方法ー３：amp のテンプレートをカスタマイズ。
の３通りがあるが、今後、他のカスタマイズも行っていきたいので、今回は方法ー３を採用した。

方法ー１：AMP Analytics Options で設定。

方法ー２：functions.php で、AMPスクリプトを挿入する。

AMPプラグインが準備しているページフッターにフック。

add_filter( 'amp_post_template_analytics', 'xyz_amp_add_custom_analytics' );
function xyz_amp_add_custom_analytics( $analytics ) {
	if ( ! is_array( $analytics ) ) {
		$analytics = array();
	}
 
	// https://developers.google.com/analytics/devguides/collection/amp-analytics/
	$analytics['xyz-googleanalytics'] = array(
		'type' => 'googleanalytics',
		'attributes' => array(
			// 'data-credentials' => 'include',
		),
		'config_data' => array(
			'vars' => array(
				'account' => "UA-XXXXX-Y"
			),
			'triggers' => array(
				'trackPageview' => array(
					'on' => 'visible',
					'request' => 'pageview',
				),
			),
		),
	);
	return $analytics;
}

2019.01.07 追記。

「方法ー１：AMP Analytics Options で設定」に変更した。

参考：

ドキュメントに AMP コンポーネントの「script」タグが複数あります。

WordPress Twenty Seventeen AMPのカスタマイズ「script」タグの埋め込みを削除 Search Console の AMP で、AMP化したページが「有効

2019-01-07

2023-10-07

1. トラッキングコードの用意

Google Analytics の「管理」を開く。

「プロパティ選択」で、AMP化サイトを選択する。

「プロパティ設定」をクリックする。

トラッキングIDが表示されるので、メモして置く。

2. AMPテンプレートファイルのコピー

「wp-content」→「plugins」→「amp」の中に、「template」フォルダーがあるので、この中のすべてのファイルをコピーする。

「twentyseventeen-child」の中に、「amp」フォルダーを作成し、この中にコピーして編集する。

「AMP」プラグインは「amp」フォルダが存在していれば、プラグインのテンプレートではなく「amp」フォルダ内のテンプレートを優先的に認識するので、
　①．プラグインのファイルを直接いじらなくて済む。
　②．トラブルがあっても、（子）テーマ内の
　　「amp」フォルダにあるファイルを削除すれば、
　　元のAMPページが表示される。
　③．プラグインの更新に影響されない。
　④．WordPress ダッシュボードから編集できる。
と、安心・便利である。

3. 「html-start.php」のカスタマイズ

WordPress ダッシュボードのメニューから「外観」→「テーマの編集」を選択する。

右側の「テーマファイル」に表示される「amp」を展開する。

「amp」の中から「html-start.php」を選択すると、ソースコードが表示される。

「html-start.php」のソースコードの </head> タグの上に、analytics用の専用ライブラリを読み込むスクリプトコードを貼り付ける。

analytics用のスクリプトコード。

<!-- analytics header -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<!-- analytics header end -->

<body>の下に、ページをトラッキングするためのコードを貼り付ける。

ページをトラッキングするためのコード。（xxxxxxxx-x 部分の変更要）

<!-- analytics -->
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXXXXX-X"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>
<!-- analytics end -->