How to add web analytics to a website or web application

For the tracking to work, you will need to embed the Wide Angle Analytics tracking code on your site. The approach might differ depending on your framework, language of choice or CMS. We provide an extensive list of integrations and guides for some of the most popular publishing platforms on the market.

If you use another solution, or if your website is a custom implementation, this guide will show you how to implement tracking on it.

Enable Tracker Script

In the Site configuration screen in the Wide Angle Analytics Dashboard, you can find a ready-made code snippet. Simply copy & paste it to the website source code or site generation engine.

Embed your site-specific code right before the end of <body> HTML tag.

The resulting code of your site should look similar too:

<html>
 <head>
  <!-- HEAD section -->
 </head>
 <body>
  <!-- BODY section -->
  <script async defer src="https://stats.wideangle.co/script/UNIQUE_ID.js">
  </script>
 </body>
</html>

Optionally Prefetch Script

You can potentially improve performance of the tracking script loading, by adding special hints, you will inform capable browsers, such as Chrome, Firefox and Safari, to download the tracking script as soon as possible. This can improve overall site loading time even further.

To do so, add link element to <head> section of your website:

<head>
  <link rel="prefetch" href="https://stats.wideangle.co/script/UNIQUE_ID.js"/>
</head>

Adding Wide Angle from JavaScript

There are at least two, if not more, approaches you can use to introduce the Wide Angle Analytics script to your website from JavaScript. Some older CMSs have limited code injection capabilities, and these might be your only choices.

The Lazy-Initialization approach

You might opt for a lazy initialization approach if you want to provide custom configuration or perhaps you want to get access to the Wide Angle JavaScript API and use it later in your JavaScript code.

<script 
  id="waa"
  src="https://stats.wideangle.co/script/1D1AG3B9ACA18F4247.js"     
  data-waa-late-init="true"
  defer
  async>
</script>

<script type="application/javascript">
  var waaScript = document.querySelector('#waa');
  waaScript.addEventListener('load', function() {
    waaCreate().then(waa => { window.waa = waa; });
  });
</script>

In the above example, we are passing the data-waa-late-init argument to make sure the script is loaded but the tracking API is not yet initialized. Once the script element is loaded, you use it to call the special waaCreate function, which provides a handle to the Wide Angle API. Next, you can use this API to dispatch custom events.

Pure JavaScript Approach

In the case of some legacy CMSs, you have limited options for code injection. You might not have the opportunity to add a <script> tag, but you can add JavaScript code. In this case, you have limited options. For example, you can programmatically add a script component. In this approach, extra care must be taken to initialize this newly added DOM element in the right lifecycle. Here is a working example that is ready to copy and paste:

<script type="text/javascript">

  function loadWideAngle() {
    const bodyScript = document.createElement('script');
    bodyScript.async = true;
    bodyScript.defer = true;
    bodyScript.setAttribute('data-waa-inc-params', 'foo,bar'); // optional configuration
    bodyScript.setAttribute('data-waa-exc-paths', 'wp-admin/*'); // optional configuration
    bodyScript.src = 'https://<TRACKING DOMAIN>/script/<SITE ID>.js';

    bodyScript.onload = function () {
      console.debug('Script has been loaded successfully!');
    };

    bodyScript.onerror = function () {
      console.error('Failed to load script');
    };

    document.body.appendChild(bodyScript);
  }

  document.onreadystatechange = function () {
    if (document.readyState === 'interactive') {
      loadWideAngle();
    }
  }

</script>

Make sure your site is active and that the custom domain, if you use one, is verified.

That’s it 🎉

Still need help? In that case please contact our support via, email or chat.