Analytics Integration
Relevant source files
The following files were used as context for generating this wiki page:The Quant application integrates analytics primarily for referral tracking and user-facing data visualization. The system is designed with a strong emphasis on privacy, performing all core calculations and data storage on the client-side. There is no server-side data collection for user assessments.
Analytics capabilities can be divided into two main areas: external link tracking using UTM parameters and internal, on-device analytics through the Score Manager. This approach allows the project to understand its traffic sources without compromising user privacy.
Sources: README.md:83-89, src/components/FAQAccordion.tsx:28-43
UTM-Based Referral Tracking
The application uses Urchin Tracking Module (UTM) parameters to monitor the sources of incoming traffic. This is implemented through a centralized configuration and applied to various outbound links throughout the application.
Sources: src/lib/constants.ts:39-43
UTM Configuration
A constant UTM_PARAMS object defines the standard parameters appended to outbound URLs. This ensures consistency in tracking across the application.
| Parameter | Value | Description |
|---|---|---|
utm_source | quant.cyberpath-hq.com | Identifies the source of the traffic. |
utm_medium | referral | The medium used to reach the site. |
utm_campaign | website | The specific campaign name. |
Sources: src/lib/constants.ts:39-43
Implementation
The UTM_PARAMS are converted into a URL query string and appended to links in several key components.
This diagram shows how UTM parameters are applied to an outbound link.
Key areas where UTM tracking is implemented:
- Application Footer: Links to CVSS specifications, GitHub, Discord, and other community resources.
- CVSS Calculator: The "Subscribe to Newsletter" button includes UTM parameters.
- Embeddable Charts: A link back to the Quant website from an embedded chart is tagged with specific UTM parameters to track traffic from embeds.
Sources: src/components/Footer.tsx:25-99, src/components/CVSSGenericCalculator.tsx:399-405, src/lib/embed-chart.ts:181-185
Score History Analytics
Quant provides users with local, on-device analytics through the CVSS Score Manager. This feature allows users to save, manage, and visualize their calculated scores. All data is stored in the browser's localStorage.
Sources: src/components/ScoreHistory.tsx, README.md:65-69
Key Features
- Score Persistence: Scores are saved to
localStoragevia theaddToHistoryfunction and managed under theSTORAGE_KEY. - Data Visualization: Users can select multiple saved scores and generate charts to visualize the severity distribution.
- Chart Generation: The
ChartDialogcomponent is used to render bar or donut charts based on the selected entries. - Import/Export: Users can import and export their score history as a JSON file, allowing for data backup and sharing without server interaction.
Sources: src/components/ScoreHistory.tsx:44-45, 140-143, 521-527, 638-644, src/lib/constants.ts:101-102
This sequence diagram illustrates the flow of generating a chart from the Score Manager.
Embeddable Chart Analytics
Quant allows users to generate embeddable HTML snippets for score charts. The generateEmbeddableChartHTML function creates a self-contained block of HTML, CSS, and JavaScript that renders a chart.
A key analytics feature within this is a tracked link back to the Quant application. This link is tagged with a unique set of UTM parameters to identify traffic originating from these embedded charts.
Sources: src/lib/embed-chart.ts:10-15
Embedded Chart UTM Parameters
| Parameter | Value |
|---|---|
utm_source | embedded_logo |
utm_medium | chart |
utm_campaign | cvss_summary_chart |
Sources: src/lib/embed-chart.ts:182-184
The following diagram shows the process of generating an embeddable chart and including the tracked link.
Sources: src/lib/embed-chart.ts:10-205
Privacy and Data Collection
A core principle of Quant is user privacy. The application is designed to be 100% client-side, with no server communication for scoring or data storage.
- Client-Side Processing: All CVSS calculations happen within the user's browser.
- No Account Required: The tool can be used immediately without registration.
- Zero Data Collection: User assessments are not sent to any external servers.
- Local Storage: The Score Manager feature uses the browser's
localStorageto persist data, which remains on the user's machine.
Sources: README.md:83-89, src/components/FAQAccordion.tsx:28-43
Summary
Quant's analytics integration serves two distinct purposes. Externally, it uses standard UTM parameters to track referral traffic from links within the application and from its embeddable chart feature. Internally, it provides users with powerful, private, on-device analytics by allowing them to visualize their saved score history through dynamically generated charts. This dual approach supports project growth metrics while strictly adhering to its client-side, privacy-first architecture.