diff --git a/db/knex_init_db.js b/db/knex_init_db.js index 46bff4bfa6..de9997dd42 100644 --- a/db/knex_init_db.js +++ b/db/knex_init_db.js @@ -202,7 +202,10 @@ async function createTables() { table.text("footer_text"); table.text("custom_css"); table.boolean("show_powered_by").notNullable().defaultTo(true); - table.string("google_analytics_tag_id"); + table.string("analytics_id"); + table.string("analytics_domain_url"); + table.enu("analytics_type", [ "google", "umami", "plausible" ]).defaultTo(null); + }); // maintenance_status_page diff --git a/db/knex_migrations/2025-02-17-2142-generalize-analytics.js b/db/knex_migrations/2025-02-17-2142-generalize-analytics.js new file mode 100644 index 0000000000..34a52224fd --- /dev/null +++ b/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_domain_url"); + table.enu("analytics_type", [ "google", "umami", "plausible" ]).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_domain_url"); + table.dropColumn("analytics_type"); + }); +}; diff --git a/server/analytics/analytics.js b/server/analytics/analytics.js new file mode 100644 index 0000000000..a5e2c1120e --- /dev/null +++ b/server/analytics/analytics.js @@ -0,0 +1,44 @@ +const googleAnalytics = require("./google-analytics"); +const umamiAnalytics = require("./umami-analytics"); +const plausibleAnalytics = require("./plausible-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.analyticsDomainUrl, statusPage.analyticsId); + case "plausible": + return plausibleAnalytics.getPlausibleAnalyticsScript(statusPage.analyticsDomainUrl, 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": + return statusPage.analyticsId != null && statusPage.analyticsDomainUrl != null; + default: + return false; + } +} + +module.exports = { + getAnalyticsScript, + isValidAnalyticsConfig +}; diff --git a/server/google-analytics.js b/server/analytics/google-analytics.js similarity index 100% rename from server/google-analytics.js rename to server/analytics/google-analytics.js diff --git a/server/analytics/plausible-analytics.js b/server/analytics/plausible-analytics.js new file mode 100644 index 0000000000..14df981151 --- /dev/null +++ b/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} plausibleDomainUrl Domain name with tld to use with the Plausible Analytics script. + * @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(plausibleDomainUrl, domainsToMonitor) { + let escapedDomainUrlJS = jsesc(plausibleDomainUrl, { isScriptContext: true }); + let escapedWebsiteIdJS = jsesc(domainsToMonitor, { isScriptContext: true }); + + if (escapedDomainUrlJS) { + escapedDomainUrlJS = escapedDomainUrlJS.trim(); + } + + if (escapedWebsiteIdJS) { + escapedWebsiteIdJS = escapedWebsiteIdJS.trim(); + } + + // Escape the domain url for use in an HTML attribute. + let escapedDomainUrlHTMLAttribute = escape(escapedDomainUrlJS); + + // Escape the website id for use in an HTML attribute. + let escapedWebsiteIdHTMLAttribute = escape(escapedWebsiteIdJS); + + return ` + + `; +} + +module.exports = { + getPlausibleAnalyticsScript +}; diff --git a/server/analytics/umami-analytics.js b/server/analytics/umami-analytics.js new file mode 100644 index 0000000000..5a4a172f9d --- /dev/null +++ b/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} domainUrl Domain name with tld to use with the Umami Analytics script. + * @param {string} websiteId Website ID to use with the Umami Analytics script. + * @returns {string} HTML script tags to inject into page + */ +function getUmamiAnalyticsScript(domainUrl, websiteId) { + let escapedDomainUrlJS = jsesc(domainUrl, { isScriptContext: true }); + let escapedWebsiteIdJS = jsesc(websiteId, { isScriptContext: true }); + + if (escapedDomainUrlJS) { + escapedDomainUrlJS = escapedDomainUrlJS.trim(); + } + + if (escapedWebsiteIdJS) { + escapedWebsiteIdJS = escapedWebsiteIdJS.trim(); + } + + // Escape the domain url for use in an HTML attribute. + let escapedDomainUrlHTMLAttribute = escape(escapedDomainUrlJS); + + // Escape the website id for use in an HTML attribute. + let escapedWebsiteIdHTMLAttribute = escape(escapedWebsiteIdJS); + + return ` + + `; +} + +module.exports = { + getUmamiAnalyticsScript, +}; diff --git a/server/model/status_page.js b/server/model/status_page.js index 38f548ebba..32188ffaac 100644 --- a/server/model/status_page.js +++ b/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, + analyticsDomainUrl: this.analytics_domain_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, + analyticsDomainUrl: this.analytics_domain_url, + analyticsType: this.analytics_type, showCertificateExpiry: !!this.show_certificate_expiry, }; } diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js index 1114d81fde..60957d49db 100644 --- a/server/socket-handlers/status-page-socket-handler.js +++ b/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_domain_url = config.analyticsDomainUrl; + statusPage.analytics_type = config.analyticsType; await R.store(statusPage); diff --git a/src/lang/en.json b/src/lang/en.json index e215f1031f..f21c7e6f1f 100644 --- a/src/lang/en.json +++ b/src/lang/en.json @@ -782,6 +782,11 @@ "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 Domain URL": "Analytics Domain URL", + "Umami Analytics Domain Url": "Umami Analytics Domain Url", + "Umami Analytics Website ID": "Umami Analytics Website ID", "Edit Tag": "Edit Tag", "Server Address": "Server Address", "Learn More": "Learn More", diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue index 116968282c..983336de30 100644 --- a/src/pages/StatusPage.vue +++ b/src/pages/StatusPage.vue @@ -1,3 +1,25 @@ + +