GAをAMPサイトに実装する
AMPで構築したこのブログに、GAを設定をしたいなぁと思ったので、調べながらトライしてみました。
AMPの公式ドキュメントを見ると、やたらと設定値がたくさんあって、戸惑いました。
AMP アナリティクスについて詳しく知る - amp.dev
細かく検証結果を見たい人や、Google Analytics以外を使いたい人は、いろいろ設定することでさらに便利に使えるようになるのです。
しかし、基本的にはシンプルな設定のみで実装できます。
もちろん、Google Analyticsも問題なく機能します。
ここでは、Google AnalyticsをAMPで実装されたサイトに導入する、基本のやり方を書いてみたいと思います。
Google Analyticsの設定をする
まずGoogle Analyticsを設定します。
Googleアカウントが必要になるので、ない人は取得しておきましょう。
ログインしましょう。
アカウント
「管理ボタン」 👉 「アカウト作成」で作成できます。
プロパティをまとめる「フォルダのような役割」 と考えると、わかりやすいです。
これは複数のサイトを管理している人にとっては便利な機能です。
サイトが一つだけの場合は、「アカウント一つに対してプロパティが一つ」という形になりますね。
プロパティ
一つのウェブサイトにつき一つ用意します。
複数のページを、プロパティに持つことも可能です。
例えば、ブログとホームページを同じドメイン上に持っている人は、分けることが可能です。
データの収集結果を、別々に見ることが可能になります。
トラッキングコードを取得する
「トラッキングコード」 👉 「グローバルサイトタグ」にアクセスして、記載されているコードを取得します。
amp-analyticsコンポーネントを読み込む
ご存知の通り、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サイトにコードを設置する
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の最後？
以前は、「bodyの閉じタグの直前」に置くものとされていたようです。
しかし、
現在推奨されているのは、「headの閉じタグの直前」
になりました。
これは、アナリティクスの読み込み＆処理開始のタイミングに違いがあったとのこと。
処理が 「同期的」だったのが、「非同期的」 になった、ということみたいです。
同期と非同期とは何か？
同期は、ソースコードの上から順に処理をします。
つまり、アナリティクスの記述が書かれている場所に到達するまで、他の処理をしながらやってくるイメージです。
以前はbodyの閉じタグの直前に記述していたのですから、コンテンツが全部表示されてから、トラッキングの処理が動き出す という事ですね。
それに対して非同期は、順番ではありません。
ページにアクセスがあったら、すぐに読み込みをする準備をします。
その他の処理と並走しながら、処理をします。
これにより、他のコンテンツの読み込みを待つ必要がなくなるというわけです。
バリデーションエラーの原因はアドブロックでした
このコンソールエラーがずっと消えなくて、しばらくハマった・・・
GET https://cdn.ampproject.org/v0/amp-analytics-0.1.js net::ERR_BLOCKED_BY_CLIENT 事例を探しまくるが、ヒントを見つけることができない・・・
しばらく悩みました。
さて、どうしたものか。
「ん？あれもしや・・・このブラウザの端っこで赤くなってるやつは・・・」
アドブロックかよっｗｗｗ
chrome拡張のADBLOCKを、ONにしてるせいでした。
超凡ミス・・・😓
ま、まぁ、ちゃんとエラーが消えてくれたので、OKとしましょう（笑）