Google Analyticsの遅延読み込み

Google Analyticsを設置するとPagespeed Insightのスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込み（lazyload）するようにしてスコア低下を回避します。lazysizes.jsやjQueryなどの他のライブラリを必要とせず、単体で動作します。

解説

具体的には、初回のマウススクロールかマウス移動で発火するJavaScriptを使ってGoogle Analyticsのタグを読み込みます。初回のマウススクロールかマウス移動が発生しないかぎりスクリプトファイルを読み込みませんので、Pagespeed Insightのスコアが低下しません。

欠点としては、スクリプト読み込みまでに至らなかった人は拾えない（つまりページを一切スクロールせず離脱した人の直帰率が反映されない）ことや、スクリプト読み込みの遅れによりセッション継続時間（サイト滞在時間）が実際より短く算出される可能性があることなどです。

読み込みたいタグ

Google Analyticsのサイトから取得できるトラッキングコードのグローバルサイトタグ（gtag.js）が下記のようなものだったとします。「UA-11111-01」のところには自分のトラッキングタグの情報が挿入されているはずです。

あるいは、新しいGoogle AnalyticsのタグシステムであるGA4に対応したアカウントの場合はIDが「G-12345ABCDE」のようなGから始まるトラッキングIDかもしれません。その場合は2ヶ所の「UA-11111-01」の代わりに「G-12345ABCDE」を当てはめてください。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-11111-01"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-11111-01');
</script>

設置する遅延読み込みタグ

下記のような形で初回のscrollかmousemoveのイベントが発生したらbodyの最下部にグローバルサイトタグ（gtag.js）を読み込んでいます。例によってUA-11111-01のところ（2箇所）には自分のトラッキングID（UA-11111-01またはG-12345ABCDEなど）を記入してください。このscriptをスキンのどこか（</body>の直前など）に書き込んでおきます。

<script>
function lazyAnalyticsScript() {

//スクリプトの読み込みが1回目であることを確認するため
 var scrollFirstTime = 1;

//スクロールとマウス動作を検出
 window.addEventListener("scroll", oneTimeFunction, false);
 window.addEventListener("mousemove", oneTimeFunction, false);
 function oneTimeFunction() {
  if (scrollFirstTime === 1) {

//スクリプトの読み込みを1回限りにするため
   scrollFirstTime = 0;

//1つ目のscriptタグの書き込みこみ
   var adScript = document.createElement("script");
   adScript.src = 'https://www.googletagmanager.com/gtag/js?id=UA-11111-01';
   document.body.appendChild(adScript);

//2つめのscriptタグの書き込み
   var adScript2 = document.createElement("script");
   adScript2.innerHTML = 'window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag("js", new Date()); gtag("config", "UA-11111-01");';
   document.body.appendChild(adScript2);

//念のためeventListenerを削除
   window.removeEventListener("scroll", oneTimeFunction, false);
   window.removeEventListener("mousemove", oneTimeFunction, false);
  }
 }
}
lazyAnalyticsScript();
</script>

あるいは、このテキストをanalytics.phpという名前のファイルにして保存し、スキンの</body>の直前に<?php include_once("analytics.php") ?>を設置してPHPでこのファイルを読み込みます。

空行やコメント行は適宜削除してもOKです。JavaScriptをもう少し洗練させればより短くきれいに書けると思いますが、ひとまずこれで運用しています。

PR「確かな力が身につくJavaScript「超」入門 第2版」

JavaScriptの入門書としては現在発売されているものでは下記の『「確かな力が身につくJavaScript「超」入門 第2版」』が一番わかりやすく優れていると思います。HTML・CSSなどを習得してJavaScriptも学び始めたいという人にはこの本をオススメします（すでにある程度の知識がある人には若干もの足りないかも知れない）。

確かな力が身につくJavaScript「超」入門 第2版 | 狩野 祐東 |本 | 通販 | Amazon

Amazonで狩野 祐東の確かな力が身につくJavaScript「超」入門 第2版。アマゾンならポイント還元本が多数。狩野 祐東作品ほか、お急ぎ便対象商品は当日お届けも可能。また確かな力が身につくJavaScript「超」入門 第2版もアマゾン配送商品なら通常配送無料。

https://amzn.to/3htGMk8

更新日：2021-07-05 閲覧数：3005 views.