Link

Track page views in the IDRViewer with Google Analytics

To get Google Analytics to work with the IDRViewer, you can use the following code examples to add to the index.html file generated. All you need to do is add the example code into the index.html just above the closing </body> tag and then replace the UA-XXXXXXXX or G-XXXXXXXX sections with your Google Analytics Tracking code (check here if you need help getting this).

There are two ways to implement Google Analytics: the newer system of gtag.js which supports Google Analytics 4, or the previous system of analytics.js which is for Universal Analytics. Below are examples of how to implement them both.

gtag.js:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>
<script>
    (function() {
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'G-XXXXXXXX');

        function trackPageView(page) {
            gtag('config', 'G-XXXXXXXX', {
                'page_path': location.pathname + '?page=' + page
            });
        }

        var THRESHOLD = 1000; // Length of time (in millis) required on page to be considered a pageview
        var lastPage;
        IDRViewer.on('pagechange', function (data) {
            lastPage = data.page;
            setTimeout(function () { // Wait until the page stops changing until sending page view
                if (lastPage === data.page) {
                    trackPageView(data.page);
                }
            }, THRESHOLD);
        });
    })();
</script>
<!-- Global site tag ends -->

analytics.js:

<!-- Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX', 'auto');
  ga('send', 'pageview');

  function trackPageView(page) {
      ga('send', {
          hitType: 'pageview',
          page: location.pathname + '?page=' + page
      });
  }

  var THRESHOLD = 1000; // Length of time (in millis) required on page required to be considered a pageview
  var lastPage;
  IDRViewer.on('pagechange', function (data) {
      lastPage = data.page;
      setTimeout(function () { // Wait until the page stops changing until sending page view
          if (lastPage === data.page) {
              trackPageView(data.page);
          }
      }, THRESHOLD);
  });
</script>
<!-- End Google Analytics -->