analytics move in

Author: awb99

README-analytics.md

@@ -0,0 +1,25 @@
+# Google Analytics
+
+Some web app metrics are useful to be tracked.
+
+## google analytics
+
+- dashboard: https://analytics.google.com/analytics/web/
+- how to add credentials: https://support.google.com/analytics/answer/9306384
+
+
+## test 
+- To test if tracking is working, realtime users should appear on: https://analytics.google.com/analytics/web/?utm_source=marketingplatform.google.com&utm_medium=et&utm_campaign=marketingplatform.google.com%2Fabout%2Fanalytics%2F#/realtime/rt-overview/a154548494w218059052p208029910/
+- post requests to google will be in browser console window
+- Ghostery ad blocker will by default suppress google analytics.
+
+## development
+
+- https://developers.google.com/analytics/devguides/collection/gtagjs/custom-dims-mets
+- upgrade to gtag: https://developers.google.com/analytics/devguides/collection/gtagjs/migration
+
+
+## Piwik - free/libre analytics platform
+- JavaScript tracking client
+- https://piwik.org
+- a possible option?

ui-keybindings/resources/ext/ui-analytics.edn

@@ -0,0 +1,8 @@
+{:name "ui-analytics"
+ ; build
+ :lazy false
+ :cljs-namespace [frontend.analytics.google-tag]
+ :cljs-ns-bindings {'frontend.analytics.google-tag {'frontend.analytics.google-tag frontend.analytics.google-tag/send-event
+                                      }}
+
+}

ui-keybindings/src/frontend/analytics/events.cljs

@@ -0,0 +1,30 @@
+(ns frontend.analytics.events
+  (:require
+   [taoensso.timbre :refer-macros [debug info warn error]]
+   [re-frame.core :refer [reg-event-db]]
+   [frontend.analytics.google-tag :refer [send-event]]))
+
+(reg-event-db
+ :ga/init
+ (fn [db [_]]
+   (let [{:keys [enabled id debug?]} (get-in db [:config :google-analytics])]
+     (if enabled
+       (do
+         (info "ga init id: " id " debug?: " debug?)
+         ;(ga-init id debug?)
+         )
+       (debug "google analytics disabled.")))
+   db))
+
+(reg-event-db
+ :ga/event
+ (fn [db [_ {:keys [category action label value]}]]
+   (let [{:keys [enabled]} (get-in db [:config :google-analytics])
+         data {:event_category category
+               :event_label label
+               :value value}]
+     (when enabled
+       (info "ga send event" category)
+       ;(gtag "event" (name category)); label value (clj->js fields-object)
+       (send-event action data)))
+   db))

ui-keybindings/src/frontend/analytics/google_tag.clj

@@ -0,0 +1,40 @@
+(ns frontend.analytics.google-tag
+  (:require
+    [taoensso.timbre :refer [debug info warn error]]))
+
+;The syntax is :async true for tags that don't have a value, but you'll need to ensure that the :mode is set to :html. So:
+; (html {:mode :html} [:script {:async true}])
+; Note that if you use the html5 macro, the mode will automatically be set when rendering.
+
+(defn script-cljs [id]
+  [:script {:async true ; async not rendered. see: https://github.com/weavejester/hiccup/issues/182
+            :type "text/javascript"
+            :src (str "https://www.googletagmanager.com/gtag/js?id=" id)}])
+
+(defn script-js [id]
+  [:div
+   (str "<script async src='https://www.googletagmanager.com/gtag/js?id=" id "' type= 'text/javascript'> </script>")])
+
+(defn script-tag-src
+  [google-analytics-config]
+  (let [{:keys [enabled id]} google-analytics-config]
+    (if (and enabled id)
+      (do (debug "google analytics starting with google id: " id)
+          (script-cljs id)
+          #_(script-js id))
+      (do
+        (debug "no google analytics config!")
+        [:div {:class "no-google-analytics-config-tag"}]))))
+
+(defn script-tag-config [google-analytics-config]
+  (let [{:keys [enabled id]} google-analytics-config]
+    (if (and enabled id)
+      [:script
+       (str "window.dataLayer = window.dataLayer || [];
+         function gtag(){dataLayer.push(arguments);}
+         gtag('js', new Date());
+         gtag('config', '" id "', {cookie_flags: 'SameSite=None;Secure' }  );") ; https://stackoverflow.com/questions/62569419/how-to-set-secure-attribute-of-the-cookies-used-by-google-analytics-global-sit
+       ]
+      [:div {:class "no-google-analytics-config-config"}])))
+
+

ui-keybindings/src/frontend/analytics/google_tag.cljs

@@ -0,0 +1,9 @@
+(ns frontend.analytics.google-tag
+  (:require
+   [taoensso.timbre :refer-macros [debug info warn error]]))
+
+   ; gtag("event", "sign_up", {"method": "email" });
+(defn send-event [action data]
+  (let [datajs (clj->js data)]
+    (info "ga event" action data)
+    (js/gtag "event" action datajs)))

ui-keybindings/src/frontend/tooltip.cljs

@@ -0,0 +1,38 @@
+(ns frontend.tooltip
+  (:require
+   [reagent.core :as r]))
+
+; stolen from:
+; https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/popovers/left
+
+; ref handling from:
+; https://gist.github.com/pesterhazy/4d9df2edc303e5706d547aeabe0e17e1
+
+(defn box-with-title [{:keys [title color]} & children]
+  [:div
+   [:div {:class (str "bg-" color "-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-gray-200 uppercase rounded-t-lg")}
+    title]
+   [:div {:class "text-white p-3"}
+    children]])
+
+(defn with-tooltip [text & children]
+  (let [showing? (r/atom false)
+        el-parent (r/atom nil)
+        el-tooltip (r/atom nil)
+        open-tooltip (fn [& args]
+                       (reset! showing? true))
+        close-tooltip (fn [&args]
+                        (reset! showing? false))]
+    (fn [text & children]
+      (into [:div.inline-block {:on-mouse-enter open-tooltip
+                                :on-mouse-leave close-tooltip
+                                :ref #(reset! el-parent %)}
+             (when @showing?
+               [:div {:style {:top "40px"
+                            ;:left "10px"
+                              }
+                      :class  "absolute bg-blue-300 p-2 top-3 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg"
+                      :ref  #(reset! el-tooltip %)}
+                text])]
+            children))))
+