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 TEXT;
+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

@@ -225,6 +225,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 +246,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/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>
@@ -294,6 +300,15 @@
         <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>