fix: some refactor

.env

@@ -1,4 +1,2 @@
 WALLET_CONNECT_PROJECT_ID=373a8744ceaac00934aec708a3fceea6
-ANKR_TOKEN=
-DATAPLANE_URL=
-RUDDER_KEY=
+ANKR_TOKEN=

.github/workflows/feature.yml

@@ -33,6 +33,8 @@ jobs:
           echo "WALLET_CONNECT_PROJECT_ID=${{ secrets.WALLET_CONNECT_PROJECT_ID }}" > .env
           echo "ANKR_TOKEN=${{ secrets.ANKR_TOKEN }}" >> .env
           echo "SCREENING_API_URL=${{ secrets.SCREENING_API_URL }}" >> .env
+          echo "DATAPLANE_URL=${{ secrets.DATAPLANE_URL }}" >> .env
+          echo "RUDDER_KEY=${{ secrets.RUDDER_KEY }}" >> .env
 
       - name: Build
         run: |

.github/workflows/production.yml

@@ -35,6 +35,8 @@ jobs:
           echo "WALLET_CONNECT_PROJECT_ID=${{ secrets.WALLET_CONNECT_PROJECT_ID }}" > .env
           echo "ANKR_TOKEN=${{ secrets.ANKR_TOKEN }}" >> .env
           echo "SCREENING_API_URL=${{ secrets.SCREENING_API_URL }}" >> .env
+          echo "DATAPLANE_URL=${{ secrets.DATAPLANE_URL }}" >> .env
+          echo "RUDDER_KEY=${{ secrets.RUDDER_KEY }}" >> .env
 
       - name: Build
         run: |

.github/workflows/release.yml

@@ -66,6 +66,8 @@ jobs:
           echo "WALLET_CONNECT_PROJECT_ID=${{ secrets.WALLET_CONNECT_PROJECT_ID }}" > .env
           echo "ANKR_TOKEN=${{ secrets.ANKR_TOKEN }}" >> .env
           echo "SCREENING_API_URL=${{ secrets.SCREENING_API_URL }}" >> .env
+          echo "DATAPLANE_URL=${{ secrets.DATAPLANE_URL }}" >> .env
+          echo "RUDDER_KEY=${{ secrets.RUDDER_KEY }}" >> .env
 
       - name: Build
         run: |

app.vue

@@ -5,18 +5,17 @@
 </template>
 
 <script lang="ts" setup>
-import { trackPage } from "~/utils/analytics";
-trackPage();
-</script>
+import { watch } from "vue";
+import { useRoute } from "vue-router";
 
-<style lang="scss"></style>
+import { trackPage } from "@/utils/analytics";
 
-<script lang="ts">
-export default {
-  watch: {
-    $route() {
-      trackPage();
-    },
+const route = useRoute();
+watch(
+  () => route.path,
+  () => {
+    trackPage();
   },
-};
+  { immediate: true }
+);
 </script>

nuxt.config.ts

@@ -45,33 +45,6 @@ export default defineNuxtConfig({
           src: "http://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js",
           defer: true,
         },
-        {
-          hid: "rudder-js",
-          innerHTML: `
-            rudderanalytics = window.rudderanalytics = [];
-            var  methods = [
-                'load',
-                'page',
-                'track',
-                'identify',
-                'alias',
-                'group',
-                'ready',
-                'reset',
-                'getAnonymousId',
-                'setAnonymousId'
-            ];
-            for (var i = 0; i < methods.length; i++) {
-                  var method = methods[i];
-                  rudderanalytics[method] = function (methodName) {
-                        return function () {
-                                           rudderanalytics.push([methodName].concat(Array.prototype.slice.call(arguments)));
-                        };
-                      }(method);
-            }
-            `,
-          type: "text/javascript",
-        },
       ],
     },
   },

types/index.d.ts

@@ -103,5 +103,12 @@ declare global {
       ) => string | undefined;
       reset: (widgetId: string) => void;
     };
+    rudderanalytics?: {
+      load: (key: string, url: string) => void;
+      ready: (callback: () => void) => void;
+      page: () => void;
+      track: (eventName: string, params?: unknown) => void;
+      initialized: boolean;
+    };
   }
 }

utils/analytics.ts

@@ -1,40 +1,46 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let rudderanalytics: any = null;
+let analyticsLoaded = false;
 
-export async function initAnalytics(): Promise<boolean> {
-  const runtimeConfig = useRuntimeConfig();
-
-  if (runtimeConfig.public.rudderKey && runtimeConfig.public.dataplaneUrl) {
-    if (rudderanalytics) {
-      return true;
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    while (!(window as any).rudderanalytics) {
-      await setTimeout(() => {
-        return;
-      }, 500);
+const isReady = (): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    if (!window.rudderanalytics) {
+      reject(new Error("Rudder not loaded"));
     }
+    window.rudderanalytics?.ready(() => {
+      resolve();
+    });
+  });
+};
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    rudderanalytics = (window as any).rudderanalytics;
+export async function initAnalytics(): Promise<boolean> {
+  const runtimeConfig = useRuntimeConfig();
+  if (!runtimeConfig.public.rudderKey || !runtimeConfig.public.dataplaneUrl) {
+    return false;
+  }
 
-    await rudderanalytics.load(runtimeConfig.public.rudderKey, runtimeConfig.public.dataplaneUrl);
-    await rudderanalytics.ready();
+  if (analyticsLoaded) {
+    await isReady();
     return true;
   }
-  return false;
+  await retry(async () => {
+    if (!window.rudderanalytics) {
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      throw new Error("Rudder not loaded");
+    }
+  });
+  window.rudderanalytics?.load(runtimeConfig.public.rudderKey, runtimeConfig.public.dataplaneUrl);
+  analyticsLoaded = true;
+  await isReady();
+  return true;
 }
 
 export async function trackPage(): Promise<void> {
   if (await initAnalytics()) {
-    await rudderanalytics.page();
+    window.rudderanalytics?.page();
   }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function trackEvent(eventName: string, params?: any): Promise<void> {
+export async function trackEvent(eventName: string, params?: unknown): Promise<void> {
   if (await initAnalytics()) {
-    await rudderanalytics.track(eventName, params);
+    window.rudderanalytics?.track(eventName, params);
   }
 }