FEATURE/CCSD-685 : Added matomo code change in index.html file #372
Conversation
Swathi-eGov
requested review from
jagankumar-egov,
kavi-egov,
pradeepkumarcm-egov and
vinothrallapalli-eGov
as code owners
WalkthroughAdds a Matomo analytics snippet to the frontend public index.html that initializes _paq, loads Matomo from CDN, configures tracker URL and siteId, adds SPA-friendly URL change tracking (history wrap + popstate), and attaches UI click event tracking sending trackEvent details. Changes
Sequence Diagram(s)sequenceDiagram
participant B as Browser (app)
participant S as index.html Snippet
participant C as Matomo CDN (matomo.js)
participant T as Matomo Tracker (digit-analytics.matomo.cloud)
B->>S: Load page → snippet runs
S->>C: Async load matomo.js
C-->>B: matomo.js executed
B->>T: _paq: trackPageView, enableLinkTracking
Note right of S: Wrap history.pushState/replaceState\nand listen to popstate
B->>T: on URL change → setCustomUrl + trackPageView
Note right of S: Click listener captures UI details
B->>T: on UI click → trackEvent(category="UI Interaction", action, label)
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
Status, Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🔭 Outside diff range comments (1)
frontend/micro-ui/web/public/index.html (1)
3-11: Duplicate head tags and duplicated meta/link elements — invalid HTML structureThe document currently has two opening tags and duplicate meta/link tags. This is a parse error and may lead browsers to unpredictably discard or reorder elements. Please keep a single head section.
Apply this diff to remove the first, duplicate head (Lines 3–9):
- <head> - <meta charset="utf-8"/> - <link rel="icon" href="https://cdn.jsdelivr.net/npm/@egovernments/digit-ui-css/img/browser-icon.png"/> - <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel='stylesheet' type='text/css'> - <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css"/> - <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> - - <head> + <head>
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these settings in your CodeRabbit configuration.
📒 Files selected for processing (1)
frontend/micro-ui/web/public/index.html(1 hunks)
🔇 Additional comments (1)
frontend/micro-ui/web/public/index.html (1)
22-36: Matomo snippet is correctly integrated and will load asynchronouslyThe initialization order and tracker URL/siteId configuration look correct for Matomo Cloud. Async load via CDN is appropriate.
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (2)
frontend/micro-ui/web/public/index.html (2)
3-9: Invalid duplicate and duplicate meta/link tags — consolidate the head; also retain the components CSS linkTwo opening tags and repeated meta/link elements will produce malformed HTML and unpredictable parsing. Remove the duplicate block and keep a single . Ensure the components CSS link from the first block is retained in the remaining head.
Apply this diff to consolidate:
- <head> - <meta charset="utf-8"/> - <link rel="icon" href="https://cdn.jsdelivr.net/npm/@egovernments/digit-ui-css/img/browser-icon.png"/> - <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel='stylesheet' type='text/css'> - <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css"/> - <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> - - <head> + <head> <meta charset="utf-8" /> <link rel="icon" href="https://cdn.jsdelivr.net/npm/@egovernments/digit-ui-css/img/browser-icon.png" /> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> + <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/digit-ui-css/dist/index.css"/> --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#00bcd1" /> <title>Digit</title> <!-- <script src="https://s3.ap-south-1.amazonaws.com/egov-dev-assets/globalConfigs.js"></script> -->Also applies to: 10-21
114-129: Move the <style> block inside the (or into )The style tag currently sits between and , which is invalid HTML. Move it inside the head (preferred) before the closing , or place it inside the body.
Suggested relocation (place before Line 113):
-</head> -<style> + <style> .options-card { overflow: auto ; max-height: 18em !important; } .employee-select-wrap .options-card { overflow: auto !important; max-height: 18em !important; } .employee-select-wrap .options-card-DateRangePicker { overflow: visible !important; max-height: 24em !important; } -</style> - -</head> +</style> +</head>
♻️ Duplicate comments (2)
frontend/micro-ui/web/public/index.html (2)
49-81: SPA tracking: add guard to avoid double-wrapping history; set URL to path+search and update document title before trackingCurrent monkey-patching works but can wrap multiple times if the block executes twice, and it tracks with full origin which can fragment analytics. Prefer path+search, update document title, and guard repeated wrapping.
Apply this diff:
- let lastUrl = location.href; + function currentPath() { + return location.pathname + location.search; + } + let lastUrl = currentPath(); - function trackUrlChange() { - const url = location.href; + function trackUrlChange() { + const url = currentPath(); if (url !== lastUrl) { lastUrl = url; _paq.push(['setCustomUrl', url]); + _paq.push(['setDocumentTitle', document.title || '']); _paq.push(['trackPageView']); } } - // Wrap pushState - history.pushState = (function (original) { - return function pushState() { - const result = original.apply(this, arguments); - trackUrlChange(); - return result; - }; - })(history.pushState); - - // Wrap replaceState - history.replaceState = (function (original) { - return function replaceState() { - const result = original.apply(this, arguments); - trackUrlChange(); - return result; - }; - })(history.replaceState); + if (!window.__matomoHistoryWrapped) { + // Wrap pushState + history.pushState = (function (original) { + return function pushState() { + const result = original.apply(this, arguments); + trackUrlChange(); + return result; + }; + })(history.pushState); + + // Wrap replaceState + history.replaceState = (function (original) { + return function replaceState() { + const result = original.apply(this, arguments); + trackUrlChange(); + return result; + }; + })(history.replaceState); + + window.__matomoHistoryWrapped = true; + } // Listen for back/forward window.addEventListener('popstate', trackUrlChange);
25-36: Gate Matomo behind consent, honor DNT, and fix CSP (frontend/micro-ui/web/public/index.html)Verified: the Matomo snippet is present inline in frontend/micro-ui/web/public/index.html (around lines 23–36). Matomo supports requireConsent / requireCookieConsent / disableCookies / setDoNotTrack (confirmed).
Very short action: prevent unconditional tracking by adding consent/DNT handling before trackPageView and address CSP by externalizing the bootstrap or using a server nonce.
Files to change
- frontend/micro-ui/web/public/index.html — replace Matomo bootstrap (currently inline) with the consent/DNT-aware snippet below or move it to an external loader and load that file from an allowed CSP source.
Suggested diff (minimal, uncomment the appropriate consent line for your legal requirement):
- var _paq = window._paq = window._paq || []; - /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ - _paq.push(['trackPageView']); - _paq.push(['enableLinkTracking']); + var _paq = window._paq = window._paq || []; + // Respect browser Do Not Track + _paq.push(['setDoNotTrack', true]); + // If you must block all tracking until explicit opt-in (GDPR strict opt-in), uncomment: + // _paq.push(['requireConsent']); + // If you want cookieless tracking until consent and only allow cookies after consent, uncomment: + // _paq.push(['requireCookieConsent']); + // To never use cookies at all (always cookieless), uncomment: + // _paq.push(['disableCookies']); + /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ + _paq.push(['trackPageView']); + _paq.push(['enableLinkTracking']);CSP note (pick one)
- Move the inline snippet into an external JS file (e.g. public/analytics/matomo-loader.js) and load it with a normal <script src="..."> so it can be allowed by script-src; OR
- Keep inline but add a server-generated nonce attribute to this script tag and add the same nonce to your Content-Security-Policy header.
If you want, I can:
- Provide the externalized bootstrap + consent-gated loader (including example CMP callbacks to call _paq.push(['setConsentGiven']) / _paq.push(['rememberCookieConsentGiven']) on accept), or
- Produce a small server-side example showing how to inject a CSP nonce and add it to the script tag.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these settings in your CodeRabbit configuration.
📒 Files selected for processing (1)
frontend/micro-ui/web/public/index.html(1 hunks)
🔇 Additional comments (1)
frontend/micro-ui/web/public/index.html (1)
49-81: SPA route tracking present — good coverage of pushState/replaceState/popstateThe added SPA pageview tracking corrects the earlier gap for client-side navigations.
Summary by CodeRabbit