超必須!アナリティクスの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つ。

アドセンス記事までお楽しみに!

明日です!

CHECK管理人サイト YUICHI FUKUDA.COM