Have you heard about Microsoft Clarity before?

Microsoft's official definition is

Clarity is a free user behavior analytics tool that helps you understand how users are interacting with your website through session replays and heatmaps.

What about Azure AD B2C?

Azure AD B2C is a customer identity access management (CIAM) solution capable of supporting millions of users and billions of authentications per day. It takes care of the scaling and safety of the authentication platform, monitoring, and automatically handling threats like denial-of-service, password spray, or brute force attacks.

I've been growing quite fond of Clarity recently! It's an amazing tool and will always be free! Super simple to get started as well;

• Add your site to https://clarity.microsoft.com/
• Get the tracking script of your choice
• Put the script into the head element of your view page.

So far so good.

I also wanted to add this script to a user flow we had in place including Azure B2C as the login process.

Here are some of the contexts you need to be aware of before we start how to achieved this.

The project uses Sign In user flow, as well as one of the default page layouts that Azure B2C offers, with nothing special within either. Configuration is detailed here, and pick a template after creating your user flow. Check the documentation on how to do it.

While we want to keep the template, we also want to inject the Clarity script into these pages that have been generated for us.

Here are the steps to achieve this;

1- Enable JavaScript enforcing
Go to the properties of your user flow, enable the JavaScript enforcing

2- Download the default page layout template you want to keep using
Here is the GitHub repo for the default page layout templates

3- Edit the relevant HTML page by adding your script to the head element of your template, if you do not need to, you do not have to touch the rest of the page!

4- Now host these wanted HTML files somewhere. Can be in blob storage, can be within your code, or wherever you want them to be.
For the sake of this article, I'm going to share the approach Microsoft Docs suggested, hosting with an Azure Blob Storage
If you're choosing to host the HTML files in the blob storage do not forget to configure CORS!

5- Finally update your user flow page layouts with the blob storage hosted HTML file URLs!

There it is! It might take a little while for tracking to kick in, but you now can see your B2C steps in the Clarity!

Happy hacking!