Skip to content

Configure production Microsoft Clarity ID for website analytics#212

Open
Copilot wants to merge 4 commits into
mainfrom
copilot/add-microsoft-clarity-tracking
Open

Configure production Microsoft Clarity ID for website analytics#212
Copilot wants to merge 4 commits into
mainfrom
copilot/add-microsoft-clarity-tracking

Conversation

Copilot AI commented Jun 6, 2026 •
edited
Loading

Copy link
Copy Markdown

The website included the Microsoft Clarity bootstrap snippet but still used a placeholder project ID, so telemetry would not initialize. This updates the site to use the provided Clarity project ID directly.

  • Clarity configuration

    • Replaced the placeholder project ID in docs/website/index.html with the provided ID: x3m55qoz4t.
    • Updated the nearby comment to reflect that the ID is now configured for this site.

  • Snippet guard behavior

    • Simplified the guard condition to only skip loading when no project ID is provided.
<script type="text/javascript">
  (function (c, l, a, r, i, t, y) {
    if (!i) {
      return;
    }
    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/" + i;
    y = l.getElementsByTagName(r)[0];
    y.parentNode.insertBefore(t, y);
  })(window, document, "clarity", "script", "x3m55qoz4t");
</script>
Original prompt

Add Microsoft Clarity tracking to the GitHub Pages site for the microsoft/pg_durable repository. Integrate the Microsoft Clarity JavaScript tracking snippet into the HTML of the Pages site so that user interactions can be monitored. This includes:

  • Adding the Clarity tracking code inside the <head> tag of the site's HTML file (usually index.html or equivalent).
  • Ensuring the Clarity project ID placeholder is included and can be easily replaced with the actual ID.
  • Testing to ensure it doesn't affect the site's layout or existing functionality.

The tracking code can follow this example:

<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/" + i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "<YOUR_PROJECT_ID>");
</script>

Replace <YOUR_PROJECT_ID> with the actual Microsoft Clarity project ID during deployment.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: How do I have website tracking using Microsoft software only

Assistant: To achieve website tracking exclusively with Microsoft software, you can leverage tools and platforms provided by Microsoft for monitoring and analyzing website performance, user interactions, and other metrics. Below are the key resources and steps to set it up:

1. Microsoft Clarity - Free Session Recording & Heatmaps

  • What it is: Clarity is a free Microsoft tool for behavioral analytics. It can track user interactions, clicks, scrolls, and heatmaps for your website.
  • Steps to set it up:
    1. Go to Microsoft Clarity.
    2. Sign in with a Microsoft Account.
    3. Add your website to Clarity.
    4. Follow the setup instructions to embed Clarity's tracking code into your website.
  • Key Features:
    • Session recordings to watch how people are interacting with your site.
    • Heatmaps to show where visitors click and scroll.
    • Insights to improve usability and identify user pain points.

2. Azure Application Insights - Advanced Telemetry

  • What it is: Application Insights is an extensible Application Performance Monitoring (APM) service on Azure. It's designed to provide deeper telemetry for developers and technical teams.
  • Steps to set up:
    1. Sign in to the Microsoft Azure Portal.
    2. Link or create an Azure Subscription.
    3. Create an Application Insights resource.
    4. Use the provided instrumentation key or SDK to integrate with your website using JavaScript, .NET, Node.js, or Python.
    • If it's a static website, you'll need the JavaScript snippet in the <head> tag of your HTML.
  • Key Features:
    • End-to-end monitoring of server-side and client-side telemetry.
    • Tracks request rates, failure rates, browser performance, and dependencies.
    • Integrates log-based diagnostic monitoring.

3. Azure Monitor - Dashboarding for Metrics

  • Purpose: Azure Monitor can centralize your telemetry collected by Application Insights in addition to more performance metrics, logs, and Key Performance Indicators (KPIs).
  • Additional tools:
    • Azure Log Analytics for querying and data visualization.
    • Set alerts for traffic spikes, slowdowns, and unusual activity.

4. Additional (Optional) Microsoft tools

  • Power BI for analytics and reports.
    • You can pull telemetry data from Azure services and Clarity into Power BI.
    • Build powerful custom dashboards and visual reports to track various website metrics.
  • Azure Content Delivery Network (CDN) if your website requires global reach and performance optimization.

Checklist for Full Microsoft Tracking Setup

  1. Set up Microsoft Clarity for behavioral insights.
  2. Integrate Application Insights and Azure Monitor for deeper telemetry.
  3. Build Power BI dashboards for business-level reporting.

Let me know if you would like detailed instructions for integrating any of these tools!

User: Can you help me create a draft PR to setup Microsoft Clarity on the repo website

Assistant: Before proceeding, could you confirm the following:

  1. Does the repository microsoft/pg_durable have an existing website (e.g., a GitHub Pages site or any hosted front-end project)?
  2. Should I focus on a specific framework or integration approach (plain JavaScript, React, etc.) for Microsoft Clarity setup?

Once I have this information, I'll help create the draft pull request.

User: 1. It has a GitHub page

Assistant: Great! Since the repository microsoft/pg_durable has a GitHub Pages website, I can help you set up Microsoft Clarity to include tracking on the website. Microsoft Clarity i...

This pull request was created from Copilot chat.

Copilot AI and others added 2 commits June 6, 2026 18:11
@AbeOmor
Add Clarity snippet to website head
c7c271a 
Co-authored-by: AbeOmor <9068012+AbeOmor@users.noreply.github.com>
@AbeOmor
Guard Clarity placeholder in website head
e1fb77e 
Co-authored-by: AbeOmor <9068012+AbeOmor@users.noreply.github.com>
Copilot AI changed the title [WIP] Add Microsoft Clarity tracking to GitHub Pages site Add Microsoft Clarity tracking to the GitHub Pages site Jun 6, 2026
Copilot AI requested a review from AbeOmor June 6, 2026 18:13
@AbeOmor
Set website Clarity project ID
7c8a4b1 
Co-authored-by: AbeOmor <9068012+AbeOmor@users.noreply.github.com>
Copilot AI changed the title Add Microsoft Clarity tracking to the GitHub Pages site Configure production Microsoft Clarity ID for website analytics Jun 8, 2026
@AbeOmor AbeOmor marked this pull request as ready for review June 8, 2026 18:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@AbeOmor AbeOmor AbeOmor approved these changes

Reviewers whose approvals may not affect merge requirements

At least 1 approving review is required to merge this pull request.

Assignees

@AbeOmor AbeOmor

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@AbeOmor