Analytics and Tracking
Relevant source files
The following files were used as context for generating this wiki page:The CertDb application incorporates several mechanisms for analytics, sponsorship tracking, and search engine management. The primary tool for user analytics is Google Tag Manager (GTM), which is loaded on pages to gather usage data. Sponsorship tracking is handled via GitAds, which monitors clicks on sponsored links.
Additionally, the project manages how search engines and other web crawlers interact with the site through a dynamically generated robots.txt file and sitemap configuration. Privacy and cookie consent are managed, as indicated by the presence of a cookie management banner script.
Core Tracking Components
The following table summarizes the key analytics and tracking systems implemented in the project.
| Component | Purpose | Relevant Files |
|---|---|---|
| Google Tag Manager | User behavior and website analytics. | public/gtm.js |
| GitAds | Tracking clicks on sponsored links for monetization. | README.md |
| Crawler Management | Controls how search engine bots index the site. | src/pages/robots.txt.ts, astro.config.ts, src/lib/career-paths.ts |
| Cookie Consent | Manages user consent for tracking scripts. | scripts/screenshot.js |
Google Tag Manager (GTM) Integration
The project uses Google Tag Manager to handle analytics. A small JavaScript snippet is included in the application to load the GTM library asynchronously.
Implementation
The core of the GTM integration is a minified JavaScript file located at public/gtm.js. This script performs the following actions:
- Initializes the
dataLayerarray if it doesn't exist. - Pushes an initial
gtm.startevent to thedataLayerwith the current timestamp. - Creates a
<script>element to asynchronously load the GTM library. - The GTM container ID is hardcoded as
GTM-MZ2LDS5P. - Inserts the GTM script into the DOM.
Sources: public/gtm.js:1-5
Data Flow
The diagram below illustrates the loading sequence for Google Tag Manager.
This diagram shows how the user's visit triggers the local gtm.js script, which then fetches the main GTM container from Google's servers to enable tracking.
Sources: public/gtm.js
Sponsorship Tracking (GitAds)
The project utilizes GitAds for sponsorship tracking, as shown by a sponsored link in the main README.md file. This allows the project to track engagement with its sponsors.
The tracking is implemented via a specially crafted URL that directs to the GitAds tracking service before redirecting to the sponsor's content.
Tracking Link
The README.md file contains a GitAds link for tracking and serving ads.
- Ad Serve URL:
https://gitads.dev/v1/ad-serve?source=ebalo55/cyberpath@github - Ad Track URL:
https://gitads.dev/v1/ad-track?source=ebalo55/cyberpath@github
The source parameter identifies the origin of the click, which in this case is the GitHub repository.
Sources: README.md:13-14
GitAds Flow
The following diagram shows the user flow when interacting with a GitAds sponsored link.
This flow ensures that the click is registered by GitAds before the user reaches the final destination.
Sources: README.md:13-14
Search Engine and Crawler Management
The application employs several strategies to manage how search engine crawlers index the site content.
robots.txt Generation
A robots.txt file is dynamically generated to instruct web crawlers. The generation logic is in src/pages/robots.txt.ts. It allows all user-agents to crawl the entire site (Allow: /) and provides a link to the sitemap.
// src/pages/robots.txt.ts
const getRobotsTxt = (sitemapURL: URL) => `
User-agent: *
Allow: /
Sitemap: ${sitemapURL.href}
`;
The sitemap URL is constructed using the site's base URL from the Astro configuration.
Sources: src/pages/robots.txt.ts:3-8, astro.config.ts:11
Sitemap Integration
The Astro configuration file (astro.config.ts) includes the @astrojs/sitemap integration, which automatically generates a sitemap for the site. This sitemap is then referenced in the robots.txt file to help search engines discover all crawlable pages.
Sources: astro.config.ts:16, src/pages/robots.txt.ts:13-14
Link Relation Attributes
External links, such as image attributions, use the rel="noopener nofollow" attribute.
noopener: Prevents the new page from being able to access thewindow.openerproperty, enhancing security.nofollow: Instructs search engines not to follow the link, meaning no link equity (or "link juice") is passed to the destination URL. This is a way to manage the site's SEO profile.
Example from src/lib/career-paths.ts:
<a href="https://leonardo.ai/" target="_blank" rel="noopener nofollow">Image generated with Leonardo AI</a>
Sources: src/lib/career-paths.ts:48, src/lib/career-paths.ts:53, src/lib/career-paths.ts:58
Cookie and Privacy Management
The codebase indicates the use of a cookie consent management platform, likely Termly. In scripts/screenshot.js, a script used for automated testing, there is a specific step to remove the Termly banner to ensure a clean screenshot.
// scripts/screenshot.js
await page.evaluate(() => {
// Remove the termly banner (damned cookies)
const termly = document.getElementById("termly-code-snippet-support");
if (termly) {
termly.remove();
}
// ...
});
This implies that in a normal user session, a banner with the ID termly-code-snippet-support is present to handle user consent for cookies, which is a prerequisite for running analytics scripts like GTM in many jurisdictions.
Sources: scripts/screenshot.js:77-83