public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

feat: add Umami analytics tracking

Browse Source 
- Add Umami v2.13.2 script to index.html
- Track key events: lesson_complete, module_start, section_view,
  language_change, playground_template, reset_progress

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Michael Czechowski
2026-01-15 15:45:03 +01:00
parent 6f9091ceb4
commit aa5292b653
2 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app.js
View File

@@ -14,6 +14,13 @@ import { oneDark } from "@codemirror/theme-one-dark";
import { html } from "@codemirror/lang-html"; import { html } from "@codemirror/lang-html";
import { css } from "@codemirror/lang-css"; import { css } from "@codemirror/lang-css";
// Analytics tracking helper (Umami v2.13.2)
function track(eventName, eventData = {}) {
if (typeof umami !== "undefined" && umami.track) {
umami.track(eventName, eventData);
}
}
// Simplified state - LessonEngine now manages lesson state and progress // Simplified state - LessonEngine now manages lesson state and progress
const state = { const state = {
userSettings: { userSettings: {
@@ -223,6 +230,8 @@ function toggleExpectedResult() {
// ================= LANGUAGE TOGGLE ================= // ================= LANGUAGE TOGGLE =================
function changeLanguage(newLang) { function changeLanguage(newLang) {
track("language_change", { language: newLang });
// Add transition class before any updates // Add transition class before any updates
elements.editorSection?.classList.add("transitioning"); elements.editorSection?.classList.add("transitioning");
@@ -396,6 +405,8 @@ function selectModule(moduleId) {
const success = lessonEngine.setModuleById(moduleId); const success = lessonEngine.setModuleById(moduleId);
if (!success) return; if (!success) return;
track("module_start", { module: moduleId });
// Show lesson UI // Show lesson UI
showLessonUI(); showLessonUI();
@@ -734,6 +745,7 @@ function resetCode() {
function loadRandomTemplate() { function loadRandomTemplate() {
const template = getRandomTemplate(); const template = getRandomTemplate();
if (codeEditor && template) { if (codeEditor && template) {
track("playground_template", { template: template.name });
codeEditor.setValue(template.code); codeEditor.setValue(template.code);
// Apply the code to the preview // Apply the code to the preview
lessonEngine.applyUserCode(template.code, true); lessonEngine.applyUserCode(template.code, true);
@@ -764,6 +776,12 @@ function runCode() {
const validationResult = lessonEngine.validateCode(); const validationResult = lessonEngine.validateCode();
if (validationResult.isValid) { if (validationResult.isValid) {
// Track lesson completion
track("lesson_complete", {
module: engineState.module?.id,
lesson: engineState.lessonIndex
});
// Show success hint // Show success hint
showSuccessHint(validationResult.message || t("successMessage")); showSuccessHint(validationResult.message || t("successMessage"));
@@ -846,6 +864,7 @@ function closeResetDialog() {
} }
function handleResetConfirm() { function handleResetConfirm() {
track("reset_progress");
lessonEngine.clearProgress(); lessonEngine.clearProgress();
closeResetDialog(); closeResetDialog();
closeSidebar(); closeSidebar();
@@ -1361,6 +1380,9 @@ function showSectionPage(sectionId) {
hideAllPages(); hideAllPages();
elements.sectionPage?.classList.remove("hidden"); elements.sectionPage?.classList.remove("hidden");
// Track section page view
track("section_view", { section: sectionId });
const section = getSection(sectionId); const section = getSection(sectionId);
if (!section) { if (!section) {
showLandingPage(); showLandingPage();

1
src/index.html
View File

@@ -10,6 +10,7 @@
/> />
<title>Code Crispies - Learn HTML & CSS Interactively</title> <title>Code Crispies - Learn HTML & CSS Interactively</title>
<link rel="stylesheet" href="main.css" /> <link rel="stylesheet" href="main.css" />
<script defer src="https://librete.ch/u/script.js" data-website-id="2189049f-80c1-4ca0-b0ff-b5cc49276b5f"></script>
</head> </head>
<body> <body>
<a href="#main-content" class="skip-link" data-i18n="skipLink">Skip to main content</a> <a href="#main-content" class="skip-link" data-i18n="skipLink">Skip to main content</a>