refactor: move functions to utm.ts file

src/runtime/plugin.ts

@@ -1,94 +1,31 @@
-import { Ref, ref } from "vue";
+import { DataObject } from "nuxt-utm";
+import {
+  readLocalData,
+  getSessionID,
+  urlHasUtmParams,
+  getUtmParams,
+  generateAdditionalInfo,
+  isRepeatedEntry,
+} from "./utm";
+import { ref } from "vue";
 import { defineNuxtPlugin } from "#app";
-import { LocationQuery } from "vue-router";
-import { UTMParams, AdditionalInfo, DataObject } from "nuxt-utm";
+import { HookResult } from "@unhead/schema";
 
 const LOCAL_STORAGE_KEY = "nuxt-utm-data";
 const SESSION_ID_KEY = "nuxt-utm-session-id";
 
-const generateSessionId = () => {
-  return Math.random().toString(36).substring(2, 15);
-};
-
-const readLocalData = () => {
-  const localData = localStorage.getItem(LOCAL_STORAGE_KEY);
-
-  try {
-    if (localData) {
-      return JSON.parse(localData);
-    }
-  } catch (error) {
-    console.error("Error parsing local storage data", error);
-  }
-  return [];
-};
-
-const getSessionID = () => {
-  const sessionID = sessionStorage.getItem(SESSION_ID_KEY) || "";
-  if (sessionID == "") {
-    const newSessionID = generateSessionId();
-    sessionStorage.setItem(SESSION_ID_KEY, newSessionID);
-    return newSessionID;
-  }
-  return sessionID;
-};
-
-const urlHasUtmParams = (query: LocationQuery) => {
-  return (
-    query.utm_source ||
-    query.utm_medium ||
-    query.utm_campaign ||
-    query.utm_term ||
-    query.utm_content
-  );
-};
-
-const getUtmParams = (query: LocationQuery) => {
-  const utmParams: UTMParams = {
-    utm_source: query.utm_source?.toString(),
-    utm_medium: query.utm_medium?.toString(),
-    utm_campaign: query.utm_campaign?.toString(),
-    utm_term: query.utm_term?.toString(),
-    utm_content: query.utm_content?.toString(),
-  };
-  return utmParams;
-};
-
-const generateAdditionalInfo = () => {
-  const additionalInfo: AdditionalInfo = {
-    referrer: document.referrer,
-    userAgent: navigator.userAgent,
-    language: navigator.language,
-    screen: {
-      width: screen.width,
-      height: screen.height,
-    },
-  };
-  return additionalInfo;
-};
-
-const isRepeatedEntry = (data: Ref<DataObject[]>, currentSessionID: string) => {
-  const lastEntry = data.value?.[0];
-  return lastEntry && lastEntry.sessionId === currentSessionID;
-};
-
 export default defineNuxtPlugin((nuxtApp) => {
   const data = ref<DataObject[]>([]);
 
-  nuxtApp.hook("app:mounted", () => {
-    data.value = readLocalData();
+  nuxtApp.hook("app:mounted", (): HookResult => {
+    data.value = readLocalData(LOCAL_STORAGE_KEY);
 
-    const sessionId = getSessionID();
+    const sessionId = getSessionID(SESSION_ID_KEY);
 
     const query = nuxtApp._route.query;
 
-    if (!urlHasUtmParams(query)) {
-      return {
-        provide: {
-          utmData: data,
-        },
-      }; // Exit if no UTM parameters found
-    }
+    // Exit if no UTM parameters found
+    if (!urlHasUtmParams(query)) return;
 
     const utmParams = getUtmParams(query);
 
@@ -103,14 +40,8 @@ export default defineNuxtPlugin((nuxtApp) => {
       sessionId,
     };
 
-    if (isRepeatedEntry(data, sessionId)) {
-      // Exit if the last entry is the same as the new entry
-      return {
-        provide: {
-          utmData: data,
-        },
-      };
-    }
+    // Exit if the last entry is the same as the new entry
+    if (isRepeatedEntry(data, sessionId)) return;
 
     data.value.unshift(dataObject);
     localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(data.value));

src/runtime/utm.ts

@@ -0,0 +1,72 @@
+import { Ref } from "vue";
+import { LocationQuery } from "vue-router";
+import { UTMParams, AdditionalInfo, DataObject } from "nuxt-utm";
+
+const generateSessionId = () => {
+  return Math.random().toString(36).substring(2, 15);
+};
+
+export const readLocalData = (localStorageKey: string) => {
+  const localData = localStorage.getItem(localStorageKey);
+
+  try {
+    if (localData) {
+      return JSON.parse(localData);
+    }
+  } catch (error) {
+    console.error("Error parsing local storage data", error);
+  }
+  return [];
+};
+
+export const getSessionID = (sessionIdKey: string) => {
+  const sessionID = sessionStorage.getItem(sessionIdKey) || "";
+  if (sessionID == "") {
+    const newSessionID = generateSessionId();
+    sessionStorage.setItem(sessionIdKey, newSessionID);
+    return newSessionID;
+  }
+  return sessionID;
+};
+
+export const urlHasUtmParams = (query: LocationQuery) => {
+  return (
+    query.utm_source ||
+    query.utm_medium ||
+    query.utm_campaign ||
+    query.utm_term ||
+    query.utm_content
+  );
+};
+
+export const getUtmParams = (query: LocationQuery) => {
+  const utmParams: UTMParams = {
+    utm_source: query.utm_source?.toString(),
+    utm_medium: query.utm_medium?.toString(),
+    utm_campaign: query.utm_campaign?.toString(),
+    utm_term: query.utm_term?.toString(),
+    utm_content: query.utm_content?.toString(),
+  };
+  return utmParams;
+};
+
+export const generateAdditionalInfo = () => {
+  const additionalInfo: AdditionalInfo = {
+    referrer: document.referrer,
+    userAgent: navigator.userAgent,
+    language: navigator.language,
+    screen: {
+      width: screen.width,
+      height: screen.height,
+    },
+  };
+  return additionalInfo;
+};
+
+export const isRepeatedEntry = (
+  data: Ref<DataObject[]>,
+  currentSessionID: string
+) => {
+  const lastEntry = data.value?.[0];
+  return lastEntry && lastEntry.sessionId === currentSessionID;
+};