Pocket

GoogleタグマネージャーがAMPでも設定ができるようになったので、WordPressのAMPプラグインのフックポイントをうまく利用してタグマネージャーのタグを実装してみました。

タグマネージャーでAMP用のコンテナを作成

AMP用のタグマネージャーのコードはウェブ用とは異なるため、AMP用のコンテナを新規で作成する必要があります。「管理」メニューからコンテナのプルダウンをクリックすると「コンテナを作成」選択します。

タグマネージャーコンテナ作成

コンテナ名を入力して、「AMP」を選択し、作成ボタンを押します。すると、AMPページに貼り付けるコードがポップアップされます。

タグマネージャーコード

この発行されたAMP AnalyticsとGoogle Tag ManagerのコードをAMPプラグインのフックポイントを利用して挿入します。

AMP用analytics.jsの読み込み

まずはhead要素内にAMP用のanalytics.jsを読み込みます。AMPプラグインにはhead用のフックポイントamp_post_template_headが準備されているので、テーマのfunctions.phpに以下のコードを書き込みます。

タグマネージャー用のタグ読み込み

こちらのタグはbody要素内に表示させます。こちらも同様にAMPプラグインのフックポイントを利用します。フックポイントは、amp_post_template_footerを使用して表示します。
functions.phpに以下のコードを書き込みます。(GTM-XXXXXXXはご自身のコンテナIDになります)

タグマネージャーの説明には、「このコードを<body>タグの先頭に貼り付けてください。」と書かれていますが、AMPプラグインにはbody要素直後にフックポイントが存在しないので、フッターのフックポイントで対応しました。動作確認しましたが問題ないようです。

タグマネージャーのコンテナにGoogle Analyticsの設定と公開

新しく作成したAMP用コンテナにUniversal Analyticsのタグを設定します。Google Analyticsのプロパティ設定に記載されているトラッキングIDを設定して、トリガーを「All Page」に設定して更新します。

Universal Analyticsのタグマネージャー設定

設定が終わったら、コンテナを公開します。

Google Analyticsの動作確認

最後に動作確認を行います。AMPページは、通常の投稿ページのURLの後ろに「/amp/」を追記します。(例:http://www.terakoya.work/wp_query-no_found_rows/amp/

リアルタイム検索でAMPページ確認

AMPページにアクセスして、リアルタイムのサマリーにある上位のアクティブページに該当のAMPページのURLが表示されれば動作OKです。AMP用のAnalyticsは、「ディスプレイ広告向け機能を有効にする」などの細かい設定はまだできないようです。とりあえず計測できる感じでしょうか。バージョンアップに伴ってできるようになるのかな?

参考サイト

Google タグマネージャの概要
https://support.google.com/tagmanager/answer/6102821