Content Grouping In Microsoft Clarity (The Setup + Analysis)

If you are familiar with Microsoft Clarity, after reading the headline of this article, you might be thinking if this is a new feature in Microsoft Clarity.

Spoiler alert, this measurement technique you’re about to learn has been there since the launch of Microsoft Clarity.

It’s just that the measurement creativity was missing. You’ll also learn how to analyze your data using the content grouping data.

What Is Content Grouping?

First, the big question is, do you know what content grouping is?

If you are familiar with Google Analytics, then there is a high probability that you know what it means.

I’ll borrow Google’s definition and modify it a little to explain what content grouping is;

It’s about grouping your website/app/content/pages/screens into a logical structure that reflects how you think about your site or app.

The next question will be, how do you implement this?

I’ll take a little step backwards to help introduce Microsoft clarity to you, and if you’re familiar with the tool, you can skip to the implementation phase «2.0» of this article.

What is Microsoft Clarity?

Clarity is a free digital experience analytics tool owned by Microsoft. The tool helps to capture how real people use your site.

It has the following features;

1. Heatmap (click and scroll map)
2. Session recording
3. Insights (dead clicks, rage clicks, excessive scrolling, javascript errors, quick backs, etc.)
4. Integrates with Google Analytics and other tools (based on how creative you can be)

You can create an account here, and if you need a worksheet where you can document your implementation, findings and analysis in Microsoft clarity, you can use this DumbData Microsoft clarity worksheet.

Setting Up Content Grouping In Microsoft Clarity

Grouping Your Website Contents

The next BIG business question will be how you intend to group your website pages/contents.

One thing to note is you can have multiple «mother groups», which is the name for the grouping.

For example; 

• Page Type (with content groups like the blog post, product, checkout, the home page, service page, etc.)
• If you are a heavy content website, you can also use the «Article Category» (with content groups such as analytics, marketing news, attribution, data analysis, etc.) or «Content Format» (with content groups video, article, podcasts, etc.)
• Collection Category (shoes, bags, caps, shirts, etc.)

You can use more than one of the above ideas, but they’ll have a different «mother grouping» name.

The Grouping Methodology 1

If you use Google Tag Manager as your preferred Tag Management System, you can use dataLayer codes like this for the page/content grouping.

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'page_load',
 'pageType': 'dynamic content group'
 });
</script>

Have your developer fire it on all pages, and let the pageType key return a value of what page type the user is currently on, which will be used to create a dataLayer variable in Google Tag Manager, using pageType as the dataLayer key

If you use; 

1. Shopify + Elevar
2. Woocomerce + The Google Tag Manager Plugin
3. Bigcommerce
4. Magento + some enhance e-commerce extension

You should see the pageType data in the page load event dataLayer that happens on all pages.

💡Note: it might be using a different key

The Grouping Methodology 2

Alternatively, if the page URLs are well-structured, you can use the Regex Table GTM variable to categorize your website URLs.

For example, on the DumbData website, we categorized our website as this

• pages with the page path /listeners/ are the event listeners resource page
• pages with the search query S «?s» are the search result pages
• page with the page path /blog/ is the blog page
• pages with the page path /post/ are the blog post
• pages with the page path /implementation-worksheet/ are the worksheet resources page
• pages with the page path /dashboard-resources/ are the dashboard resource page
• page path that starts and ends with / is the home page
• page with the page path /free-resources/ is the resource collection page
• Then other pages are generic pages

Then we used Google Tag Manager’s Regex Table variable to group the web pages into different groups.

Here is a screenshot of what our finished configuration looks like in GTM. 

In your case, you might decide to use the dataLayer variable, but the end goal is to get the pageType name.

Save the variable and preview in GTM preview mode, navigate to different pages and see what the GTM preview mode returns.

For our case, you can see that the value changed for each page I visited.

On the homepage https://dumbdata.co/, it returned «home page». 

On this page https://dumbdata.co/listeners/poptin/, it returned «event listener resource page».

While on this Google Analytics 4 implementation worksheet https://dumbdata.co/implementation-worksheet/ga4-implementation/ it returned «worksheet resource page»

Now we are sure that the variable is working.

The Actual Implementation Of Microsoft Clarity

To send this data to Microsoft Clarity, we’ll be utilizing «Custom Tags», a filter feature that allows you to pass additional information used for analysis purposes.

There are a few things you need to know about custom tags;

1. There are no limits on the number of tags you can add to your project. See more ideas in this article.
2. Custom tags are not retroactive, meaning they collect data starting from the creation day.
3. Date periods without custom tags added to a user session will make the custom tag not appear inside Microsoft Clarity for that same date period.
4. It has to be applied after the Microsoft Clarity tracking script has fired.
5. The custom tag and its value can’t be longer than 255 characters.
6. A single page can have no more than 128 tags. Any other tags will be ignored.
7. The tags and her values can be any alphanumeric value.

Here is what the custom tag snippet looks like

clarity("set", "key", "value");

• Key represents the name of the mother content grouping, it can be page type, content format, content category, or product categories, but in our case, we’ll name it «pageType» since that’s our «mother grouping» name.
• The value will be the value of the page type variable you created in Google Tag Manager.

So this is what the final javascript you’ll be firing in GTM should be.

<script type="text/javascript">
clarity("set", "pageType", "{{your page type variable}}");
</script>

To set this up, create a custom HTML tag in GTM, copy and paste the Clarity custom tag snippet and fire on DOM when the tracking library script has fired.

If you have GDPR, DPA, LGPD, or CCPA data compliance configuration, you’ll have to fire the tag only when the Microsoft Clarity library has loaded, and the user has consented.

Preview your GTM set up to check if the tag is firing, and publish your GTM container.

Implementation Verification

You can easily verify your implementation right from the Microsoft Clarity interface.

To do this;

1. Navigate to Microsoft Clarity, and select the project.
2. Select «Filters» and set the timeframe to today. On the right side, click on Custom filters.
3. Under custom tags, click the dropdown and select the content grouping name «pageType». 
4. To check for value, click the value dropdown, and you should start seeing the content groups.

---

---

---

---

---

If you don’t see anything, try visiting the website, navigate to different pages and close the tab, then give a space of 20 – 50 minutes before repeating the steps above to see if your implementation is working.

How Do You Make Sense Of This Data

Now that you’re collecting this data in Microsoft Clarity, how do you analyze it?

You’ll be able to analyze the data for a specific content group or multiple groups, depending on your content measurement questions.

For example, I want to analyze the content group «worksheet resource page», which are pages of all the free different measurement guides on the Dumbdata website.

First, I will create a filter with the following configuration;

1. Custom tag set to «pageType«, the mother group name.
2. The content group name will be the «worksheet resource page».
3. My date range will be the last 30 days.

Additionally, you can create a segment out of this filter.

In the dashboard;

• You can see the number of users that visited this content group, their average scroll depth on the content group, and the total sessions with visits to the pages in this content group.
• You’ll find digital experience optimization metrics like dead clicks, rage clicks, javascript errors, excessive scrolling and quick backs the pages in that content group have gotten.
• You will see the popular pages in this content group, the user device information and their session referrer.

In Recordings Tab;

• You’ll be able to watch user session recordings with visits to pages in the content group.

In the Heatmaps Section;

• Be able to access heatmaps of pages in the content groups.

Conclusion

Now you can see how helpful this implementation can be when analyzing your Clarity data based on content groups.

Additionally, this guide can help you document your Microsoft clarity implementation, including findings in your analysis.

Looking for creative ways to use custom tags in Microsoft Clarity, you can check out this article by DumbData.