Microsoft Clarity does not provide a JavaScript API or function that can be executed from the front end (i.e., the user’s browser) to retrieve the current session playback URL.
However, in this guide, I will show methods that reconstruct the session recording URL using values from Microsoft Clarity’s user and session cookies (_clck and _clsk), along with the project ID.
In addition, I also learned from the Microsoft Clarity team how to recreate the playback URL using the Microsoft Clarity Client API (it isn’t something technical). I have included this in the article.
In this article, I will demonstrate how to achieve this using a custom variable template in Google Tag Manager (GTM), provided that GTM is installed on your website.
If you’re not using GTM, don’t worry. I will also provide an alternative method to obtain the Clarity recorded session URL.
Additionally, I will discuss some limitations of the approach outlined in this guide.
Before diving into both methods, I want to mention that I have previously covered this topic in two in-depth articles:
- A detailed guide on integrating Microsoft Clarity with Google Analytics
- Another article explaining how to integrate nine different session recording tools with GA4 and Piwik Pro
I highly recommend checking out both articles for a deeper understanding.
To ensure this guide carries everyone along, I will start with a quick explanation of a session playback URL before going into the step-by-step implementation of each method.
What Is a Session Recording Playback URL?
A session recording playback URL is a shareable link that allows you to directly access the recorded recreated session of a specific website visitor’s visit to your website.
In this context, the URL leads to the exact session recording of a user’s visit, providing valuable insights into their browsing behaviour and interactions.
The recorded, recreated session video can help gain qualitative insights and provide additional context for sales, debugging, and more.
OPTION 1: Using the Microsoft Clarity Playback URL GTM Variable Custom Template
To use this method, you must install Google Tag Manager (GTM) on your website.
This approach is straightforward and easy to implement.
Step 1: Add the Variable Template in GTM
Navigate to the Variables tab in your GTM container.
Click New Variable, then select Community Template Gallery.
Search for “Microsoft Clarity Playback URL“ and import the variable custom template.
Select the variable custom template, click the “Add to workspace” and follow the import wizard.
Step 2: Configure the Variable
Add your Microsoft Clarity Project ID to the template settings.
You can find your Project ID under Settings in your Microsoft Clarity dashboard.
Give the variable a name and save it.
Step 3: Preview & Test
Now, when you preview your GTM setup, you should see the Clarity Playback URL value appearing correctly.
If it doesn’t return any value, don’t worry, I’ll explain why shortly. But first, let’s go over an alternative approach.
OPTION 2: Using JavaScript (Without Google Tag Manager)
If you’re not using Google Tag Manager but still want to retrieve the session recording URL for a visitor, you can achieve this using JavaScript.
Simply use the following JavaScript code (I have also added a version of the codes that allows you push the session replay URL to the dataLayer):
function getCookieValue(cookieName) {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var parts = cookies[i].split("=");
if (parts[0] === cookieName) {
return decodeURIComponent(parts[1] || "");
}
}
return undefined;
}
function generateClarityURL() {
var clarityProjectID = "YOUR_PROJECT_ID"; // Update this with the actual Clarity Project ID
var clsk = getCookieValue("_clsk");
var clck = getCookieValue("_clck");
if (clsk && clck) {
var clskNewValue = clsk.split("|")[0];
var clckNewValue = clck.split("|")[0];
return "https://clarity.microsoft.com/player/" + clarityProjectID + "/" + clckNewValue + "/" + clskNewValue;
}
// Fallback to Clarity metadata if cookies are unavailable
if (window.clarity) {
window.clarity("metadata", function (metadata) {
var projectId = metadata.projectId;
var userId = metadata.userId;
var sessionId = metadata.sessionId;
console.log("https://clarity.microsoft.com/player/" + projectId + "/" + userId + "/" + sessionId);
});
}
return undefined;
}
console.log(generateClarityURL());
All you’ve to change in the code is replace “<project ID>” with your actual Microsoft Clarity Project ID.
This script will generate the session recording playback URL, allowing you to view the user’s session inside Microsoft Clarity directly.
Here is an instance where I ran the code on the Microsoft Clarity website. Note that I updated the project ID to match the one used on the Clarity website.
Alternatively, you can use the code below, which, when executed, will trigger a dataLayer event and push the Microsoft Clarity session replay URL along with the dataLayer update.
function getCookieValue(cookieName) {
var cookies = document.cookie ? document.cookie.split("; ") : [];
for (var i = 0; i < cookies.length; i++) {
var parts = cookies[i].split("=");
if (parts[0] === cookieName) {
return decodeURIComponent(parts[1] || "");
}
}
return undefined;
}
function generateClarityURL() {
var clarityProjectID = "YOUR_PROJECT_ID"; // Replace with actual Clarity Project ID
var clarityURL;
var clsk = getCookieValue("_clsk");
var clck = getCookieValue("_clck");
if (clsk && clck) {
var clskNewValue = clsk.split("|")[0];
var clckNewValue = clck.split("|")[0];
clarityURL = "https://clarity.microsoft.com/player/" + clarityProjectID + "/" + clckNewValue + "/" + clskNewValue;
pushToDataLayer(clarityURL);
} else if (typeof window.clarity === "function") {
window.clarity("metadata", function (metadata) {
if (metadata && metadata.projectId && metadata.userId && metadata.sessionId) {
clarityURL = "https://clarity.microsoft.com/player/" + metadata.projectId + "/" + metadata.userId + "/" + metadata.sessionId;
pushToDataLayer(clarityURL);
}
});
}
}
function pushToDataLayer(clarityURL) {
if (clarityURL) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "microsoftClarityEvent",
clarity_playback_url: clarityURL
});
}
}
// Execute function
generateClarityURL();
Using the code version above, you can see how it triggers the microsoftClarityEvent dataLayer event, with the dataLayer key clarity_playback_url holding the session recording playback URL. You can configure this tag to execute only when clarity_playback_url is undefined to prevent it from running every time.
Why the Solutions May Not Return a Session Recording Playback URL
There are several reasons why the solutions I’ve shared might not generate a session playback URL for a user’s session. Here are the key factors to be aware of:
- Microsoft Clarity’s tracking script hasn’t loaded on your website.
- Your Clarity project is configured not to use cookies, preventing session tracking and making retrieving the playback URL impossible since the GTM variable template option relies on the availability of cookies, unlike the two JavaScript solutions I shared.
- User consent is required but hasn’t been granted; if you’ve implemented the Microsoft Clarity Consent Signal and the user hasn’t accepted tracking, the mechanism used by the GTM variable template won’t work (the code option should work). This is because the session playback URL returned by the variable custom template relies on values stored in Clarity’s user and session cookies (_clck and _clsk).
- Tracking is blocked; if Microsoft Clarity is blocked by a browser extension, privacy setting, or tracking prevention technology, the variable won’t be able to return any value.
One important thing to note (I learned this from the Microsoft Clarity team.) is that when cookies are disabled or consent is denied, Microsoft Clarity still assigns a user ID and session ID anonymously. However, this assignment is not cookie-based.
The session ID and user ID are temporary and last only for the duration of the page. They are reset when the user navigates to a new page.
This means that the session recordings will display only a single page per session, which may not provide enough context to be truly valuable.
In my opinion, collecting these types of session recordings in your analytics or any other destination might not be worthwhile, as they fail to capture the full user’s visit leading up to the recorded page.
Additionally, not every session will have a playback available. As a result, some of the session recording playback URLs generated using the solution shared in this article may turn out broken.
Lastly, keep in mind that the code solution may not consistently work for cookieless sessions if implemented within a GTM Custom HTML tag, but if done outside Google Tag Manager, it should always work.
Conclusion:
One key thing to note is that Microsoft Clarity’s default data retention for the recordings is 30 days by default, but you can extend it to 13 months by favouriting or starting the session.
So, when setting this up, ensure you have a strategic use case before implementing this.
As regards use case, there are several use cases for retrieving session playback URLs:
- Enhancing Google Analytics event data, since Microsoft Clarity’s native integration with GA4 stopped sending session playback URLs in September 2024, this method can help bridge that gap.
- Sales and CRM are used to understand user interactions and improve customer engagement.
- Error measurement and debugging, analyzing how users experience site issues in real time.
Additionally, I’ll add that if you’re experiencing discrepancies between GA4 and Microsoft Clarity, I recommend checking out this guide.
If you have any questions about measurement strategies, data collection issues or Microsoft Clarity, feel free to reach out via the DumbData Contact Us page. Until then, happy measuring! And don’t forget to subscribe to our newsletter for updates.
