examples/stubbing-spying__google-analytics/index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Stubbing Google Analytics</title>
  </head>
  <body>
    <h1>My Application</h1>
    <ul>
      <li><a href="#page2" />#page2</a></li>
      <li><a href="#page3" />#page3</a></li>
    </ul>
    <br/>
    <button id="register">Register</button>

    <script>
      // standard google analytics code
      (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-XXXXX-Y', 'auto');
      ga('set', 'page', 'index.html');
      ga('send', 'pageview');

      window.onhashchange = function () {
        // an example of calling into GA whenever there is a
        // hashchange. this is used for demonstration purposes
        ga('send', 'pageview', window.location.hash)
      }

      document.getElementById('register').addEventListener('click', (e) => {
        e.preventDefault()
        ga('send', {
          hitType: 'event',
          eventCategory: 'button',
          eventAction: 'click',
          eventLabel: 'Register'
        })
      })
    </script>
  </body>
</html>