verify/ui: add google tag manager (#247)

* verify/ui: add google tag manager * use template for html * use with
pomerium · Nov 8, 2023 · e9d5c60 · e9d5c60
1 parent cf472a9
commit e9d5c60
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/http.go b/http.go
@@ -1,10 +1,12 @@
 package verify
 
 import (
+	"bytes"
 	"crypto/sha256"
 	"embed"
 	"encoding/hex"
 	"encoding/json"
+	"html/template"
 	"io"
 	"io/fs"
 	stdlog "log"
@@ -107,6 +109,11 @@ func (srv *Server) serveHeaders(w http.ResponseWriter, r *http.Request) {
 }
 
 func (srv *Server) serveStatic(w http.ResponseWriter, r *http.Request, name, etag string) {
+	if strings.HasSuffix(name, ".html") {
+		srv.serveTemplate(w, r, name, etag)
+		return
+	}
+
 	f, err := uiFS.Open(name)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -124,6 +131,36 @@ func (srv *Server) serveStatic(w http.ResponseWriter, r *http.Request, name, eta
 	http.ServeContent(w, r, path.Base(name), time.Time{}, rs)
 }
 
+func (srv *Server) serveTemplate(w http.ResponseWriter, r *http.Request, name, etag string) {
+	bs, err := uiFS.ReadFile(name)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	tpl, err := template.New("").Parse(string(bs))
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	data := map[string]any{}
+	if v, ok := os.LookupEnv("GOOGLE_TAG_MANAGER_ID"); ok {
+		data["GoogleTagManagerID"] = v
+	}
+
+	var buf bytes.Buffer
+	err = tpl.Execute(&buf, data)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	w.Header().Set("Cache-Control", "no-cache")
+	w.Header().Set("Etag", `"`+etag+`"`)
+	http.ServeContent(w, r, path.Base(name), time.Time{}, bytes.NewReader(buf.Bytes()))
+}
+
 func (srv *Server) serveAPIVerifyInfo(w http.ResponseWriter, r *http.Request) {
 	type M = map[string]interface{}
 

diff --git a/ui/dist/index.html b/ui/dist/index.html
@@ -8,8 +8,38 @@
     />
     <link rel="stylesheet" type="text/css" href="/index.css" />
     <link rel="icon" type="image/png" href="/img/logo-only.svg" />
+
+    {{ with .GoogleTagManagerID }}
+    <!-- Google Tag Manager -->
+    <script>
+      (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', '{{ . }}');
+    </script>
+    <!-- End Google Tag Manager -->
+    {{ end }}
   </head>
   <body>
+    {{ with .GoogleTagManagerID }}
+    <!-- Google Tag Manager (noscript) -->
+    <noscript
+      ><iframe
+        src="https://www.googletagmanager.com/ns.html?id={{ . }}"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+    {{ end }}
+
     <main id="main"></main>
     <script src="/index.js"></script>
   </body>