mirror of
https://github.com/audacity/audacity.github.io.git
synced 2026-05-30 20:47:36 -05:00
Merge pull request #74 from audacity/heat-mapping
Integrated heat mapping
This commit is contained in:
DilsonsPickles
@@ -7,8 +7,6 @@ import sitemap from "@astrojs/sitemap";
|
||||
|
||||
// https://astro.build/config
|
||||
import compressor from "astro-compressor";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
site: "https://www.audacityteam.org",
|
||||
integrations: [
|
||||
|
||||
262
docs/superpowers/plans/2026-04-16-clarity-heatmap-integration.md
Normal file
262
docs/superpowers/plans/2026-04-16-clarity-heatmap-integration.md
Normal file
@@ -0,0 +1,262 @@
|
||||
# Microsoft Clarity Heatmap Integration Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Integrate Microsoft Clarity heatmap tracking, gated behind the existing cookie consent flow (bundled with Matomo).
|
||||
|
||||
**Architecture:** Clarity's script is injected dynamically only after the user accepts cookies. A shared utility (`injectClarity`) is called from both `cookieConsent.js` (on accept) and `matomoTracking.js` (on page load for returning consented users). The cookie policy page is updated to disclose Clarity's cookies.
|
||||
|
||||
**Tech Stack:** Vanilla JS, Astro, Markdown
|
||||
|
||||
**Clarity Project ID:** `wccf621mrt`
|
||||
|
||||
---
|
||||
|
||||
### Task 1: Create Clarity injection utility
|
||||
|
||||
**Files:**
|
||||
- Create: `src/assets/js/clarityTracking.js`
|
||||
|
||||
- [ ] **Step 1: Create the Clarity injection script**
|
||||
|
||||
```js
|
||||
// src/assets/js/clarityTracking.js
|
||||
|
||||
let clarityInjected = false;
|
||||
|
||||
export function injectClarity() {
|
||||
if (clarityInjected) return;
|
||||
clarityInjected = true;
|
||||
|
||||
(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", "wccf621mrt");
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/assets/js/clarityTracking.js
|
||||
git commit -m "feat: add Clarity injection utility"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: Gate Clarity behind cookie consent (returning visitors)
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/assets/js/matomoTracking.js:1,34-36`
|
||||
|
||||
On page load, if the user has already accepted cookies, inject Clarity alongside Matomo consent.
|
||||
|
||||
- [ ] **Step 1: Import and call injectClarity in matomoTracking.js**
|
||||
|
||||
Add import at the top of `src/assets/js/matomoTracking.js`:
|
||||
|
||||
```js
|
||||
import { injectClarity } from "./clarityTracking.js";
|
||||
```
|
||||
|
||||
Then modify the existing consent check block (lines 34-36) from:
|
||||
|
||||
```js
|
||||
if (getCookie("audacity_consent") === "true") {
|
||||
_paq.push(["setCookieConsentGiven"]);
|
||||
}
|
||||
```
|
||||
|
||||
to:
|
||||
|
||||
```js
|
||||
if (getCookie("audacity_consent") === "true") {
|
||||
_paq.push(["setCookieConsentGiven"]);
|
||||
injectClarity();
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Commit**
|
||||
|
||||
```bash
|
||||
git add src/assets/js/matomoTracking.js
|
||||
git commit -m "feat: inject Clarity on page load for consented users"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: Gate Clarity behind cookie consent (new visitors accepting)
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/assets/js/cookieConsent.js:1,140-149`
|
||||
|
||||
When a new visitor clicks "Accept", inject Clarity immediately alongside Matomo consent.
|
||||
|
||||
- [ ] **Step 1: Import injectClarity in cookieConsent.js**
|
||||
|
||||
Add import at the top of `src/assets/js/cookieConsent.js`:
|
||||
|
||||
```js
|
||||
import { injectClarity } from "./clarityTracking.js";
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Call injectClarity in the acceptCookie handler**
|
||||
|
||||
Modify the `acceptCookie` function (lines 140-149) from:
|
||||
|
||||
```js
|
||||
const acceptCookie = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
saveAcceptToStorage(storageType);
|
||||
stopPopupAttempts();
|
||||
consentPopup.classList.add("hide");
|
||||
releaseOverlayLock();
|
||||
if (typeof _paq !== "undefined") {
|
||||
_paq.push(["setCookieConsentGiven"]);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
to:
|
||||
|
||||
```js
|
||||
const acceptCookie = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
saveAcceptToStorage(storageType);
|
||||
stopPopupAttempts();
|
||||
consentPopup.classList.add("hide");
|
||||
releaseOverlayLock();
|
||||
if (typeof _paq !== "undefined") {
|
||||
_paq.push(["setCookieConsentGiven"]);
|
||||
}
|
||||
injectClarity();
|
||||
};
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/assets/js/cookieConsent.js
|
||||
git commit -m "feat: inject Clarity when user accepts cookie consent"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: Update cookie policy page
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/pages/legal/cookie-policy.md`
|
||||
|
||||
- [ ] **Step 1: Update the "last updated" date**
|
||||
|
||||
Change:
|
||||
|
||||
```
|
||||
Last updated: 13. October 2023
|
||||
```
|
||||
|
||||
to:
|
||||
|
||||
```
|
||||
Last updated: 16. April 2026
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Update the third-party cookies statement**
|
||||
|
||||
Change:
|
||||
|
||||
```
|
||||
Please note that our Website does not use any third party cookies.
|
||||
```
|
||||
|
||||
to:
|
||||
|
||||
```
|
||||
Please note that our Website uses third party cookies from Microsoft Clarity for heatmap and session recording analytics.
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Update the "How do we use cookies?" section**
|
||||
|
||||
Change:
|
||||
|
||||
```
|
||||
On our Website we use only first party cookies, which means that all your cookie data will be stored on our side in accordance with the rules applicable to the protection of privacy in the electronic communications sector.
|
||||
```
|
||||
|
||||
to:
|
||||
|
||||
```
|
||||
On our Website we use first party cookies and limited third party cookies (Microsoft Clarity). First party cookie data is stored on our side in accordance with the rules applicable to the protection of privacy in the electronic communications sector. Third party cookies are governed by Microsoft's privacy policy.
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Add Clarity cookies to the cookie table**
|
||||
|
||||
After the existing Matomo row in the cookie table:
|
||||
|
||||
```
|
||||
|Cookies starting with:<br>`_pk...`, `mtm...`|Varies|Matomo cookies. [Details...](https://matomo.org/faq/general/faq_146/)|Analytics|
|
||||
```
|
||||
|
||||
Add:
|
||||
|
||||
```
|
||||
|`_clck`|1 year|Microsoft Clarity user ID cookie. [Details...](https://learn.microsoft.com/en-us/clarity/setup-and-installation/cookie-consent)|Analytics|
|
||||
|`_clsk`|1 day|Microsoft Clarity session cookie. [Details...](https://learn.microsoft.com/en-us/clarity/setup-and-installation/cookie-consent)|Analytics|
|
||||
|`CLID`|1 year|Microsoft Clarity tracking identifier|Analytics|
|
||||
|`ANONCHK`|10 min|Microsoft Clarity check cookie|Analytics|
|
||||
|`MR`|7 days|Microsoft cookie used with Clarity|Analytics|
|
||||
|`MUID`|1 year|Microsoft user identifier|Analytics|
|
||||
|`SM`|Session|Microsoft cookie used with Clarity|Analytics|
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add src/pages/legal/cookie-policy.md
|
||||
git commit -m "docs: update cookie policy with Microsoft Clarity cookies"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 5: Manual verification
|
||||
|
||||
- [ ] **Step 1: Run the dev server**
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Verify consent-gated behavior**
|
||||
|
||||
1. Open the site in an incognito window
|
||||
2. Open DevTools > Network tab
|
||||
3. Confirm NO requests to `clarity.ms` before accepting cookies
|
||||
4. Click "Accept" on the cookie banner
|
||||
5. Confirm a request to `clarity.ms/tag/wccf621mrt` appears in the Network tab
|
||||
|
||||
- [ ] **Step 3: Verify returning visitor behavior**
|
||||
|
||||
1. Refresh the page (consent cookie is now set)
|
||||
2. Confirm `clarity.ms` loads automatically on page load
|
||||
|
||||
- [ ] **Step 4: Verify reject behavior**
|
||||
|
||||
1. Clear cookies, reload
|
||||
2. Click "Reject" on the cookie banner
|
||||
3. Confirm NO requests to `clarity.ms`
|
||||
|
||||
- [ ] **Step 5: Review cookie policy page**
|
||||
|
||||
1. Navigate to `/cookie-policy`
|
||||
2. Confirm Clarity cookies are listed in the table
|
||||
3. Confirm the updated date and third-party cookie language
|
||||
9176
package-lock.json
generated
Normal file
9176
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -25,6 +25,7 @@
|
||||
"astro-compressor": "^1.2.0",
|
||||
"astro-icon": "^1.1.5",
|
||||
"astro-lazy-youtube-embed": "^0.5.5",
|
||||
"astro-microsoft-clarity-integration": "^1.1.7",
|
||||
"classnames": "^2.5.1",
|
||||
"platform": "^1.3.6",
|
||||
"react": "^18.3.1",
|
||||
|
||||
21
src/assets/js/clarityTracking.js
Normal file
21
src/assets/js/clarityTracking.js
Normal file
@@ -0,0 +1,21 @@
|
||||
// src/assets/js/clarityTracking.js
|
||||
|
||||
let clarityInjected = false;
|
||||
|
||||
export function injectClarity() {
|
||||
if (clarityInjected) return;
|
||||
clarityInjected = true;
|
||||
|
||||
(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", "wccf621mrt");
|
||||
}
|
||||
@@ -1,3 +1,5 @@
|
||||
import { injectClarity } from "./clarityTracking.js";
|
||||
|
||||
const cookieStorage = {
|
||||
getItem: (key) => {
|
||||
const cookies = document.cookie
|
||||
@@ -147,6 +149,7 @@ window.addEventListener("load", function () {
|
||||
if (typeof _paq !== "undefined") {
|
||||
_paq.push(["setCookieConsentGiven"]);
|
||||
}
|
||||
injectClarity();
|
||||
};
|
||||
|
||||
const rejectCookie = (event) => {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { getAllAssignments, formatAssignments } from "../../utils/experiment";
|
||||
import { injectClarity } from "./clarityTracking.js";
|
||||
|
||||
const getCookie = (name) => {
|
||||
const value = `; ${document.cookie}`;
|
||||
@@ -33,4 +34,5 @@ _paq.push(["requireCookieConsent"]);
|
||||
|
||||
if (getCookie("audacity_consent") === "true") {
|
||||
_paq.push(["setCookieConsentGiven"]);
|
||||
injectClarity();
|
||||
}
|
||||
|
||||
@@ -3,46 +3,58 @@ layout: "../../layouts/PageLayout.astro"
|
||||
title: Audacity ® | Cookie Policy
|
||||
---
|
||||
|
||||
Last updated: 13. October 2023
|
||||
Last updated: 16. April 2026
|
||||
|
||||
## About this Policy
|
||||
|
||||
This Cookie Policy (“**Policy”**) explains how we use cookies and other similar technologies to recognise you when you visit our website https://www.audacityteam.org (“**Website”**). It explains what these technologies are and why we use them, as well as your rights to control our use of them.
|
||||
Please take the time to read this Policy carefully. If you have any questions or comments, please contact us via email at privacy@audacityteam.org.
|
||||
|
||||
## A note about your personal information
|
||||
|
||||
When you arrive on AudacityTeam.org, your IP address is anonymised before being stored on our servers by default. This makes it impossible for us to ever identify you.
|
||||
|
||||
## What are cookies?
|
||||
|
||||
Cookies are small data files that are placed on your computer or mobile device when you visit a website. Cookies are used by website owners in order to understand how you are using the website, by providing usage statistics which helps to maintain and improve it.
|
||||
Cookies have many different features, such as allowing you to navigate between pages efficiently, remembering your preferences, and generally improving your user experience.
|
||||
Cookies set by the Website itself (in this case, https://www.audacityteam.org) are called “**first party cookies“**. Please note that our Website does not use any third party cookies.
|
||||
Cookies set by the Website itself (in this case, https://www.audacityteam.org) are called “**first party cookies“**. Please note that our Website uses third party cookies from Microsoft Clarity for heatmap and session recording analytics.
|
||||
|
||||
## How do we use cookies?
|
||||
|
||||
When you visit our Website, we place the following types of cookies:
|
||||
* Necessary cookies: These cookies are strictly necessary to provide you with the services available through our Website and to use some of its features, such as security or cookies consent storage. Because these cookies are strictly necessary to deliver the Website to you, you cannot refuse them.
|
||||
* Statistics (non-necessary) cookies: These cookies collect information that is used either in aggregate form to help us understand how our Website is being used, which helps us make improvements to it.
|
||||
|
||||
- Necessary cookies: These cookies are strictly necessary to provide you with the services available through our Website and to use some of its features, such as security or cookies consent storage. Because these cookies are strictly necessary to deliver the Website to you, you cannot refuse them.
|
||||
- Statistics (non-necessary) cookies: These cookies collect information that is used either in aggregate form to help us understand how our Website is being used, which helps us make improvements to it.
|
||||
|
||||
By default we collect statistics that track the number of site visits as well as the number of downloads of Audacity. These analytics are anonymously collected: your IP address is anonymised before storage and by default, we do not collect any other personal information of any kind. You still have the option to disable the processing of these anonymized statistical cookies through the settings in our cookie banner (please refer section “**How can I control cookies?”** below for more info).
|
||||
|
||||
On our Website we use only first party cookies, which means that all your cookie data will be stored on our side in accordance with the rules applicable to the protection of privacy in the electronic communications sector.
|
||||
|
||||
|
||||
|
||||
|Cookie|Duration|Description|Type
|
||||
|------|--------|-----------|---------|
|
||||
|`audacity-consent`|1 year|Stores your cookie preferences|Necessary|
|
||||
|`__cf_bm`|30 min|[Cloudflare Bot Management](https://developers.cloudflare.com/fundamentals/reference/policies-compliances/cloudflare-cookies/#__cf_bm-cookie-for-cloudflare-bot-products)|Necessary|
|
||||
|`cf_clearance`|30 min|[Cloudflare challenge clear proof](https://developers.cloudflare.com/fundamentals/reference/policies-compliances/cloudflare-cookies/#additional-cookies-used-by-the-challenge-platform)|Necessary|
|
||||
|Cookies starting with:<br>`_pk...`, `mtm...`|Varies|Matomo cookies. [Details...](https://matomo.org/faq/general/faq_146/)|Analytics|
|
||||
On our Website we use first party cookies and limited third party cookies (Microsoft Clarity). First party cookie data is stored on our side in accordance with the rules applicable to the protection of privacy in the electronic communications sector. Third party cookies are governed by Microsoft's privacy policy.
|
||||
|
||||
| Cookie | Duration | Description | Type |
|
||||
| -------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
|
||||
| `audacity-consent` | 1 year | Stores your cookie preferences | Necessary |
|
||||
| `__cf_bm` | 30 min | [Cloudflare Bot Management](https://developers.cloudflare.com/fundamentals/reference/policies-compliances/cloudflare-cookies/#__cf_bm-cookie-for-cloudflare-bot-products) | Necessary |
|
||||
| `cf_clearance` | 30 min | [Cloudflare challenge clear proof](https://developers.cloudflare.com/fundamentals/reference/policies-compliances/cloudflare-cookies/#additional-cookies-used-by-the-challenge-platform) | Necessary |
|
||||
| Cookies starting with:<br>`_pk...`, `mtm...` | Varies | Matomo cookies. [Details...](https://matomo.org/faq/general/faq_146/) | Analytics |
|
||||
| `_clck` | 1 year | Microsoft Clarity user ID cookie. [Details...](https://learn.microsoft.com/en-us/clarity/setup-and-installation/cookie-consent) | Analytics |
|
||||
| `_clsk` | 1 day | Microsoft Clarity session cookie. [Details...](https://learn.microsoft.com/en-us/clarity/setup-and-installation/cookie-consent) | Analytics |
|
||||
| `CLID` | 1 year | Microsoft Clarity tracking identifier | Analytics |
|
||||
| `ANONCHK` | 10 min | Microsoft Clarity check cookie | Analytics |
|
||||
| `MR` | 7 days | Microsoft cookie used with Clarity | Analytics |
|
||||
| `MUID` | 1 year | Microsoft user identifier | Analytics |
|
||||
| `SM` | Session | Microsoft cookie used with Clarity | Analytics |
|
||||
|
||||
## How can I control cookies?
|
||||
|
||||
In addition to the preferences that you set within the cookie banner, you can set or amend your web browser controls to accept or refuse some cookies. You also can delete existing cookies in the web browser. If you choose to reject cookies, you may still use our Website. As means by which you can refuse cookies through your web browser controls vary from browser-to-browser, you should visit your browser’s help menu for more information.
|
||||
|
||||
## The cookies that were sent in the past
|
||||
|
||||
If you have disabled one or more cookies, we can use information collected by these cookies before the deactivation. Information collected before deactivation will expire after a maximum of 13 months. However, we cease to collect information via the opted-out cookie.
|
||||
|
||||
## Updates to this Notice
|
||||
|
||||
We may update this Policy from time to time in response to changing legal, technical or business developments. When we update our Policy, we will take appropriate measures to inform you, consistent with the significance of the changes we make.
|
||||
|
||||
You can see when this Policy was last updated by checking the “**last updated”** date displayed at the top of this Policy.
|
||||
You can see when this Policy was last updated by checking the “**last updated”** date displayed at the top of this Policy.
|
||||
|
||||
Reference in New Issue
Block a user