超必須!アナリティクスのAMP対応方法を徹底解説
書いた時間が夜なのでこんばんは!
今日もY氏(@neverchange1414)のWEB(ワードプレス)のお話し。
300グラムのパックご飯を卵だけで2パック食った後は腰が重い。
さて、
今日は、自分のサイトに対応させたAMPページ用のGoogleアナリティクスコード。
AMPの導入方法やメリット・デメリットは前記事で説明済み。
AMPページ化したなら絶対に外せない設定なので要チェック!
マジ感謝!
関連記事:ワードプレスにAMPを導入する手順とメリット&デメリット
Analyticsの設定
AMPを導入するってことは、すでにブログを運営しているはず。
その時にGoogleアナリティクスの設定はしていると思うので、同じ要領でもう1つプロパティを作成する。
新規アカウントではなく、プロパティなので間違えないように。
作成方法
まず、Analyticsの管理画面。
赤線上部の自分のサイト名をクリック。
続いて新しいプロパティ作成をクリック。
必要事項を入力し、
トラッキングIDの取得
これでもう一個コードが作成される。
アカウント名は「ブログ名+AMP」とかわかりやすく。
これは何のためにするのか?!
AMPを導入すると、ページURL語尾に /amp を付与し閲覧可能になる。
ダイレクトな流入や、リンクからの流入、ブックマークやソーシャルからの流入は今まで通りのオリジナルページに飛ぶだろう。
AMPページをユーザーが見るきっけは検索からの流入時。
自動的にAMPページが表示される仕組みになる。
ということは、AMPページにもアナリティクスタグを設定しないと正確なデーターが取れない。
それ+、AMPページの効果測定もできない。
そういう理由からプロパティをもう一個作ったほうがいい。
別にAMPページのデーターはいいから、合算でもいいよって人は、元々のアナリティクスタグを使えばいい。
そしてAMPページにはオリジナルページの初代アナリティクスも埋め込もう!
そうすることでオリジナルページ+AMPの合算が初代アナリティクスで。
AMPページのレポートが二代目アナリティクスで計測できる。
AMPページをお試し導入と考え、効果などで今後の対応を決める!
そう、考えている人は必須の対策だと思うので忘れずに!
アナリティクスのAMPコード
まずはヘッダーに必要なスクリプトを設置。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
AMPプラグイン単体での使用なら、
プラグイン一覧ページからAMPプラグインの編集をクリック。
こんな感じで右サイドにファイルが並んでいるので、
amp/templates/single.php
を探してクリック。
赤枠で囲んだ部分にコピペで貼り付けて保存で終了!
続いてアナリティクスのコードを設置!
下記のコードを使用
<amp-analytics type="googleanalytics" id="analytics1"> <script type="application/json"> { "vars": { "account": "UA-XXXXX-Y" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } } </script> </amp-analytics>
コード内の「UA-XXXXX-Y」
その部分をAMP様に作成したコードから抜粋してコピペ。
そしてAMPプラグインのさっきと一緒のファイルに戻り、
amp/templates/single.php
水色枠の部分に貼り付ければオッケー!
AMPとオリジナルの合算レポートが知りたい場合は、
同じ要領でオリジナルのUA-XXXXX-Yをコピペし、
同じAMP用のアナリティクスコードに貼り付けて、ファイルにコピペ。
こんな感じで完成!
以上で設定は終わり。
AMP & Glue for Yoast SEO併用の場合
AMPプラグイン+Glue for Yoast SEO & AMP
このセットで運用をする場合はの方法。
ヘッダーへのスクリプト設置、コード作成までの手順は一緒。
ただ、コードを貼り付けるのはAMPプラグインのファイルではない。
左サイトメニューからSEOを選択し、一番下のAMPをクリック。
一番右のアナリティクスタブをクリックすると、
コードを挿入できるテキストボックスがあるのでコピペ。
保存で終了!
AMP FOR WP – Accelerated Mobile Pagesの場合
コード作成までは一緒。
このプラグインを使用時はヘッダーのスクリプトは自動で挿入されている。
こちらもAMP管理画面からコードを挿入できる。
左メニュー下部にあるAMPをクリックして、
→Getting Started
左メニューから→Analytics
親切なことに、UA-XXXXX-Y
この部分を入れるだけ!
以上で完了!
ふぅ疲れた〜
・
・
・
おい!ちょっと待て!
このパターンだと一個しか設定できないじゃないか?
2つ作れって言ったから作ったのに、おい!
そう!
このプラグインは一個しかコードを入れられない。
そこで、またプラグインファイルに直接書き込む。
管理画面から挿入するコードは、オリジナルでもAMP用でもどちらでも大丈夫。
余ったほうを直接ファイルに書き込むしかない。
しかし!
僕が見るにこのプラグイン、ワードプレス管理画面のプラグイン編集では該当箇所がない。
じゃあ無理なのか!?
大丈夫だ。
しかし!FTPを使用して書き込むしか方法がない。
なので、ちょっと上級者向けな対応になる。
これは自己責任で実施を。
一応ファイルの場所だけ簡単に説明すると、
wp−content → plugins
→ accelerated-mobile-pages
→ templates → design-manager
→ design-2 → footer.php
※ちなみに太字のdesign-2は、管理画面で自分が選んだデザイン番号のフォルダを選択しよう。
この順番で開いていこう。
最後のfooter.phpをエディタで開き、
ページ最下部に余ったコードを貼り付ければ問題なし。
これでセッティングは完了!
さぁ実際に計測してみよう!
AMPページ専用のプロパティも作成したので、これでAMPページ訪問者の動きが手に取るようにわかる。
導入すれば終わりではなく、その後の対策が重要。
思ったほどの効果が得られなかった場合は、
レポートから原因を追求し、改善をする。
もしくはAMPを撤退をする。
などなど。
オリジナルページの記事ページとはデザインも配置も違うので、個別記事ページのA/Bテストも兼ねることができる。
しっかりと分析して最高のブログにしよう!!
まとめ
今日は今話題のAMPページのアナリティクス設定をご紹介。
後はアドセンスの設定をしてしまえば、一通りのセッティングは完了!
AMP導入からアナリティクス、アドセンス、全て同記事で書いても良かったんだけど、超長文になる気がする。
だからやめました(_ _)
一個ずつ細かく説明したかったので3つに分けます。
残りはあと1つ。
アドセンス記事までお楽しみに!
明日です!