Feature - Added Optional Google Analytics tag for Status Page.

db/patch-add-google-analytics-status-page-tag.sql

@@ -0,0 +1,4 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+ALTER TABLE status_page ADD google_analytics_tag_id VARCHAR;
+COMMIT;

server/database.js

@@ -69,6 +69,7 @@ class Database {
         "patch-ping-packet-size.sql": true,
         "patch-maintenance-table2.sql": true,
         "patch-add-gamedig-monitor.sql": true,
+        "patch-add-google-analytics-status-page-tag.sql": true,
     };
 
     /**

server/model/status_page.js

@@ -4,6 +4,7 @@ const cheerio = require("cheerio");
 const { UptimeKumaServer } = require("../uptime-kuma-server");
 const jsesc = require("jsesc");
 const Maintenance = require("./maintenance");
+const googleAnalytics = require("../modules/google-analytics");
 
 class StatusPage extends BeanModel {
 
@@ -53,6 +54,13 @@ class StatusPage extends BeanModel {
 
         const head = $("head");
 
+        if (statusPage.googleAnalyticsTagId) {
+            let escapedGoogleAnalyticsScript = jsesc(googleAnalytics.getGoogleAnalyticsScript(statusPage.googleAnalyticsTagId), {
+                "isScriptContext": true
+            });
+            head.append($(escapedGoogleAnalyticsScript));
+        }
+
         // OG Meta Tags
         head.append(`<meta property="og:title" content="${statusPage.title}" />`);
         head.append(`<meta property="og:description" content="${description155}" />`);
@@ -225,6 +233,7 @@ class StatusPage extends BeanModel {
             customCSS: this.custom_css,
             footerText: this.footer_text,
             showPoweredBy: !!this.show_powered_by,
+            googleAnalyticsId: this.google_analytics_tag_id,
         };
     }
 
@@ -245,6 +254,7 @@ class StatusPage extends BeanModel {
             customCSS: this.custom_css,
             footerText: this.footer_text,
             showPoweredBy: !!this.show_powered_by,
+            googleAnalyticsId: this.google_analytics_tag_id,
         };
     }
 

server/modules/google-analytics.js

@@ -0,0 +1,14 @@
+/**
+ * Returns a string that represents the javascript that is required to insert the Google Analytics scripts
+ * into a webpage.
+ * @param tagId Google UA/G/AW/DC Property ID to use with the Google Analytics script.
+ * @returns {string}
+ */
+function getGoogleAnalyticsScript(tagId) {
+    return "<script async src=\"https://www.googletagmanager.com/gtag/js?id=" + tagId + "\"></script>" +
+        "<script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());gtag('config', '" + tagId + "'); </script>";
+}
+
+module.exports = {
+    getGoogleAnalyticsScript,
+};

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

@@ -7,6 +7,7 @@ const Database = require("../database");
 const apicache = require("../modules/apicache");
 const StatusPage = require("../model/status_page");
 const { UptimeKumaServer } = require("../uptime-kuma-server");
+const googleAnalytics = require("../modules/google-analytics");
 
 /**
  * Socket handlers for status page
@@ -163,6 +164,7 @@ module.exports.statusPageSocketHandler = (socket) => {
             statusPage.custom_css = config.customCSS;
             statusPage.show_powered_by = config.showPoweredBy;
             statusPage.modified_date = R.isoDateTime();
+            statusPage.google_analytics_tag_id = config.googleAnalyticsId;
 
             await R.store(statusPage);
 

src/lang/en.json

@@ -690,5 +690,6 @@
     "onebotSafetyTips": "For safety, must set access token",
     "PushDeer Key": "PushDeer Key",
     "wayToGetClickSendSMSToken": "You can get API Username and API Key from {0} .",
-    "Custom Monitor Type": "Custom Monitor Type"
+    "Custom Monitor Type": "Custom Monitor Type",
+    "Google Analytics ID": "Google Analytics ID"
 }

src/pages/StatusPage.vue

@@ -64,6 +64,12 @@
                     </ul>
                 </div>
 
+                <!-- Google 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">
+                </div>
+
                 <!-- Custom CSS -->
                 <div class="my-3">
                     <div class="mb-1">{{ $t("Custom CSS") }}</div>