fix: improve UX and tracking

- Change landing page progress to positive wording ('X lessons to explore')
- Add scroll to top when navigating between pages
- Fix section pill highlighting for welcome/playground modules
- Add Umami tracking for language URL switch and landing page clicks
This commit is contained in:
2026-01-16 01:47:49 +01:00
parent fc67f32a99
commit 5c96359686

View File

@@ -1939,6 +1939,7 @@ function handleRoute(shouldUpdateUrl = true) {
break; break;
case RouteType.LANGUAGE: case RouteType.LANGUAGE:
// Switch language and redirect to home // Switch language and redirect to home
track("language_url", { language: route.lang });
setLanguage(route.lang); setLanguage(route.lang);
applyTranslations(); applyTranslations();
// Sync language dropdown // Sync language dropdown
@@ -1977,6 +1978,7 @@ function hideAllPages() {
function showLandingPage() { function showLandingPage() {
hideAllPages(); hideAllPages();
elements.landingPage?.classList.remove("hidden"); elements.landingPage?.classList.remove("hidden");
window.scrollTo(0, 0);
// Update section progress on landing page // Update section progress on landing page
updateLandingProgress(); updateLandingProgress();
@@ -2000,7 +2002,7 @@ function updateLandingProgress() {
} }
}); });
if (total > 0) { if (total > 0) {
progressEl.textContent = `${completed}/${total} lessons`; progressEl.textContent = `${total} lessons to explore`;
} else { } else {
progressEl.textContent = ""; progressEl.textContent = "";
} }
@@ -2014,6 +2016,7 @@ function updateLandingProgress() {
function showSectionPage(sectionId) { function showSectionPage(sectionId) {
hideAllPages(); hideAllPages();
elements.sectionPage?.classList.remove("hidden"); elements.sectionPage?.classList.remove("hidden");
window.scrollTo(0, 0);
// Track section page view // Track section page view
track("section_view", { section: sectionId }); track("section_view", { section: sectionId });
@@ -2061,6 +2064,7 @@ function showSectionPage(sectionId) {
function showReferencePage(refId) { function showReferencePage(refId) {
hideAllPages(); hideAllPages();
elements.referencePage?.classList.remove("hidden"); elements.referencePage?.classList.remove("hidden");
window.scrollTo(0, 0);
// Default to CSS if no refId // Default to CSS if no refId
const activeRef = refId || "css"; const activeRef = refId || "css";
@@ -2181,8 +2185,9 @@ function updateNavHighlight(route) {
link.classList.add("active"); link.classList.add("active");
} else if (route?.type === RouteType.LESSON) { } else if (route?.type === RouteType.LESSON) {
// Highlight section based on module's inferred section // Highlight section based on module's inferred section
// Skip highlighting for modules excluded from progress (welcome, playground, goodbye)
const module = lessonEngine.modules.find((m) => m.id === route.moduleId); const module = lessonEngine.modules.find((m) => m.id === route.moduleId);
if (module) { if (module && !module.excludeFromProgress) {
const moduleSection = getModuleSection(module); const moduleSection = getModuleSection(module);
if (link.dataset.section === moduleSection) { if (link.dataset.section === moduleSection) {
link.classList.add("active"); link.classList.add("active");
@@ -2363,6 +2368,18 @@ function init() {
closeSidebar(); closeSidebar();
} }
}); });
// Landing page tracking (event delegation)
elements.landingPage?.addEventListener("click", (e) => {
const target = e.target.closest("a");
if (!target) return;
if (target.classList.contains("cta-button")) {
track("landing_cta", { href: target.getAttribute("href") });
} else if (target.classList.contains("section-card")) {
track("landing_section", { section: target.dataset.section });
}
});
} }
// Start the application // Start the application