AMP(Accelerated Mobile Pages)が世に出てから数年が経ちました。日本語での対応も始まり、大きなWebメディアだけが対応しているだけ。。。というイメージがそろそろ無くなってきている印象が出てきました。
AMPページにGoogleAnalyticsを設置し、計測するまでには主に以下の手順が必要です。
1.AMP専用のGoogleタグマネージャーのコンテナを作成する
2.AMPページにGoogleタグマネージャーのトラッキングコードを設置する
3.Analyticsタグを設定する
4.プレビュー&公開
まずは、AMP専用のコンテナを新規に作成します。
すでに、Googleタグマネージャーを利用している場合は「アカウントを新規作成」するのではなく「コンテナ」を新規作成する方が管理がしやすいですのでご注意ください。
アカウントの右上のボタンから「コンテナを作成」をクリックしてコンテナの新規作成をします。
コンテナ名を任意で入力したら、コンテナの使用場所には「AMP」を選択します。
これで、AMP用のコンテナの新規作成は完了です。
コンテナの作成後に発行されるコードをすべてのAMPページに設置します。
貼り付ける場所は
<head> タグの最後と<body>タグの先頭の2種類コードがあります。
1つめはAMPページの<head>タグの内、最後に貼り付けます。
<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
2つめはAMPページのタグの先頭に貼り付けます。
<!-- Google Tag Manager --> <amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXgtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>
左側メニューからタグを選択し「新規」ボタンをクリックします。
タグタイプから「Googleアナリティクス-ユニバーサルアナリティクス」を選択してください。
トラッキングIDの欄に、GoogleAnalyticsのトラッキングIDを入力します。
現在はPCやスマホなどのWebサイトで計測しているプロパティと同一のトラッキングコードを設定し集計することができます。
次は、トリガーの設定です。
トリガーは「All Pages」を選択すれば設定完了です。
こちらがGoogleAnalyticsの設置後のイメージです。
保存が完了したら、プレビューで最終確認し公開すれば完了です。
余談にはなってしまいますが、CMS BlueMonkeyでAMP対応のGoogleタグマネージャーの設置が簡単なので最後に少しご紹介。
CMSメニューよりメディア配信>AMP設定へ進みます。
基本設定の欄に「AMP用トラッキングコード」の入力欄がありますので、そちらにGoogleタグマネージャーを作成した際に出力された<body>タグ内に設置するコードを貼り付けます。
<!-- Google Tag Manager --> <amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXgtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>
以上、保存していただければ完了です。 ※その他AMPの設定や、AMPを始めるのに必要な設定や費用などについてはお問い合わせください。
いかがでしたでしょうか。
AMP対応の波は続々とやってきます。すでに8月にあったGoogleのアップデートをはじめスマホでの閲覧、スピードなど重要視されている傾向が見られます。
自社サイトの情報をいかに、多くのユーザーに届けるか、快適にユーザーに閲覧させることができるか。Webマーケティングを中心としたスマートフォンへの対応はまだまだこれから変化していくでしょう。
そして、これから未だ見ぬデバイスへの対応の第一歩としてAMP対応は欠かせない存在になるかもしれません。