update gtag (#41)

wirekang · Feb 14, 2024 · 92f90f3 · 92f90f3
1 parent 1ec3c76
commit 92f90f3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -11,14 +11,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Kysely Playground</title>
     <script src="https://www.googletagmanager.com/gtag/js?l=dataLayer&amp;id=G-G1QNWZ9NSP" async></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-      gtag("config", "G-G1QNWZ9NSP");
-    </script>
   </head>
   <body data-theme="dark">
     <div id="header">

diff --git a/src/bootstrap.ts b/src/bootstrap.ts
@@ -24,6 +24,7 @@ import { DEBUG, SETTING_KEYS } from "./lib/constants";
 import { SettingsUtils } from "./lib/utility/settings-utils";
 import { PanelContainerController } from "./controllers/panel-container-controller";
 import { DomUtils } from "./lib/utility/dom-utils";
+import { GtagUtils } from "./lib/utility/gtag-utils";
 
 const lazy = null as unknown;
 const D = {
@@ -119,6 +120,7 @@ function setup() {
   setupMobileModeController();
   setLoading(false);
   setupOpenInNewTabController();
+  setupGtag();
 }
 
 function setLoading(v: boolean) {
@@ -249,6 +251,7 @@ function setupResultController() {
     if (e.message && e.message.trim().startsWith("ResizeObserver")) {
       return;
     }
+    GtagUtils.event("exception", { description: e, fatal: true });
     D.resultController.appendMessage(
       "error",
       `ERROR: There is an unexpected error. Checkout the developer console.`,
@@ -259,6 +262,7 @@ function setupResultController() {
   D.resultController.clear();
   D.resultController.appendMessage("info", "Loading...");
   D.resultController.onClickCode = (v) => {
+    GtagUtils.event("click_result_code");
     copyText(v, "Code copied");
   };
 }
@@ -274,6 +278,7 @@ function setupVersionController() {
   D.versionController.setValue(D.kyselyModule.id);
   D.versionController.onChange((id) => {
     const newModule = D.kyselyManager.getModule(id)!;
+    GtagUtils.event("change_version", { type: newModule.type, name: newModule.name });
     patchState({
       kysely: {
         type: newModule.type,
@@ -287,6 +292,7 @@ function setupDialectController() {
   D.dialectController.setOptions([...D.kyselyModule.dialects]);
   D.dialectController.setValue(D.state.dialect);
   D.dialectController.onChange((dialect: any) => {
+    GtagUtils.event("change_dialect", { dialect });
     patchState({ dialect });
   });
 }
@@ -301,6 +307,7 @@ function setupSwitchThemeController() {
 
 function toggleTypeEditor() {
   const hidden = D.panel0.isHidden();
+  GtagUtils.event("toggle_type_editor", { on: !hidden });
   D.panel0.setHidden(!hidden);
   if (hidden) {
     D.panelContainerController.resetSizes();
@@ -410,6 +417,7 @@ function setupHotKeys() {
 }
 
 async function save(shorten: boolean) {
+  GtagUtils.event("save", { shorten });
   await useLoading(async () => {
     if (SettingsUtils.get("save:format-before-save")) {
       await formatEditors();
@@ -423,6 +431,7 @@ async function save(shorten: boolean) {
 }
 
 async function formatEditors() {
+  GtagUtils.event("format");
   await useLoading(async () => {
     try {
       const printWidth = SettingsUtils.get("ts-format:wider-width") ? 100 : 70;
@@ -493,3 +502,7 @@ async function copyText(v: string, msg: string) {
     ToastUtils.show("error", e.message ?? e.toString());
   }
 }
+
+function setupGtag() {
+  GtagUtils.init({ dialect: D.state.dialect, version: D.state.kysely?.name });
+}
diff --git a/src/lib/utility/gtag-utils.ts b/src/lib/utility/gtag-utils.ts
@@ -0,0 +1,16 @@
+export class GtagUtils {
+  static init(params: any) {
+    const w = window as any;
+    w.dataLayer = w.dataLayer || [];
+    w.gtag = function () {
+      w.dataLayer.push(arguments);
+    };
+    w.gtag("js", new Date());
+    w.gtag("config", "G-G1QNWZ9NSP", { ...params });
+  }
+
+  static event(name: string, params: any = {}) {
+    // @ts-ignore
+    window.gtag("event", name, params);
+  }
+}