IDRViewerのページビューをGoogle Analyticsでトラッキングする方法

Google AnalyticsとIDRViewerを連携させるには、次のコード例をindex.htmlファイルに追加します｡

</body>タグの直前にこのコードを追加し、‘UA-XXXXXXXX‘の部分をGoogle Analyticsのトラッキングコードに置き換えるだけです。

また、”var THRESHOLD = 1000;“の部分は利用者が特定のページを閲覧している場合に、そのページを閲覧したと判断する滞在時間をミリ秒(1,000分の1秒)で指定します｡

この例の場合､1000ミリ秒＝1秒間利用者が閲覧すると既読となり、ページビューとしてカウントされます｡

Google Analyticsのトラッキングコードについてはこちらをご覧下さい｡

gtag.js:

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

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

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

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

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

            var THRESHOLD = 1000; //ページがページビューとみなされるのに必要な時間(ミリ秒)
            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; //ページがページビューとみなされるのに必要な時間(ミリ秒)
        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 -->