Next.js version 13+ (Using App Router)

Follow the below steps to integrate the Atatus RUM agent into your Next.js 13+ application.

  1. Paste the snippet into the root layout.tsx file.

    import Script from "next/script";

export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
   <html lang="en">
      <Script>
        {`
          !function(window, document) {

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

              // Load AtatusJS asyc
              function _asyncAtatus(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://dmc1acwvwny3.cloudfront.net/atatus-spa.js";var n=document.getElementsByTagName("script")[0];e.addEventListener&&e.addEventListener("load",(function(e){t(null,e)}),!1),n.parentNode.insertBefore(e,n)}

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

          }(window, document);
        `}
      </Script>
      <body>{children}</body>
   </html>
 );
}

    Here replace YOUR_API_KEY with your API Key. You will find this key in your browser project settings.

  2. Restart your Next.js server.

Next.js version <13 (Using Page Router)

  1. Create an atatus.js file inside the public/js folder and paste our Atatus (async CDN) script. Make sure to remove the opening and closing <script> tags.

    // atatus.js :

!function(window, document) {
      window._atatusConfig = {
          apikey: 'YOUR_API_KEY',
          // Other options if needed
      };

      // Load AtatusJS asyc
      function _asyncAtatus(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://dmc1acwvwny3.cloudfront.net/atatus-spa.js";var n=document.getElementsByTagName("script")[0];e.addEventListener&&e.addEventListener("load",(function(e){t(null,e)}),!1),n.parentNode.insertBefore(e,n)}

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

    Here replace YOUR_API_KEY with your API Key. You will find this key in your browser project settings.

  2. Next, you need to create a file called _document.js inside the pages folder. Add a <script> tag inside the <Head> tag as follows:

    // _document.js :

import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
            <script async type="text/javascript" src="/js/atatus.js" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

  3. Restart your Next.js server.