Google Tag Managerを使って、AMP対応サイトでアナリティクスを使用できるようにする

最近、Next.jsでAMP対応サイトを作成しました。 HTML ≒ AMPだと思っていましたが、HTML ≠ AMPだということを思い知らされました。

その中でも苦戦したのがamp-analyticsタグを使ったAMP環境化でのGoogleアナリティクスの実装だったんですが、思わぬところで引っかかってしまったので、同じ穴に陥まる人が1人でも減るように残しておきます。

ちなみにGoogleアナリティクスだけでいいよって人も、タグマネージャーで実装しておくと後が楽なので、これを機に設定しておくことをお勧めします。

余談ですが、アナリティクス関係はGoogleで検索すると、SEO完璧でとんでもなく長文な企業のオウンドメディアがたくさん出てきますが、なかなかほしい情報にたどり着けないですよね…

最も注意が必要な点

まず注意していただきたいのが、Googleアナリティクスにはプロパティのバージョンには

1. Google アナリティクス 4(最新、測定IDが「G-」で始まる)
2. ユニバーサル アナリティクス(1つ前のバージョン、プロパティIDが「UA-」で始まる)

上記の2種類が存在し、現在新規でプロパティを作成すると、標準でGoogle アナリティクス 4が作成されます。

しかしAMPページでは、Googleアナリティクス 4をサポートしていません。

そのため、もしGoogle アナリティクス 4のプロパティしか作成していない場合は、プロパティを作り直す必要があります。

また、Googleタグマネージャーについても、専用のコンテナを作る必要があります。

今回はユニバーサル アナリティクスのプロパティを用意していることを前提として進めていきます。

Googleタグマネージャーでコンテナを作る

Googleタグマネージャーについて、AMPページで使用する場合は、専用のコンテナが必要になります。

すでにコンテナを作っていたとしても、AMPページを作成する場合は、新にコンテナを作る必要があります。

アカウント一覧からコンテナの新規作成を選ぶと、以下のような画面が表示されます。

ターゲットプラットフォームに、必ずAMPを選択してください。

タグマネージャーにアナリティクスのプロパティを紐づける

コンテナを作成したら、ユニバーサルアナリティクスのプロパティを紐づけます。

タグの新規追加から、タグの種類に「Google アナリティクス：ユニバーサル アナリティクス」を選択します。

トラッキングIDのアナリティクスのプロパティID(UA-から始まるID)を設定し、トリガーには「All Pages」を設定します。

後は画面右上の「公開」ボタンからバージョンを更新し、タグマネージャー側の設定は完了です。

ウェブサイトにamp-analyticsタグを貼り付ける

次に、ウェブサイト側の設定です。

AMPページでは、HTMLのHeadタグ内とBodyタグ内に、それぞれ要素を追加する必要があります。

タグマネージャーの画面上部に「GTM-XXXXXX」というIDが表示されているので、そこをクリックすると、これから紹介する内容と同様の操作手順が参照できます。

Headタグ内

Headタグには固定で以下のタグを貼り付けます。

環境によって特に書き換える必要はありません。

<script
  async
  custom-element="amp-analytics"
  src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>

Bodyタグ内

次にBodyタグ直下に設置するタグです。

以下のタグについて、「GTM-XXXXXX」の部分を、タグマネージャーのIDに書き換えてください。

SOURCE_URLの部分はそのままで大丈夫です。

<amp-analytics
  config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXX&gtm.url=SOURCE_URL"
  data-credentials="include"
></amp-analytics>