Merge pull request #2567 from clcninja/feature-google-analytics

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/google-analytics.js

@@ -0,0 +1,24 @@
+const jsesc = require("jsesc");
+
+/**
+ * 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) {
+    let escapedTagId = jsesc(tagId, { isScriptContext: true });
+
+    if (escapedTagId) {
+        escapedTagId = escapedTagId.trim();
+    }
+
+    return `
+        <script async src="https://www.googletagmanager.com/gtag/js?id=${escapedTagId}"></script>
+        <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());gtag('config', '${escapedTagId}'); </script>
+    `;
+}
+
+module.exports = {
+    getGoogleAnalyticsScript,
+};

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("../google-analytics");
 
 class StatusPage extends BeanModel {
 
@@ -53,6 +54,11 @@ class StatusPage extends BeanModel {
 
         const head = $("head");
 
+        if (statusPage.googleAnalyticsTagId) {
+            let escapedGoogleAnalyticsScript = googleAnalytics.getGoogleAnalyticsScript(statusPage.googleAnalyticsTagId);
+            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 +231,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 +252,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/socket-handlers/status-page-socket-handler.js

@@ -163,6 +163,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

@@ -691,5 +691,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

@@ -67,6 +67,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>