エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

  1. TOP
  2. コラム
  3. AMPページへGoogleAnalyticsを設定する方法@by Google タグマネージャー

AMPページへGoogleAnalyticsを設定する方法@by Google タグマネージャー

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/09/19
AMPページへGoogleAnalyticsを設定する方法@by Google タグマネージャー

AMP(Accelerated Mobile Pages)が世に出てから数年が経ちました。日本語での対応も始まり、大きなWebメディアだけが対応しているだけ。。。というイメージがそろそろ無くなってきている印象が出てきました。

Googleタグマネージャーなどの計測ツールでも順次対応が進んでいますので、今回はそんな波に乗り遅れないようAMPを始めたい方に、簡単にGoogleAnalyticsを設置する方法をご紹介します。

1.AMPにGoogleタグマネージャーを設定する方法

AMPページにGoogleAnalyticsを設置し、計測するまでには主に以下の手順が必要です。

1.AMP専用のGoogleタグマネージャーのコンテナを作成する

2.AMPページにGoogleタグマネージャーのトラッキングコードを設置する

3.Analyticsタグを設定する

4.プレビュー&公開

1.AMP専用のGoogleタグマネージャーのコンテナを作成する

まずは、AMP専用のコンテナを新規に作成します。
すでに、Googleタグマネージャーを利用している場合は「アカウントを新規作成」するのではなく「コンテナ」を新規作成する方が管理がしやすいですのでご注意ください。

コンテナ」を新規作成

アカウントの右上のボタンから「コンテナを作成」をクリックしてコンテナの新規作成をします。

コンテナ」を新規作成

コンテナ名を任意で入力したら、コンテナの使用場所には「AMP」を選択します。
これで、AMP用のコンテナの新規作成は完了です。

2.GoogleタグマネージャーでAnalyticsを設定する

2.AMPページにGoogleタグマネージャーのトラッキングコードを設置する

コンテナの作成後に発行されるコードをすべての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>

3.Analyticsタグを設定する

Analyticsタグを設定する

左側メニューからタグを選択し「新規」ボタンをクリックします。

Googleアナリティクス-ユニバーサルアナリティクス」を選択

タグタイプから「Googleアナリティクス-ユニバーサルアナリティクス」を選択してください。

トラッキングI

トラッキングIDの欄に、GoogleAnalyticsのトラッキングIDを入力します。
現在はPCやスマホなどのWebサイトで計測しているプロパティと同一のトラッキングコードを設定し集計することができます。

トリガーの設定

次は、トリガーの設定です。

トリガーの設定

トリガーは「All Pages」を選択すれば設定完了です。

GoogleAnalyticsの設置後のイメージ

こちらがGoogleAnalyticsの設置後のイメージです。

4.プレビュー&公開

保存が完了したら、プレビューで最終確認し公開すれば完了です。

3.~番外編~ CMS BlueMonkeyでAMP対応のGoogleタグマネージャーを設置する方法

余談にはなってしまいますが、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対応は欠かせない存在になるかもしれません。

セミナー情報

セミナー情報

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

デジタルマーケティングのすすめ

デジタルマーケティングのすすめ

無料ダウンロード

関連キーワード

GA Google 分析

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語

はじめての展示会出展までの道のりを描いたドッタンバッタン劇場

メールマーケティング