よしみです。
AMPページでページの高速化を実現し、アクセス数を楽しみに計測したら「あれ？少なくない？？」と感じたことはありませんか？AMPページを計測するにはちょっとした作業が必要になります。
Contents
AMPページをGoogleアナリティクスで計測する方法
AMP対応GA用ライブラリを読み込むのJSを
AMPページを計測するためには、専用のライブラリを読み込むことが必要です。
次のJavaScriptコードを、<head> 〜 </head> セクションの中かつAMP JS libraryよりも前に記述します。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <script async src="https://cdn.ampproject.org/v0.js"></script>
ページ トラッキングコードの記述
次のコードを<body> 〜 </body>セクションに記述します。
<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部分はみなさんのGoogleアナリティクスのプロパティIDになります。
イベントトラッキングなども計測したい
AMP Analytics対応のGoogleアナリティクスではカスタマイズすることで「イベントトラッキング」や「ソーシャル インタラクション」の計測も可能になります。イベントトラッキングではボタンのクリック、ソーシャル インタラクションではユーザーが Twitter の「ツイート」リンクをクリックした回数などを計測可能です。
アナリティクスのプロパティを分けてAMPページのみを解析する方法
そもそもプロパティとは？？となってしまうかもしれませんが、アカウントの下に紐ついているアクセス解析したいサイトのことです。
- アカウント
- プロパティ
- ビュー
になります。
例えば、複数の薬剤師サテライトサイトを作成した場合は、薬剤師求人サテライトサイトアカウントを作り、そこに解析したいサイトとしてプロパティを作成していくという感じです。
AMPページのみを解析できる様にプロパティを分けておくことで、通常アクセス数との混同を避けることができ、詳細なアクセス解析が可能になるのです。
Gogoleアナリティクスでの手順は簡単です。
- Googleアナリティクスで別のプロパティを作成
- amp-analyticsコードにアナリティクスのプロパティIDを記述
プロパティを作成する
アナリティクスのダッシュボード「管理」タブをクリックします。
管理ページに遷移しましたた、プロパティを作成したいアカウントを選択します。その後、プロパティをクリックし「新しいプロパティを作成する」をクリックします。
新しいプロパティページでは、サイト名各種設定を行います。
AMPページのプロパティということを一目でわかりやすく登録することが時間短縮のポイントです。
ウェブサイトの名前に「サイト名+AMP」などと入れるとわかりやすいですよね。またうぇぶさいとのURLはAMPだからといってURLが変わるわけではありませんので、ご注意を。ただ、WordPressのプラグインを利用していたりして。ページの後ろに/ampというURLが自動生成されるのであれば設定しても良いと思います。
プロパティIDを設置する
プロパティIDをチェックします。
上記「amp-analytics部分」のUA-XXXXX-YにプロパティIDを記述して完了です。
最後に
いかがでしたでしょうか。
AMPページの計測方法に関して、基礎部分を紹介させていただきました。イベントトラッキング、ソーシャル インタラクション、カスタムディメンションなどカスタマイズすると分析・解析する項目が増えますので、よりユーザーに最適化されたサイトを作り上げてくことが可能になるはずです。ECサイトであればイベントトラッキングの組み合わせでカート落ちや会員登録などの計測も有益なものになるはずです。
WordPressを利用されている場合はAMPページはプラグインを利用することで比較的簡単に設定可能なので、合わせてアナリティクスの設定もしてみてください。
