Feature - Google Analytics - Addressing PR Comments.

server/database.js

@@ -69,7 +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
+        "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,12 @@ class StatusPage extends BeanModel {
 
         const head = $("head");
 
+        await StatusPage.getStatusPageData(statusPage).then( (page) => {
+            if (page.config?.googleAnalyticsId) {
+                head.append($(googleAnalytics.getGoogleAnalyticsScript(page.config.googleAnalyticsId)));
+            }
+        });
+
         // OG Meta Tags
         head.append(`<meta property="og:title" content="${statusPage.title}" />`);
         head.append(`<meta property="og:description" content="${description155}" />`);
@@ -225,7 +232,7 @@ class StatusPage extends BeanModel {
             customCSS: this.custom_css,
             footerText: this.footer_text,
             showPoweredBy: !!this.show_powered_by,
-            googleAnalyticsId: this.google_analytics_tag_id
+            googleAnalyticsId: this.google_analytics_tag_id,
         };
     }
 
@@ -246,7 +253,7 @@ class StatusPage extends BeanModel {
             customCSS: this.custom_css,
             footerText: this.footer_text,
             showPoweredBy: !!this.show_powered_by,
-            googleAnalyticsId: this.google_analytics_tag_id
+            googleAnalyticsId: this.google_analytics_tag_id,
         };
     }
 

server/modules/google-analytics.js

@@ -0,0 +1,11 @@
+let GoogleAnalytics = (() => {
+    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>";
+    }
+    return {
+        getGoogleAnalyticsScript: getGoogleAnalyticsScript
+    };
+})();
+
+module.exports = GoogleAnalytics;

src/pages/StatusPage.vue

@@ -300,15 +300,6 @@
         <component is="style" v-if="config.customCSS" type="text/css">
             {{ config.customCSS }}
         </component>
-
-        <component :is="'script'" v-if="config.googleAnalyticsId" async :src="'https://www.googletagmanager.com/gtag/js?id=' + config.googleAnalyticsId" />
-
-        <component :is="'script'" v-if="config.googleAnalyticsId">
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '{{ config.googleAnalyticsId }}');
-        </component>
     </div>
 </template>