fbpx
印刷

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

作成日:
最終更新日:

IDRViewerでGoogle Analyticsを動作させるには、生成されたindex.htmlファイルに以下のコード例を追加して使用することができます。index.htmlの</body>タグのすぐ上にサンプルコードを追加し、UA-XXXXXXまたはG-XXXXXXの部分をGoogle Analyticsのトラッキングコードで置き換えるだけです（さらに情報が必要な場合はこちらをチェックしてください）。

Google Analyticsの実装には、Google Analytics 4に対応した新しい方式のgtag.jsと、Universal Analyticsに対応した旧方式のanalytics.jsの2つの方式があります。以下は、その両方の実装方法の例です。

gtag.js:
				
					 <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>
analytics.js:
				
					 <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>
    Tags:
    MENU
    PAGE TOP