Analytics and Tracking
Relevant source files
The following files were used as context for generating this wiki page:The CyberPath application integrates several third-party services for analytics, error monitoring, debugging, and advertising. These tools help in understanding user behavior, identifying and fixing application errors, and supporting the project through sponsorships. The primary integrations include Google Tag Manager for general tracking, Sentry for error monitoring, SpotlightJS for in-browser debugging, and GitAds for sponsorship-based advertising.
This document outlines the architecture and configuration of these services as implemented within the project. It covers the data flow for each service and identifies the key configuration files and code segments responsible for their integration.
Core Tracking and Analytics Services
The project utilizes a combination of services for different tracking and monitoring purposes. The configuration for these services is primarily managed within astro.config.ts and loaded via specific scripts.
Service Integration Overview
This diagram illustrates the main analytics and tracking services integrated into the Astro application.
Sources: astro.config.ts, public/gtm.js, README.md, scripts/screenshot.js
Summary of Services
| Service | Purpose | Key Configuration/File |
|---|---|---|
| Google Tag Manager | Analytics and tag management | public/gtm.js |
| Sentry | Error monitoring and reporting | astro.config.ts, package.json |
| SpotlightJS | In-browser debugging tool | astro.config.ts, package.json |
| GitAds | Sponsorship and advertising | README.md |
| Termly | Cookie consent management | scripts/screenshot.js |
Sources: public/gtm.js, astro.config.ts:15-21, package.json:14-15, README.md:13-14, scripts/screenshot.js:80-83
Google Tag Manager (GTM)
Google Tag Manager is used for deploying and managing analytics tags on the website. The integration is handled by a single JavaScript file.
GTM Implementation
A standard GTM container script is included in the project. This script asynchronously loads the GTM library using the project-specific container ID GTM-MZ2LDS5P. It pushes an initial gtm.start event to the dataLayer.
// public/gtm.js
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MZ2LDS5P');
Sources: public/gtm.js:1-6
GTM Loading Flow
The following diagram shows how the GTM script is loaded and initialized in the user's browser.
Sources: public/gtm.js
Error Monitoring and Debugging
The project uses Sentry for error monitoring and SpotlightJS for development-time debugging. Both are configured as Astro integrations.
Sentry Integration
Sentry is integrated via the @sentry/astro package. The configuration in astro.config.ts enables Sentry only in the development environment (import.meta.env.DEV).
// astro.config.ts:15-21
export default defineConfig({
// ...
integrations: [
// ...
sentry({
enabled: import.meta.env.DEV,
}),
// ...
],
// ...
});
The dependency is listed in package.json.
// package.json:14
"dependencies": {
// ...
"@sentry/astro": "^8.55.0",
// ...
}
Sources: astro.config.ts:18-20, package.json:14
SpotlightJS Integration
SpotlightJS is a debugging tool also configured as an Astro integration. It provides in-browser debugging capabilities during development.
// astro.config.ts:21-22
export default defineConfig({
// ...
integrations: [
// ...
spotlightjs(),
// ...
],
// ...
});
The dependency is listed in package.json.
// package.json:15
"dependencies": {
// ...
"@spotlightjs/astro": "^2.4.3",
// ...
}
Sources: astro.config.ts:21, package.json:15
Advertising and Sponsorship
The project uses GitAds for sponsorship, which is a form of advertising and user tracking.
GitAds
The README.md file includes a sponsored link from GitAds. This is an image link that also acts as a tracking link to monitor ad impressions and clicks.
[](https://gitads.dev/v1/ad-track?source=ebalo55/cyberpath@github)
Sources: README.md:13-14
The flow involves serving an ad image and tracking the click, both pointing to the gitads.dev service with the source identified as ebalo55/cyberpath@github.
Cookie Consent Management
While not directly configured in the main application files, the presence of a cookie consent management tool is implied by a utility script.
Termly Banner
The scripts/screenshot.js script, used for generating a screenshot of the application, contains logic to programmatically remove an HTML element with the ID termly-code-snippet-support. This indicates that a Termly.io cookie consent banner is active on the site, which is necessary for managing user consent for the tracking scripts mentioned above.
// scripts/screenshot.js:80-83
await page.evaluate(() => {
// Remove the termly banner (damned cookies)
const termly = document.getElementById("termly-code-snippet-support");
if (termly) {
termly.remove();
}
Sources: scripts/screenshot.js:80-86
This step is necessary to ensure the automated screenshot is not obscured by the cookie banner.
Summary
The analytics and tracking systems in CyberPath are a mix of industry-standard tools for monitoring, debugging, and monetization. Google Tag Manager serves as the central hub for analytics tags, Sentry and SpotlightJS provide robust developer-focused monitoring, and GitAds contributes to project sponsorship. The presence of a cookie consent manager like Termly suggests an awareness of privacy compliance related to these tracking activities.