AMPサイトでgoogle analyticsを設置する方法

AMPで構築したこのブログに、GAを設定をしたいなぁと思ったので、調べながらトライしてみました。
ここでは、ざっくりと設置方法だけを解説していきますね。

  1. 設置に必要な手順
  2. トラッキングコードを取得する
  3. 設置場所はheadの最後?bodyの最後?
  4. AMPサイトに設置する方法
  5. ADBLOCKとか入れてるから・・・(;´∀`)

公式のドキュメントや解説はこちら。
わかりやすく詳細が書いてあるので、詳しく知りたい方はぜひご一読を。
AMP ページにアナリティクスを追加する | AMP ページ向けアナリティクス | Google Developers

設置に必要な手順


まずgoogle analyticsにログインしましょう。
Googleアカウントが必要になるので、ない人は取得しておきましょう。

感動したのは、設定が簡単なこと!
特に戸惑うような手続きもなく、analiticsの初期画面までたどり着けます。
さすがはgoogle。

アカウント

「管理ボタン -> アカウト作成」で作成できます。
プロパティをまとめる「フォルダのような役割」 と考えると、わかりやすいです。
とはいえ、多くの方は「アカウント一つに対してプロパティが一つ」という形になると思います。

企業のサイトなどを、複数人で管理する場合に活用できる機能ですね。

プロパティ

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

各プロパティごとにデータを収集していきます。

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


トラッキングコード -> グローバルサイトタグ
ここに記載されているIDを使います。
コードをコピーして、使用に備えます。

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


閉じタグである/headの直前に置きます。
以前は/bodyの直前に置くのが推奨されていたようです。

では、どう違うの?

この違いは、どうやら、アナリティクスの読み込み&処理開始のタイミングに違いがあったらしいです。
詳しく言うと、処理が 同期的 だったのが、非同期的 になった、ということみたいです。

ちょ、ちょっと難しい・・・😅

じゃあ同期と非同期を説明

同期は、ソースコードの上から順に処理をします。
それに対して非同期は、順番とは関係なく、すぐに処理をする準備をします。

つまり、以前の書き方では、メインコンテンツが表示されてから、トラッキングの処理を走らせていたという事になります。

非同期にすることで、他のコンテンツの読み込みのスピードに影響されることなく、GAの処理を開始できます。

AMPサイトに設置する方法


さぁ、ようやく本題です。
ご存知の通り、AMPでは外部javascriptを挿入することができません。

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

実装のしかた

AMP HTMLに記述していきます。
まずは、他のAMPコンポーネント同様、コンポーネントを読み込みます。

headのscriptに、以下のような要領で読み込みをします。

head内の記述

headの中に、使うコンポーネントのライブラリを読み込む記述を書きます
今回はamp-analyticsですね。

<script async custom-element="amp-analytics" src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script>
☝️訳あって、このsrc=以降のリンクをシングルクォートで囲んでいます。
正式にはダブルクォートになっています 🙏
以降の記述もその様になっております。

body内の記述

次に、bodyの直下にコードを挿入します。

<amp-analytics type="googleanalytics">
    <script type="application/json">
      {
        "vars": {
          "account": "UA-XXXXX-Y" //トラッキングIDを設定
        },
        "triggers": {
          "trackClickOnHeader" : {
            "on": "click",
            "selector": "#header",
            "request": "event",
            "vars": {
              "eventCategory": "ui-components",
              "eventAction": "header-click"
            }
          }
        }
      }
    </script>
  </amp-analytics>

後のち識別しやすいように、amp-analytics要素にIDをつけるのをおすすめしているようですね。
サクッと実装完了です。

エラーが出てしまう

Google developer toolのconsoleにエラーが出てしまう。

ハマった・・・

やっぱりこう言う時には、公式ドキュメントに帰りましょう。

ページに 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>

ADBLOCKとか入れてるから・・・(;´∀`)


このコンソールエラーがずっと消えなくて、しばらくハマった・・・
GET https://cdn.ampproject.org/v0/amp-analytics-0.1.js net::ERR_BLOCKED_BY_CLIENT

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

「ん?あれもしや・・・このブラウザの端っこで赤くなってるやつは・・・」

アドブロックかよっwww

chrome拡張のADBLOCKを、ONにしてるせいでした。
超凡ミス・・・😓

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

#amp
#google
#analytics
Chaos boy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。