GoogleAnalyticsを遅延読み込みする

はじめに

GoogleAnalyticsの遅延読込みです。analytics.jsとga()の設置処理を遅延処理します。遅延処理であるため、最後まで遅延した処理が呼び出されないことがあります。onLazy.jsは、最悪でもunloadイベントで通知されます。ただし、unloadイベントでanalytics.jsを読み込むには遅すぎるため、そのタイミングでページビューのみMeasurement Protocol経由で通知します。

GoogleAdSenseと比べてGoogleAnalyticsは高速であるため、大した高速化にはなりませんが、外部スクリプトの読込みを1つ遅らすことができます。

仕様

  • 「ga()の作成」「サイト読込み日時の保存」は、遅らせるわけにも行かないため、そのままサイト読込み時に実施する
  • analytics.jsの読込みを遅延処理する
  • 遅延できる「ga()の設置処理」を遅延処理する
    • 遅らせられないものは、先に登録する
      • 例：エラーイベント
    • 初回ユーザイベントで処理必須なものは、先に登録する
      • onLazy.jsでは、初回ユーザイベントを取り逃すため
  • 遅延処理が実施されなかった場合、ページビューのみbeaconで送信する

コード

<html>
<head>

...

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

// ga()の設置処理
...

</script>
</head>



<body>

...

<script>
// ga()の設置処理
window.addEventListener('lazy', function() {
...
});

// AnalyticsLoader.js
(function (window, document, navigator) {
  window.addEventListener('lazy', function() {
    const ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = 'https://www.google-analytics.com/analytics.js';
    const sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ga, sc);
  });
  navigator.sendBeacon && window.addEventListener('toolazy', function() {
    if (window.ga && ga.q) {
      const ANALYTICS_URL = 'https://www.google-analytics.com/collect';
      const GA_COOKIE = document.cookie.replace(/(?:(?:^|.*;)\s*_ga\s*\=\s*(?:\w+\.\d\.)([^;]*).*$)|^.*$/, '$1');
      const TRACKING_ID = ga.q[0][1]; //'UA-XXXXX-Y';
      const CLIENT_ID = GA_COOKIE || (Math.random() * Math.pow(2, 52));
      const encode = encodeURIComponent;

      // ga('send', 'pageview');
      navigator.sendBeacon(ANALYTICS_URL, [
        'v=1', 't=pageview',
        'tid=' + TRACKING_ID,
        'cid=' + CLIENT_ID,
        'dt=' + encode(document.title),
        'dl=' + encode(location.href),
      ].join('&'));
    }
  });

})(window, document, navigator);

// onLazy.js
...

</script>
</body>
</html>

※onLazy.jsの使用が前提です。