【WordPress】これでわかった！AMPの導入とアナリティクス対応手順

AMPへの対応はもう済ませたでしょうか？

AMPはAccelerated Mobile Pages の略でGoogleやTwitterなどの企業が共同参加しているプロジェクトです。スマホのGoogle検索結果にカミナリマークが表示されるときがありますよね、それががAMP対応ページです。

AMPに対応しているページは高速で表示されるので、検索結果で上位表示されやすくなるというものです。主に大手ニュースサイトで対応化が進んでいるようですが、最近では個人サイトでもAMPに対応している記事を多くみかけるようになりました。

AMPの導入

まずはAMPの導入手順からです。

AMPについて調べると様々な情報が出てきて混乱してしまいそうですが、WordPressの場合は導入だけならAMPのプラグインをインストールして有効化するだけなのでそれほど難しいことはないかと思いますが、AMPページのレイアウト変更までの流れを見ていきましょう。

WordPressにログイン。左メニューから「プラグイン」→「新規追加」で、検索枠にAMPを入力して探します。AMP関連のプラグインは沢山ありますが、公式のAMPが作成者”Automattic”のこちらのプラグインです。

「インストール」したら「有効化」を選択します。

特に設定する必要はないようで、これだけでAMPの実装は完了です。ここまでは驚くほど簡単ですね。

表示画面を確認

AMPプラグインを有効化させたら、まずはAMPページの表示を確認してみましょう。確認方法は、記事のURLに「/amp/」を付けるだけです。これで訪問ユーザーから自サイトのAMPページがどのように見えているかの確認をすることができます。

AMPといったらモバイル表示ですが、こちらはパソコンから当サイトのAMPページを確認したしたときの様子です。

Amazonアソシエイトは一見正常に作動(確認していない)しているようですが、アドセンスが完全に表示されていません。

AMPを有効化しただけだと、従来設定の広告が非表示になってしまいますしレイアウトも非常にシンプルなものとなってしまいます。従来のページと比べると一目瞭然。

レイアウトの変更

AMPの設定項目からレイアウトを変更することができるので見てみましょう。レイアウトの変更といっても色を変更できるだけですが、何もしないよりは従来サイトのイメージに近づけることができます。

WordPressのダッシュボード画面に戻り、左メニューから「外観」→「AMP」を選択。

続いて「デザイン」を選択。

ここでモバイルに表示されるサンプルを見ながらの変更作業です。ヘッダーのテキスト色とヘッダーの背景だけですが何もしないよりはましという感じでしょうか。

▼設定後

配色に「ライト」「ダーク」とありますが、ダークにしてしまうと画面構成が真っ黒になってしまうのであまりおすすめできません。

サーチコンソールで確認

続いてサーチコンソールで確認してみましょう。

サーチコンソールでは、メニューの「検索での見え方」→「Accelerated Mobile Pages」から確認することができます。

当サイトの場合はAMP有効化から2日で、一部のページがインデックスされているという状況です。

2件エラーがあるのが気になりますが、今回の目的はアナリティクスの設定なのでこれに関しては別の機会に解決してその様子を紹介できればと思います。

「AMPページ」アナリティクス設定

ここで本題のAMPページのアナリティクス設定です。これについてはアナリティクスの公式ページで解説されているので、それを元に設定していきたいと思います。

参考 : AMP ページにアナリティクスを追加する | Googleアナリティクス

以下の2つの記述を追記すればOK！

//追記①
<script async custom-element=”amp-analytics”
src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

//追記②
<amp-analytics type=”googleanalytics” id=”analytics1″>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-XXXXX-Y”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>

といってもどこに追記すればわかりませんよね。これはAMPのプラグインを直接編集します。ダッシュボードのメニューから「プラグイン」→「インストール済みプラグイン」を選択。

続いてAMPの「編集」を選択します。

するとテーマ編集のようにphpファイルが一覧表示されるので、一覧の中から「amp/templates/single.php」を探します。

「amp/templates/single.php」の<head>内にに以下の記述を追記後「ファイルを更新」すればOKです。

//追記①
<script async custom-element=”amp-analytics”
src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

続いて、もう一つの記述を追記する箇所を確認しましょう。

こちらは同じ「amp/templates/single.php」内の<body>内に追記します。正確にいうと『<body class=”<?php echo esc_attr( $this->get( ‘body_class’ ) ); ?>”>』の真下です。

↓以下の記述を追記。

トラッキングIDの「UA-XXXXX-Y」の部分は自分のアナリティクスアカウントから確認して記述しましょう。アナリティクス「ログイン」→「管理」→「トラッキング情報」→「トラッキングコード」の流れで確認できます。

これでアナリティクスの設定は以上です。通常ページとAMPページで別のプロパティで計測するという方法もあるようですが、とりあえずこのままで様子を見ていき、必要であればその方法も検討したいと思います。

まとめ

当サイトではAMPに対応した後急激にPVが下がってしまいました。これについては心配になり色々調べてみましたが、インデックスされたAMPページが従来の記事よりも優先的に表示されたためAMPのページにアクセスが移行したという見解でおそらく間違いないかと思います。

当サイトの記事は1記事で数百PV(日)ある記事もいくつかあるため、その記事がAMPにインデックスされたということでしょう。

それも今回のアナリティクスの対応でしっかりカウントされることかと思いますが、それよりも心配なのがアドセンスの問題です。

AMPページに訪問ユーザーが移行したということは、広告非表示のページに多くのユーザーがなだれ込んでいるということなのでこれを対処するにはAMPページにも早急にアドセンスを対応させるしかありません。ということで、次回はAMPページにアドセンスを対応させる手順を紹介したいと思います。

目次

AMPの導入

表示画面を確認

レイアウトの変更

サーチコンソールで確認

「AMPページ」アナリティクス設定

まとめ