feat(analytics): GA4 tracking for presets.polymaker.com downloads

.gitignore

@@ -1,2 +1,3 @@
 *.DS_Store
 .opencode/
+doc-outside/

app.js

@@ -17,6 +17,22 @@ function escapeHtml(s) {
     .replace(/'/g, ''');
 }
 
+function getGaValue(value) {
+  if (value === null || value === undefined) return 'unknown';
+  if (typeof value === 'string' && value.trim() === '') return 'unknown';
+  return value;
+}
+
+function trackGaEvent(eventName, params) {
+  if (typeof window === 'undefined') return;
+  if (typeof window.gtag !== 'function') return;
+  try {
+    window.gtag('event', eventName, params || {});
+  } catch (e) {
+    console.warn('GA event failed:', eventName, e);
+  }
+}
+
 function applyTheme(theme) {
   var body = document.body;
   if (theme === 'wiki') {
@@ -136,6 +152,17 @@ function init() {
     return { effectiveSlicer: effectiveSlicer, effectiveBrand: effectiveBrand };
   }
 
+  function getRowGaContext(row, fallbackSlicer) {
+    var cells = row ? row.querySelectorAll('td') : [];
+    var filters = getEffectiveFilters();
+    return {
+      slicer: getGaValue(fallbackSlicer || filters.effectiveSlicer || filterState.slicer),
+      material: getGaValue(cells[1] ? cells[1].textContent.trim() : ''),
+      brand: getGaValue(cells[2] ? cells[2].textContent.trim() : ''),
+      model: getGaValue(cells[3] ? cells[3].textContent.trim() : '')
+    };
+  }
+
   function isBambuStudioSlicerSelected() {
     var filters = getEffectiveFilters();
     return filters.effectiveSlicer === 'BambuStudio';
@@ -508,6 +535,16 @@ function init() {
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
+      if (originalPresets && originalPresets.length) {
+        var firstPreset = originalPresets[0];
+        trackGaEvent('download_bundle', {
+          file_type: 'bbsflmt',
+          slicer: getGaValue(firstPreset.slicer || 'BambuStudio'),
+          material: getGaValue(firstPreset.material),
+          brand: getGaValue(firstPreset.brand),
+          model: getGaValue(firstPreset.model)
+        });
+      }
       setTimeout(function() {
         URL.revokeObjectURL(objectUrl);
       }, 1000);
@@ -1008,6 +1045,15 @@ function init() {
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
+            var filters = getEffectiveFilters();
+            trackGaEvent('download_selected', {
+              file_type: 'zip',
+              selected_count: presetIds.length,
+              slicer: getGaValue(filters.effectiveSlicer || filterState.slicer),
+              series: getGaValue(filterState.series),
+              brand: getGaValue(filters.effectiveBrand || filterState.brand),
+              model: getGaValue(filterState.model)
+            });
             // Delay revoking object URL to ensure download starts
             setTimeout(function () {
               URL.revokeObjectURL(objectUrl);
@@ -1223,6 +1269,11 @@ function init() {
           document.body.appendChild(a);
           a.click();
           document.body.removeChild(a);
+          trackGaEvent('download_bundle_batch', {
+            file_type: 'zip',
+            material_count: materials.length,
+            slicer: 'BambuStudio'
+          });
           setTimeout(function() { URL.revokeObjectURL(objectUrl); }, 1000);
 
           if (downloadBundleBtn) {
@@ -1748,6 +1799,46 @@ function init() {
       }
 
       tbody.addEventListener('click', function (e) {
+        // Handle non-Bambu direct JSON download with post-download tracking.
+        var directJsonLink = e.target.closest('a[data-download-url]');
+        if (directJsonLink) {
+          e.preventDefault();
+          var djUrl = directJsonLink.getAttribute('data-download-url');
+          var djFilename = directJsonLink.getAttribute('data-download-filename') || 'preset.json';
+          if (!djUrl || djUrl === '#') {
+            alert(t('alert.invalid.url'));
+            return;
+          }
+          fetch(djUrl, { mode: 'cors' })
+            .then(function (r) {
+              if (!r.ok) throw new Error('Failed to fetch preset: ' + r.statusText);
+              return r.blob();
+            })
+            .then(function (blob) {
+              var objectUrl = URL.createObjectURL(blob);
+              var a = document.createElement('a');
+              a.href = objectUrl;
+              a.download = djFilename;
+              document.body.appendChild(a);
+              a.click();
+              document.body.removeChild(a);
+              var rowContext = getRowGaContext(directJsonLink.closest('tr'));
+              trackGaEvent('download_single', {
+                file_type: 'json',
+                slicer: rowContext.slicer,
+                material: rowContext.material,
+                brand: rowContext.brand,
+                model: rowContext.model
+              });
+              setTimeout(function () { URL.revokeObjectURL(objectUrl); }, 1000);
+            })
+            .catch(function (err) {
+              console.error('Error downloading JSON:', err);
+              alert(t('alert.error.preset', { msg: err.message }));
+            });
+          return;
+        }
+
         // Handle BambuStudio JSON button click — fetch, expand per-printer,
         // zip, and download (issue #14).
         var bambuJsonLink = e.target.closest('a[data-bambu-json="1"]');
@@ -1787,6 +1878,14 @@ function init() {
                   document.body.appendChild(a);
                   a.click();
                   document.body.removeChild(a);
+                  var rowContext = getRowGaContext(bambuJsonLink.closest('tr'), 'BambuStudio');
+                  trackGaEvent('download_single', {
+                    file_type: 'json',
+                    slicer: rowContext.slicer,
+                    material: getGaValue(bjMaterial || rowContext.material),
+                    brand: rowContext.brand,
+                    model: rowContext.model
+                  });
                   setTimeout(function () { URL.revokeObjectURL(objectUrl); }, 1000);
                 });
               })

index.html

@@ -17,6 +17,17 @@
   <link rel="stylesheet" href="style.css">
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous">
+  <!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-KXL1MCXGJZ"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-KXL1MCXGJZ', {
+      send_page_view: true,
+      debug_mode: /localhost|127\.0\.0\.1/.test(window.location.hostname)
+    });
+  </script>
   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/WZCXdW/klaviyo.js"></script>
   <script type="application/ld+json">
   {

scripts/test-fixtures/file1.json

@@ -1 +0,0 @@
-{}