How to add Microsoft Clarity to Azuro

MS Clarity

I know you guys are in a rush to get the US money line version up as an option on the site. I took the liberty of creating a Clarity account for you.

This is extremely important as the June cash back scheme is going to attract a lot of new users.
Other marketing initiatives including Stanley Cup Finals will also bring a unique segment of bettors.

Ive written the component for you and shared another way to add it directly to your site. It should take five minutes top to add with code I've provided.

Ronnit will love to see the user behavior. Its critical right now with 70% cash back cut and dry.

If you feel comfortable providing me access to your repo, I can just do it or have had it done all ready.

Not trying to overstep just a helpful suggestion.

All I need is a list of emails to provide access to, at that point you can take it over and remove me.

// Place the following code in the head of your layout
// OR
// Create a tracking component to use in layout head, with GA and Clarity. 
// The code is "Async" which helps with performance.

<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "mmacnr4e3b");
</script>

// You can add Clarity two ways.
// Create a component such as "ClarityScript.txs"

// Script for ClartityScript.txt 

'use client'
import React from 'react';

function ClarityScript() {
  React.useClientEffect(() => {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = `https://www.clarity.ms/tag/mmacnr4e3b`; // Replace with your Clarity project ID
    document.body.appendChild(script);

    return () => {
      script.remove();
    };
  }, []);

  return null;
}

export default ClarityScript;


//****************************************//

From there you can import it in layout

import ClarityScript from '@/components/ClarityScript'

and add <ClarityScript />

//************************************//

   OR

You can add the script using "stratgey"
You can add this directyly to layout without Creaing a component. 
  <Script
        id="ClarityScript"
          strategy="lazyOnload"
          dangerouslySetInnerHTML={{
            __html: `
              (function(c,l,a,r,i,t,y){
                  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/mmacnr4e3b";
                  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
              })(window, document, "clarity", "script", "mmacnr4e3b");
            `,
          }}
        />

//************************************************//    
  // So layouy.tsx will loook like
return (
    <html lang="en">
  // Clarity Imported which would be recommendation.
      <ClarityScript />
  // Clarity added directly on page saves a bit of time and you can copy the code and add it
  // now if you wanted. From a Dev standpoint go with the component. 
  <Script
        id="ClarityScript"
          strategy="lazyOnload"
          dangerouslySetInnerHTML={{
            __html: `
              (function(c,l,a,r,i,t,y){
                  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
                  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/mmacnr4e3b";
                  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
              })(window, document, "clarity", "script", "mmacnr4e3b");
            `,
          }}
        />
      <body className={inter.className}>
      <Providers initialChainId={initialChainId} initialLiveState={initialLiveState}>
        <Header />

        <main className="container pt-5 pb-10">
          {children}
        </main>
      </Providers>
      </body>
    </html>
  )

Clarity Fires as intended

The AI insights are great when you have a large segment and lots of recordings:

Feedback from my recording:

The user spent a significant amount of time on the "Local DGBet Playground" page, indicating high engagement or possibly confusion in finding desired information.
There were multiple instances where the user encountered 'Dead clicks' and JavaScript errors, suggesting potential usability issues that could frustrate users and hinder their experience.
The session included frequent toggling between 'Page hidden' and 'Page visible' states, which may imply multitasking or distractions during the browsing session.

Here is a link to my recording. I just spun this new one up today to test out some things - so not functional. And Boring but it will give you an idea of the data the recordings offer:

https://clarity.microsoft.com/shared/recording/7c5f8965-b522-4193-ac21-ce475621403a?t=0

This has a bit more activity.

https://clarity.microsoft.com/shared/recording/a068d329-bd9e-485b-b0de-dd9836c69fbe

Some key takeaways from this session are

The user spent a significant amount of time on the "Local DGBet Playground" page, frequently hiding and making it visible again, indicating they were likely multitasking or comparing information across different tabs.
There was notable interest in specific events such as MMA and tennis, with clicks on related links like "All Markets =>", but quick back clicks suggest difficulty finding desired information or dissatisfaction with the content provided.
A final attempt to access the leaderboard resulted in a 404 error page ("This page could not be found."), which may have caused frustration or confusion for the user at the end of their session.

This data can be purged when you install it. The project is setup and all the code provided works great to add Clairty in.

Dashboard

Recording insights

Detailed Recording break down.

Heat Maps

Click Area

Dylan Burkey

How to add Microsoft Clarity to Azuro

MS Clarity

Dylan Burkey