Fix: GA4 に正しくイベントが送信されていなかった問題を修正

Aivis-Project · Dec 30, 2024 · 5a42bcd · 5a42bcd
1 parent ab16054
commit 5a42bcd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 17 deletions.
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -187,5 +187,8 @@ onMounted(async () => {
   } else {
     isProjectFileLoaded.value = false;
   }
+
+  // Google アナリティクスに page_view イベントを送信する
+  analytics.trackEvent("page_view");
 });
 </script>
diff --git a/src/composables/useAnalytics.ts b/src/composables/useAnalytics.ts
@@ -3,10 +3,7 @@ import ga4mp, { GA4Instance } from "@analytics-debugger/ga4mp";
 
 const GA4_MEASUREMENT_ID = "G-TEMWCS6D7B";
 const enabled = ref(false);
-const ga4track: GA4Instance = ga4mp([GA4_MEASUREMENT_ID], {
-  debug: import.meta.env.DEV,
-  non_personalized_ads: true,
-});
+let ga4instance: GA4Instance | null = null;
 
 /**
  * Google Analytics 4 を Electron で使うための composable
@@ -27,7 +24,13 @@ export function useAnalytics() {
     eventParameters?: Record<string, any>,
   ) => {
     if (!enabled.value) return;
-    ga4track.trackEvent(eventName, eventParameters);
+    if (ga4instance == null) {
+      ga4instance = ga4mp([GA4_MEASUREMENT_ID], {
+        debug: true,
+        non_personalized_ads: true,
+      });
+    }
+    ga4instance.trackEvent(eventName, eventParameters);
   };
 
   return {

diff --git a/src/plugins/ipcMessageReceiverPlugin.ts b/src/plugins/ipcMessageReceiverPlugin.ts
@@ -41,8 +41,7 @@ export const ipcMessageReceiver: Plugin = {
       DETECT_RESIZED: debounce(
         (_, { width, height }: { width: number; height: number }) => {
           // window.dataLayer?.push({ event: "windowResize", width, height });
-          const analytics = useAnalytics();
-          analytics.trackEvent("windowResize", { width, height });
+          useAnalytics().trackEvent("electron_window_resize", { width, height });
         },
         300,
       ),

diff --git a/src/store/setting.ts b/src/store/setting.ts
@@ -257,17 +257,18 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
     mutation(state, { acceptRetrieveTelemetry }) {
       state.acceptRetrieveTelemetry = acceptRetrieveTelemetry;
     },
-    action({ mutations }, { acceptRetrieveTelemetry }) {
+    action({ state, mutations }, { acceptRetrieveTelemetry }) {
       /*
       window.dataLayer?.push({
         event: "updateAcceptRetrieveTelemetry",
         acceptRetrieveTelemetry: acceptRetrieveTelemetry == "Accepted",
       });
       */
-      const analytics = useAnalytics();
-      analytics.trackEvent("updateAcceptRetrieveTelemetry", {
-        acceptRetrieveTelemetry: acceptRetrieveTelemetry == "Accepted",
-      });
+      if (acceptRetrieveTelemetry !== state.acceptRetrieveTelemetry) {
+        useAnalytics().trackEvent("update_accept_retrieve_telemetry", {
+          acceptRetrieveTelemetry: acceptRetrieveTelemetry == "Accepted",
+        });
+      }
       void window.backend.setSetting(
         "acceptRetrieveTelemetry",
         acceptRetrieveTelemetry,
@@ -280,17 +281,18 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
     mutation(state, { acceptTerms }) {
       state.acceptTerms = acceptTerms;
     },
-    action({ mutations }, { acceptTerms }) {
+    action({ state, mutations }, { acceptTerms }) {
       /*
       window.dataLayer?.push({
         event: "updateAcceptTerms",
         acceptTerms: acceptTerms == "Accepted",
       });
       */
-      const analytics = useAnalytics();
-      analytics.trackEvent("updateAcceptTerms", {
-        acceptTerms: acceptTerms == "Accepted",
-      });
+      if (acceptTerms !== state.acceptTerms) {
+        useAnalytics().trackEvent("update_accept_terms", {
+          acceptTerms: acceptTerms == "Accepted",
+        });
+      }
       void window.backend.setSetting("acceptTerms", acceptTerms);
       mutations.SET_ACCEPT_TERMS({ acceptTerms });
     },