Accelerated Mobile Pages(AMP)の計測方法を理解する

Google AMPはグルメ分野では普及してていて食べログ、ぐるなび、HotPepperの大手3社全てが導入している。Google AMPによる優遇は中小サイトでは受けられないが、高速化メリットだけでも導入する価値がある。一方AMPでは二重計測されたり離脱率が上がるアクセス計測の課題がある(あった)。

グルメ分野でのAMP導入と大手サイトの優遇

スクリーンショットの例ではモバイル環境で「東京 パンケーキ」で検索している。食べログの東京のパンケーキ一覧からリンクされた各店舗がAMP化されていて検索結果にカードで大きく表示される。これは食べログ、ぐるなび、HotPepperに認められた優遇措置。羨ましいが食べログのAMPページは通常ページと遜色ない表現度で導入コストを考えれば妥当なご褒美だろう。

WordPressでのAMP化

WordPressならプラグインを利用して簡単にAMP化できる。個人的なおすすめはAMP for WordPressの方。

AMP for WPはAutomaticなど大手各社が開発しているが関連ページの表示がないなど簡素でリファレンス的な実装。AMP for WordPressの方がメニューの実装含め表現力が高い。どこまでこだわるかによるが初期設定とCSSの調整くらいなら1-2日でAMP化できる。

AMPでのGoogleAnalytics計測問題

だんだん解消されてきたがAMPのアクセス計測にはいくつか課題がある(あった)。別ドメインにキャッシュする構造上AMP→非AMP版へ画面遷移する際にCookieが引き継がれず別セッション(別ユーザー)扱いになってしまう。

具体的にはアクセス解析上、以下の影響がある。

  • ユーザー数、セッション数、直帰率が不自然に増加
  • セッションあたりのページビュー数とセッション継続時間が不自然に減少

例えば直帰率が90%とかになって「AMPにすると直帰率上がるからなー!」という誤解に繋がっている。

▼AMP導入で下がったPage/Visitの例

計測の問題は徐々に改善されてきているが自動ではやってくれず追加設定が必要。

担当サイトでもClient ID API を設定することで正常な計測になった。ポイントは非AMPサイトのトラッキングコードでuseAmpClientId=true記述を追加する点だ。AMP側ではなく既存の非AMP版の計測コード変更が必要な点は見落としている人も多そう。

gtag(‘config’, ‘UA-XXXXX-Y’, {‘use_amp_client_id’: true});

useAmpClientId=trueの検証

Google AMP Client ID API を設定する – アナリティクス ヘルプに書いてある通りだがjs最適化プラグインを入れているとキャッシュされていたりトラップが多い。技術者ではない個人ブロガーさんなんかはやれないのではないだろうか。