Microsoft Clarity Setup Guide
Microsoft Clarity now supports Consent Mode v2, giving you more control
over how session recording and analytics behave depending on user choices.
This guide explains how to integrate Clarity with Cookie Control so that
Clarity only activates once the user has granted the required consent.
You’ll learn how to set the default consent state to denied and update
consent dynamically using onAccept and onRevoke
callbacks
Anchor point for Creating a Microsoft Clarity Project
- 1. Within the Microsoft Clarity User Area, navigate to 'My Projects' and create a new project or choose an existing one.
- 2. If creating a new project fill in the details required ensuring the website URL matches the site you wish to track.
Anchor point for Disable Cookies setting default
- 1. Within the Microsoft Clarity User Area, navigate to 'Settings' and select 'Setup' from the side menu.
- 2. Within the advanced settings, switch 'Cookies' to Off. This will ensure that Cookies will not be set until explicit consent has been granted.
Anchor point for Integrating Microsoft Clarity with Consent Mode v2
- 1. Within the Microsoft Clarity User Area, navigate to 'Settings' and select 'Setup' from the side menu.
- 2. Select 'Get Tracking Code' from the 'Install manually' option of the installation methods section.
- 3. Copy the the script for manual installation.
- 4. Paste the copied script within the head of your webpage.
- 5. Set the initial consent state of the clarity consentv2 parameters to denied.
- 6. Within your Cookie Control configuration object, update the onAccept and onRevoke functions for the related consent categories to include 'consent updates' for Clarity
- 7. Install your updated configuration within your site's HTML and start tracking from the Microsoft Clarity User Area.
<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/XXXXXXX"; // your project ID
y = l.getElementsByTagName(r)[0];
y.parentNode.insertBefore(t, y);
})(window, document, "clarity", "script");
</script>
<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/XXXXXXX"; // your project ID
y = l.getElementsByTagName(r)[0];
y.parentNode.insertBefore(t, y);
})(window, document, "clarity", "script");
window.clarity('consentv2', {
ad_Storage: "denied",
analytics_Storage: "denied"
});
</script>
{
name: 'analytics',
label: 'Analytical Cookies',
description:
'Analytical cookies help us to improve our website by collecting and reporting information on its usage.',
onAccept: function () {
window.clarity('consentv2', {
analytics_Storage: "granted",
});
},
onRevoke: function () {
window.clarity('consentv2', {
analytics_Storage: "denied",
});
},
},
{
name: 'marketing',
label: 'Marketing Cookies',
description: 'We use marketing cookies to help us improve the relevancy of advertising campaigns you receive.',
onAccept: function(){
window.clarity('consentv2', {
ad_Storage: "granted",
});
},
onRevoke: function(){
window.clarity('consentv2', {
ad_Storage: "denied",
});
}
}