How to load Atatus async?

The reason to consider loading atatus asynchronously:

As you know once the page starts loading, the HTML is executed line by line. Since atatus js agent is included in the early code, the browser has to load the js file. Only then the variables (for e.g. atatus.install) will become available from the next line. This is considered as render blocking. You can see here on why/which URLs will be marked as render blocking. As noted in web.dev, this is normal behavior for all URLs that are loaded with script tag, without defer/async in head, which is the case with atatus js agent.

If you would like to avoid the render blocking itself, you can use our async loading option as described below. The downside of it is, if a JS error occurs before atatus js agent is loaded asynchronously, then there isn't an option to capture that error. We recommend loading Atatus synchronously before any of your other scripts to maximize compatibility with older browsers and capture & report the early errors that your users might face.

If async is loading all the script tags is important to you, you can do it as follows:

<script>
  !function(window, document) {

      window._atatusConfig = {
          apikey: 'YOUR API KEY',
          // Other options if needed
      };

      function _asyncAtatus(callback) {
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.async = true;
          script.src = "https://dmc1acwvwny3.cloudfront.net/atatus.js";
          var node = document.getElementsByTagName("script")[0];
          if (script.addEventListener) {
            script.addEventListener('load', function (e) {
                callback(null, e);
            }, false);
          }
          node.parentNode.insertBefore(script, node);
      }

      _asyncAtatus(function() {
          // Any atatus related calls.
          if (window.atatus) {
              // window.atatus.setUser('unique_user_id', 'emailaddress@company.com', 'Full Name');
          }
      });

  }(window, document);
</script>