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最適化プラグインを入れているとキャッシュされていたりトラップが多い。技術者ではない個人ブロガーさんなんかはやれないのではないだろうか。

WooThemesを日本語化する

WordPressの有料テーマWooThemesを使っている。大体において日本語でも問題ないが「View all posts by xxx」みたいに英語のままになっている箇所がある。これを日本語化したい。幸いWooThemesはpo/moファイルでの国際化に対応しているので追加プラグインを入れ自分で言語ファイルを追加してやれば日本語化できる。

Translating WooCommerce (Localization) | WooThemes Documentation

原宿・表参道.jpのWordPressテーマを変更しました

原宿・表参道.jpのWordPressのテーマを新しいものに変えました。今までWooThemesの有料テーマ「CityGuide」を使っていたのですがGoogleからMapAPIのバージョン変わるよ〜と通知が来ていたのでを機会にバッサリと。

テーマはWooThemesの有料テーマCanvas – A WordPress theme with complete style controlです。割とベーシックなテーマですがオプションが死ぬほど付いていて色々カスタマイズできるタイプです。WooThemesは沢山有料テーマを出していますがサポート切れにならないようリリースが新し目の中から選んでみました。

WooThemesについて3年ほど利用してきた中で言うと、頻繁にアップデートされるのがいいですね。WordPress界隈ではTimThumb.phpのセキュリティホールが話題になったりしましたがフリーのテーマなどでは放置され勝ちだと思うんですよ。

今回からGithubのprivateリポジトリに放り込んでローカルのWordPress環境でテーマ編集、本番側はコマンド一発で反映されるようにしました。これで安心して新機能を試せる、というわけです。

原宿・表参道.jp