AMPブログでGoogleAnalyticsの設置する方法

2020-06-11

(LastUpdated: 2020-06-11)

AMPで構築したこのブログに、GAを設定をしたいなぁと思ったので、調べながらトライしてみました。

AMPの公式ドキュメントを見ると、やたらと設定値がたくさんあって、戸惑いました。 AMP アナリティクスについて詳しく知る - amp.dev

細かく検証結果を見たい人や、Google Analytics以外を使いたい人は、いろいろ設定することでさらに便利に使えるようになるのです。

しかし、基本的にはシンプルな設定のみで実装できます。もちろん、Google Analyticsも問題なく機能します。

ここでは、Google AnalyticsをAMPで実装されたサイトに導入する、基本のやり方を書いてみたいと思います。

Google Analyticsの設定をする

フローチャートが貼られたホワイトボードを指でなぞるまずGoogle Analyticsを設定します。 Googleアカウントが必要になるので、ない人は取得しておきましょう。ログインしましょう。

アカウント

「管理ボタン」 👉 「アカウト作成」で作成できます。 プロパティをまとめる「フォルダのような役割」 と考えると、わかりやすいです。これは複数のサイトを管理している人にとっては便利な機能です。

サイトが一つだけの場合は、「アカウント一つに対してプロパティが一つ」という形になりますね。

プロパティ

一つのウェブサイトにつき一つ用意します。複数のページを、プロパティに持つことも可能です。

例えば、ブログとホームページを同じドメイン上に持っている人は、分けることが可能です。

データの収集結果を、別々に見ることが可能になります。

トラッキングコードを取得する

「トラッキングコード」 👉 「グローバルサイトタグ」にアクセスして、記載されているコードを取得します。

amp-analyticsコンポーネントを読み込む

octcatのステッカーが貼られたmacをあやつる人の画像ご存知の通り、AMPでは外部javascriptを挿入することができません。

しかし、AMPにはそれらの実装を手助けするための、専用のコンポーネントが沢山用意されております。その中に、グーグルアナリティクスを実装する為のコンポーネントがあります。それが、amp-analyticsコンポーネントです。

head内の記述

まずは、他のAMPコンポーネント同様、コンポーネントを読み込みます。

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

headのscriptに、amp-analyticsコンポーネントを読み込む記述を書きます。

AMPサイトにコードを設置する

紅茶を楽しみながらMACを操る女性の手の俯瞰画像 bodyタグの直下に書いていきます。次に、bodyの直下にコードを挿入します。冒頭に書いたように、たったこれだけの記述で動きます。

他のパラメーターは、さらに詳細にデータ取得が必要な場合に使うんですね。

  <amp-analytics type="googleanalytics">
    <script type="application/json">
      {
        "vars": {
          "account": "UA-XXXXX-Y" //トラッキングIDを設定
        },
        "triggers": {
          "trackPageview":　{
            "on": "visible",
            "request": "pageview"
          }
        }
      }
    </script>
  </amp-analytics>

最小限の記述で、さらりと実装を完了してしまいます。

コンポーネントを読み込む位置に注意

海っぽいところにいるおしゃれな女の子の画像最初、よくわからないエラーが出て困った・・・😢 調べてみると、amp-analyticsコンポーネントを読み込む位置を、上の方にしなきゃいけない ってことらしいです。

ページに AMP アナリティクス機能を追加するには、 AMP JS ライブラリの前にある <head> に次のスクリプトを挿入します。

Google Developers

というわけで、コンポーネントを読み込む順番を、変えてみました。

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

☝️こんな順番にしたら、バリデーションエラーが出なくなりました。

設置場所はheadの最後？bodyの最後？

ソファに深くかけてリラックスした男性がmacを操るすがた以前は、「bodyの閉じタグの直前」に置くものとされていたようです。しかし、現在推奨されているのは、「headの閉じタグの直前」 になりました。

これは、アナリティクスの読み込み＆処理開始のタイミングに違いがあったとのこと。処理が 「同期的」だったのが、「非同期的」 になった、ということみたいです。

同期と非同期とは何か？

同期は、ソースコードの上から順に処理をします。つまり、アナリティクスの記述が書かれている場所に到達するまで、他の処理をしながらやってくるイメージです。以前はbodyの閉じタグの直前に記述していたのですから、コンテンツが全部表示されてから、トラッキングの処理が動き出す という事ですね。

それに対して非同期は、順番ではありません。ページにアクセスがあったら、すぐに読み込みをする準備をします。その他の処理と並走しながら、処理をします。

これにより、他のコンテンツの読み込みを待つ必要がなくなるというわけです。

バリデーションエラーの原因はアドブロックでした

ノートパソコンの画面を見て「キーッ！」と鉛筆を噛む美しい女性このコンソールエラーがずっと消えなくて、しばらくハマった・・・

GET https://cdn.ampproject.org/v0/amp-analytics-0.1.js net::ERR_BLOCKED_BY_CLIENT

事例を探しまくるが、ヒントを見つけることができない・・・しばらく悩みました。さて、どうしたものか。

「ん？あれもしや・・・このブラウザの端っこで赤くなってるやつは・・・」 アドブロックかよっｗｗｗ chrome拡張のADBLOCKを、ONにしてるせいでした。超凡ミス・・・😓

ま、まぁ、ちゃんとエラーが消えてくれたので、OKとしましょう（笑）