-->

GoogleAnalyticsを遅延読み込みする

はじめに

GoogleAnalyticsの遅延読込みです。analytics.jsga()の設置処理を遅延処理します。遅延処理であるため、最後まで遅延した処理が呼び出されないことがあります。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 sc = document.createElement('script');
    sc.type = 'text/javascript';
    sc.async = true;
    sc.src = 'https://www.google-analytics.com/analytics.js';
    const s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(sc, s);
  });
  window.addEventListener('toolazy', function() {
    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));

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

// onLazy.js
...

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

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

コメント