Microsoft 365 Community Community Demos, 29 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Microsoft Clarity SharePoint Framework Application Customizer

Description

In this 10-minute developer-focused demo, João Ferreira delivers an SPFx extension that allows you to add Clarity page activity tracking capabilities to your Modern SharePoint site pages for gaging user interaction with elements on page. The extension is added to the site’s App Catalog and injects a Microsoft Clarity JavaScript into site pages. Setup: 1) Create account and setup a new project on Clarity site and 2) Deploy extension to your SharePoint site. From Clarity, get heatmap and BI-like dashboard reporting by page. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 24, 2022.

Demo Presenter: João Ferreira (Beezy) | @joao12ferreira

Supporting materials:
• Website - Microsoft Clarity – Free Heatmaps & Session Recordings | https://clarity.microsoft.com/
• Repo - Microsoft Clarity for modern SharePoint | https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/js-application-microsoft-clarity
• Samples - SharePoint Framework Client-Side Extension Samples | https://pnp.github.io/sp-dev-fx-extensions/
• Documentation - Application Customizers | https://adoption.microsoft.com/extensibility-look-book/products/sharepoint/extensibility-spfx-application-customizer
• Article - How to add Microsoft Clarity to modern SharePoint | https://sharepoint.handsontek.net/2020/12/06/add-microsoft-clarity-modern-sharepoint/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

My name is ron freida, I'm a technical lead at busy, and today I will explain you a bit how you can track the usage of modern sharepoint pages using microsoft, clarity with an application, customizer deployed to site collections or globally to the entire tenant.

A

So for those of you that don't know what microsoft clarity is it's a tracking tool. Most of you should be familiar, probably with google analytics.

A

This is a tracking tool similar to analytics with more functions actually more similar to hr than than google analytics, but it allows you to generate instant uh heat maps by plugging it into your site. um This is one of the examples you get session recording. So if you just installed a fancy uh pnp web part in your page- and you want to see if your users are interacting with it or not, if you should change the location of the web part, you can use this to see.

A

How is it going, uh and it also generates this kind of reports that allow you to understand how users are interacting with the pages and uh not covering this session, but it also has an integration with google analytics. So if you are already using and tracking your site with analytics, you can plug the two together and get it monitored using clarity and analytics solution to implement this, as I, as I said in the beginning, there's a sharepoint framework extension and application customizer and the application customizer.

A

uh What it does is deploying this uh microsoft quality javascript file uh to the site, um there's a unique tracking number that needs to be deployed along with with this file. So it knows what exactly is your site and to deploy this then? The extension um is installing the site for those of you that don't know what is an extension, an application customizer, particularly it is used to typically create adders uh and footers in modern sharepoint pages. In this particular scenario, we will not use any of these functionalities.

A

We will do a simple thing as inject as a javascript file into the page, so the page gets tracked, but better than explaining is. This is seeing it in action. So, let's jump into microsoft, clarity, so microsoft quality, um it's available through this urlclarity.microsoft.com, you can sign in with your microsoft, account msa or corporate account, facebook and google, and then once you sign in you need to create a project.

A

When you create a new project, you need to provide a name and the website uh url and select uh category uh to what you will be tracking, and then you need to configure a couple things before installing it in your sharepoint site, and that is done by clicking in this um settings icon and by going to the setup tab. Once you go to the setup tab, you will find the uh how to install clarity, and this is what you will need.

A

It gives you the entire script, but uh the only thing that you really need is this code, and once you get this code, then uh you you are ready to deploy the solution before we jump into the code and show you how um this was built and how this gets installed in sharepoint. One thing that it's important, if you will be deploying this to your sharepoint, um especially if you will be deploying it for the entire tenant, is the masking setting.

A

So this option here will allow you to restrict what um users monitoring the recordings will be able to see in terms of that. So right now for this one, it's balanced, um there's some text that it's masked, but uh if you will be deploying this globally, potentially you will get recordings from sites that are not shared with you or they're, not sure they are not shared with the user.

A

That's watching the recording, so street um is what I recommend you to to select, and this way every single character will be transformed in the dot, and you will not be able to read any information that is in those sites. Well, once you get this configured, then you just need to deploy the the application, but before showing you how the application gets deployed, let me just show you uh how simple is the the code in the application customizer?

A

So the only method that we have here is the on image, and it has just one property that it's the clarity id um there's a validation to see if the clarity id has a value or not, and then instead of having here the the static iv, this could well be a static id. But since this is in the pnp repo, it's a generic solution, so uh it has the property in here, and this uh then deploys the script once you get it compiled and you get the sppkg file.

A

You can then install it on your sharepoint site and, as I mentioned before, it can be installed in the global, app catalog or in the site collection, app catalog. For this particular scenario. I will show you here: the site collection, app catalog. The app was deployed here already and if I go here to the tenant wide extensions list- and this list might not be visible in your site collection, but it will be there, you can access to it directly uh using the the url.

A

Once the solution gets deployed and installed, you will get a new entry in this list and here in the component properties, you just need to put the id as it is in here once you do this, and if the solution is enabled, then it will start tracking immediately the usage of your page- I have here already a few things to show you. So here is the dashboard on one of the pages on that site that I have. This is used just by me.

A

So there's not much data here, but we have recordings and we have heat maps, so the recordings are available here at the top. If I click in one of this, you will be able to see the mouse moving around uh and me interacting with the page and the clicks. As you can see- and I don't know if this is big enough- there are certain areas that are shown with dots instead of characters. This is done automatically by clarity, because this is not in the restricted mode.

A

If you select restricted, everything will be shown with dots, and another thing that you can do is access to the heat map and see what are the areas that users are interacting with um the most, so this one over here is not showing much, but let me see if I can get something more with more information.

A

Let me change this to another time frame. Let's.

A

Apply all right- and here it is the heat map. This was the site that I used to test a few uh list formattings and, as you can see, I was mainly interacting with this area of the page and this area here where both formattings were installed.

A

As you can see, I'm scrolling and uh these numbers are moving into the page, but uh the scroll of the page itself it doesn't move. This is a problem that clarity has with sharepoint. Parity was built to be used in public sites, um and it is counting on the scroll to be in the body, but in sharepoint it is not. So you are not able, by default, to scroll and see the entire page. However, I did a custom bookmarklet that I have here this fixed clarity.

A

It's a small javascript file that changes the the height of the snapshot, and if I click here now, I change the dom in the clarity and I'm able to see the entire page and the heat map for the the entire page.

A

This is pretty much pretty much it a very simple solution that allowed to integrate two different tools from microsoft. If you want to give it a try and install it in your system, and let me go back to the presentation you can find it in the github repository here- is the link for it, and if you have any question about it, you can reach me directly on on twitter or uh through my blog.

A

The the twitter handle in the blog url are in here in this slide and I'll make sure I will post this bookmarklet in the chat window and share it somewhere else, so you guys can also get it and take advantage of it in your own solutions.

A

All right back to you, patrick.

B

Awesome very cool stuff. Clarity is a really neat uh new thing. I know some other folks have been playing with it, so it's really cool definitely check that out great sample there on how to integrate that and uh encourage folks to check that out.