Add support for umami analytics in status page

db/knex_migrations/2025-02-17-2142-generalize-analytics.js

@@ -0,0 +1,23 @@
+// Udpate status_page table to generalize analytics fields
+exports.up = function (knex) {
+    return knex.schema
+        .alterTable("status_page", function (table) {
+            table.renameColumn("google_analytics_tag_id", "analytics_id");
+            table.string("analytics_script_url");
+            table.enu("analytics_type", [ "google", "umami", "plausible", "matomo" ]).defaultTo(null);
+
+        }).then(() => {
+            // After a succesful migration, add google as default for previous pages
+            knex("status_page").whereNotNull("analytics_id").update({
+                "analytics_type": "google",
+            });
+        });
+};
+
+exports.down = function (knex) {
+    return knex.schema.alterTable("status_page", function (table) {
+        table.renameColumn("analytics_id", "google_analytics_tag_id");
+        table.dropColumn("analytics_script_url");
+        table.dropColumn("analytics_type");
+    });
+};

server/analytics/analytics.js

@@ -0,0 +1,48 @@
+const googleAnalytics = require("./google-analytics");
+const umamiAnalytics = require("./umami-analytics");
+const plausibleAnalytics = require("./plausible-analytics");
+const matomoAnalytics = require("./matomo-analytics");
+
+/**
+ * Returns a string that represents the javascript that is required to insert the selected Analytics' script
+ * into a webpage.
+ * @param {typeof import("../model/status_page").StatusPage} statusPage Status page populate HTML with
+ * @returns {string} HTML script tags to inject into page
+ */
+function getAnalyticsScript(statusPage) {
+    switch (statusPage.analyticsType) {
+        case "google":
+            return googleAnalytics.getGoogleAnalyticsScript(statusPage.analyticsId);
+        case "umami":
+            return umamiAnalytics.getUmamiAnalyticsScript(statusPage.analyticsScriptUrl, statusPage.analyticsId);
+        case "plausible":
+            return plausibleAnalytics.getPlausibleAnalyticsScript(statusPage.analyticsScriptUrl, statusPage.analyticsId);
+        case "matomo":
+            return matomoAnalytics.getMatomoAnalyticsScript(statusPage.analyticsScriptUrl, statusPage.analyticsId);
+        default:
+            return null;
+    }
+}
+
+/**
+ * Function that checks wether the selected analytics has been configured properly
+ * @param {typeof import("../model/status_page").StatusPage} statusPage Status page populate HTML with
+ * @returns {boolean} Boolean defining if the analytics config is valid
+ */
+function isValidAnalyticsConfig(statusPage) {
+    switch (statusPage.analyticsType) {
+        case "google":
+            return statusPage.analyticsId != null;
+        case "umami":
+        case "plausible":
+        case "matomo":
+            return statusPage.analyticsId != null && statusPage.analyticsScriptUrl != null;
+        default:
+            return false;
+    }
+}
+
+module.exports = {
+    getAnalyticsScript,
+    isValidAnalyticsConfig
+};

server/analytics/matomo-analytics.js

@@ -0,0 +1,47 @@
+const jsesc = require("jsesc");
+const { escape } = require("html-escaper");
+
+/**
+ * Returns a string that represents the javascript that is required to insert the Matomo Analytics script
+ * into a webpage.
+ * @param {string} matomoUrl Domain name with tld to use with the Matomo Analytics script.
+ * @param {string} siteId Site ID to use with the Matomo Analytics script.
+ * @returns {string} HTML script tags to inject into page
+ */
+function getMatomoAnalyticsScript(matomoUrl, siteId) {
+    let escapedMatomoUrlJS = jsesc(matomoUrl, { isScriptContext: true });
+    let escapedSiteIdJS = jsesc(siteId, { isScriptContext: true });
+
+    if (escapedMatomoUrlJS) {
+        escapedMatomoUrlJS = escapedMatomoUrlJS.trim();
+    }
+
+    if (escapedSiteIdJS) {
+        escapedSiteIdJS = escapedSiteIdJS.trim();
+    }
+
+    // Escape the domain url for use in an HTML attribute.
+    let escapedMatomoUrlHTMLAttribute = escape(escapedMatomoUrlJS);
+
+    // Escape the website id for use in an HTML attribute.
+    let escapedSiteIdHTMLAttribute = escape(escapedSiteIdJS);
+
+    return `
+        <script type="text/javascript">
+            var _paq = window._paq = window._paq || [];
+            _paq.push(['trackPageView']);
+            _paq.push(['enableLinkTracking']);
+            (function() {
+                var u="//${escapedMatomoUrlHTMLAttribute}/";
+                _paq.push(['setTrackerUrl', u+'matomo.php']);
+                _paq.push(['setSiteId', ${escapedSiteIdHTMLAttribute}]);
+                var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+            })();
+        </script>
+    `;
+}
+
+module.exports = {
+    getMatomoAnalyticsScript,
+};

server/analytics/plausible-analytics.js

@@ -0,0 +1,36 @@
+const jsesc = require("jsesc");
+const { escape } = require("html-escaper");
+
+/**
+ * Returns a string that represents the javascript that is required to insert the Plausible Analytics script
+ * into a webpage.
+ * @param {string} scriptUrl the Plausible Analytics script url.
+ * @param {string} domainsToMonitor Domains to track seperated by a ',' to add Plausible Analytics script.
+ * @returns {string} HTML script tags to inject into page
+ */
+function getPlausibleAnalyticsScript(scriptUrl, domainsToMonitor) {
+    let escapedScriptUrlJS = jsesc(scriptUrl, { isScriptContext: true });
+    let escapedWebsiteIdJS = jsesc(domainsToMonitor, { isScriptContext: true });
+
+    if (escapedScriptUrlJS) {
+        escapedScriptUrlJS = escapedScriptUrlJS.trim();
+    }
+
+    if (escapedWebsiteIdJS) {
+        escapedWebsiteIdJS = escapedWebsiteIdJS.trim();
+    }
+
+    // Escape the domain url for use in an HTML attribute.
+    let escapedScriptUrlHTMLAttribute = escape(escapedScriptUrlJS);
+
+    // Escape the website id for use in an HTML attribute.
+    let escapedWebsiteIdHTMLAttribute = escape(escapedWebsiteIdJS);
+
+    return `
+        <script defer src="${escapedScriptUrlHTMLAttribute}" data-domain="${escapedWebsiteIdHTMLAttribute}"></script>
+    `;
+}
+
+module.exports = {
+    getPlausibleAnalyticsScript
+};

server/analytics/umami-analytics.js

@@ -0,0 +1,36 @@
+const jsesc = require("jsesc");
+const { escape } = require("html-escaper");
+
+/**
+ * Returns a string that represents the javascript that is required to insert the Umami Analytics script
+ * into a webpage.
+ * @param {string} scriptUrl the Umami Analytics script url.
+ * @param {string} websiteId Website ID to use with the Umami Analytics script.
+ * @returns {string} HTML script tags to inject into page
+ */
+function getUmamiAnalyticsScript(scriptUrl, websiteId) {
+    let escapedScriptUrlJS = jsesc(scriptUrl, { isScriptContext: true });
+    let escapedWebsiteIdJS = jsesc(websiteId, { isScriptContext: true });
+
+    if (escapedScriptUrlJS) {
+        escapedScriptUrlJS = escapedScriptUrlJS.trim();
+    }
+
+    if (escapedWebsiteIdJS) {
+        escapedWebsiteIdJS = escapedWebsiteIdJS.trim();
+    }
+
+    // Escape the Script url for use in an HTML attribute.
+    let escapedScriptUrlHTMLAttribute = escape(escapedScriptUrlJS);
+
+    // Escape the website id for use in an HTML attribute.
+    let escapedWebsiteIdHTMLAttribute = escape(escapedWebsiteIdJS);
+
+    return `
+        <script defer src="${escapedScriptUrlHTMLAttribute}" data-website-id="${escapedWebsiteIdHTMLAttribute}"></script>
+    `;
+}
+
+module.exports = {
+    getUmamiAnalyticsScript,
+};

server/model/status_page.js

@@ -3,7 +3,7 @@ const { R } = require("redbean-node");
 const cheerio = require("cheerio");
 const { UptimeKumaServer } = require("../uptime-kuma-server");
 const jsesc = require("jsesc");
-const googleAnalytics = require("../google-analytics");
+const analytics = require("../analytics/analytics");
 const { marked } = require("marked");
 const { Feed } = require("feed");
 const config = require("../config");
@@ -120,9 +120,9 @@ class StatusPage extends BeanModel {
 
         const head = $("head");
 
-        if (statusPage.googleAnalyticsTagId) {
-            let escapedGoogleAnalyticsScript = googleAnalytics.getGoogleAnalyticsScript(statusPage.googleAnalyticsTagId);
-            head.append($(escapedGoogleAnalyticsScript));
+        if (analytics.isValidAnalyticsConfig(statusPage)) {
+            let escapedAnalyticsScript = analytics.getAnalyticsScript(statusPage);
+            head.append($(escapedAnalyticsScript));
         }
 
         // OG Meta Tags
@@ -407,7 +407,9 @@ class StatusPage extends BeanModel {
             customCSS: this.custom_css,
             footerText: this.footer_text,
             showPoweredBy: !!this.show_powered_by,
-            googleAnalyticsId: this.google_analytics_tag_id,
+            analyticsId: this.analytics_id,
+            analyticsScriptUrl: this.analytics_script_url,
+            analyticsType: this.analytics_type,
             showCertificateExpiry: !!this.show_certificate_expiry,
         };
     }
@@ -430,7 +432,9 @@ class StatusPage extends BeanModel {
             customCSS: this.custom_css,
             footerText: this.footer_text,
             showPoweredBy: !!this.show_powered_by,
-            googleAnalyticsId: this.google_analytics_tag_id,
+            analyticsId: this.analytics_id,
+            analyticsScriptUrl: this.analytics_script_url,
+            analyticsType: this.analytics_type,
             showCertificateExpiry: !!this.show_certificate_expiry,
         };
     }

server/socket-handlers/status-page-socket-handler.js

@@ -166,7 +166,9 @@ module.exports.statusPageSocketHandler = (socket) => {
             statusPage.show_powered_by = config.showPoweredBy;
             statusPage.show_certificate_expiry = config.showCertificateExpiry;
             statusPage.modified_date = R.isoDateTime();
-            statusPage.google_analytics_tag_id = config.googleAnalyticsId;
+            statusPage.analytics_id = config.analyticsId;
+            statusPage.analytics_script_url = config.analyticsScriptUrl;
+            statusPage.analytics_type = config.analyticsType;
 
             await R.store(statusPage);
 

src/lang/en.json

@@ -787,6 +787,9 @@
     "wayToGetClickSendSMSToken": "You can get API Username and API Key from {0} .",
     "Custom Monitor Type": "Custom Monitor Type",
     "Google Analytics ID": "Google Analytics ID",
+    "Analytics Type": "Analytics Type",
+    "Analytics ID": "Analytics ID",
+    "Analytics Script URL": "Analytics Script URL",
     "Edit Tag": "Edit Tag",
     "Server Address": "Server Address",
     "Learn More": "Learn More",
@@ -1067,5 +1070,9 @@
     "YZJ Robot Token": "YZJ Robot token",
     "Plain Text": "Plain Text",
     "Message Template": "Message Template",
-    "Template Format": "Template Format"
+    "Template Format": "Template Format",
+    "Google": "Google",
+    "Plausible": "Plausible",
+    "Matomo": "Matomo",
+    "Umami": "Umami"
 }

src/pages/StatusPage.vue

@@ -1,3 +1,29 @@
+<script setup>
+// Analytics options
+const analyticsOptions = [
+    {
+        name: "None",
+        value: null
+    },
+    {
+        name: "Google",
+        value: "google"
+    },
+    {
+        name: "Umami",
+        value: "umami"
+    },
+    {
+        name: "Plausible",
+        value: "plausible"
+    },
+    {
+        name: "Matomo",
+        value: "matomo"
+    }
+];
+</script>
+
 <template>
     <div v-if="loadedTheme" class="container mt-3">
         <!-- Sidebar for edit mode -->
@@ -92,10 +118,25 @@
                     </ul>
                 </div>
 
-                <!-- Google Analytics -->
+                <!-- Analytics -->
+
                 <div class="my-3">
-                    <label for="googleAnalyticsTag" class="form-label">{{ $t("Google Analytics ID") }}</label>
-                    <input id="googleAnalyticsTag" v-model="config.googleAnalyticsId" type="text" class="form-control" data-testid="google-analytics-input">
+                    <label for="analyticsType" class="form-label">{{ $t("Analytics Type") }}</label>
+                    <select id="analyticsType" v-model="config.analyticsType" class="form-select" data-testid="analytics-type-select">
+                        <option v-for="(analyticOption, index) in analyticsOptions" :key="index" :value="analyticOption.value">
+                            {{ $t(analyticOption.name) }}
+                        </option>
+                    </select>
+                </div>
+
+                <div v-if="!!config.analyticsType" class="my-3">
+                    <label for="analyticsId" class="form-label">{{ $t("Analytics ID") }}</label>
+                    <input id="analyticsId" v-model="config.analyticsId" type="text" class="form-control" data-testid="analytics-id-input">
+                </div>
+
+                <div v-if="!!config.analyticsType && config.analyticsType !== 'google'" class="my-3">
+                    <label for="analyticsScriptUrl" class="form-label">{{ $t("Analytics Script URL") }}</label>
+                    <input id="analyticsScriptUrl" v-model="config.analyticsScriptUrl" type="url" class="form-control" data-testid="analytics-script-url-input">
                 </div>
 
                 <!-- Custom CSS -->