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