レ点腫瘍学ノート

pukiwikiカスタマイズ箇所/2021/Google Analyticsの遅延読み込み の履歴ソース(No.1)

#author("2021-07-05T10:40:50+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
Google Analyticsを設置するとPagespeed Insightのスコアが落ちてしまうので、Google Analyticsのスクリプトを遅延読み込みするようにしてスコア低下を回避します。

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

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

*読み込みたいタグ [#gda32f1c]

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

 <!-- 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>

*設置する遅延読み込みタグ [#zf1fd832]

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

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

 <script>
 function lazyLoadScript() {
  var scrollFirstTime = 1;
  window.addEventListener("scroll", oneTimeFunction, false);
  window.addEventListener("mousemove", oneTimeFunction, false);
  function oneTimeFunction() {
   if (scrollFirstTime === 1) {
    scrollFirstTime = 0;
    var adScript = document.createElement("script");
    adScript.src = 'https://www.googletagmanager.com/gtag/js?id=UA-11111-01';
    document.body.appendChild(adScript);
    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);
    window.removeEventListener("scroll", oneTimeFunction, false);
    window.removeEventListener("mousemove", oneTimeFunction, false);
   }
  }
 }
 lazyLoadScript();
 </script>

JavaScriptをもう少し洗練させればより短くきれいに書けると思いますが、ひとまずこれで運用しています。