feeds-fun 1.18.1 → 1.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feeds-fun",
-  "version": "1.18.1",
+  "version": "1.18.2",
   "author": "Aliaksei Yaletski (Tiendil) <a.eletsky@gmail.com> (https://tiendil.org/)",
   "description": "Frontend for the Feeds Fun — web-based news reader",
   "keywords": [
@@ -36,12 +36,12 @@
     "@vueuse/core": "^11.2.0",
     "axios": "^1.7.7",
     "dompurify": "^3.1.7",
+    "lodash": "^4.17.21",
     "pinia": "^2.2.6",
     "set-interval-async": "^3.0.3",
     "supertokens-web-js": "^0.5.0",
     "vue": "^3.5.12",
-    "vue-router": "^4.4.5",
-    "lodash": "^4.17.21"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.10.4",

package/src/App.vue

@@ -2,7 +2,31 @@
   <router-view />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import {onMounted} from "vue";
+  import {watchEffect} from "vue";
+  import {useRoute, useRouter} from "vue-router";
+  import {StorageSerializers, useStorage} from "@vueuse/core";
+  import {useGlobalState} from "@/stores/globalState";
+  import * as marketing from "@/logic/marketing";
+  import * as events from "@/logic/events";
+
+  const route = useRoute();
+  const router = useRouter();
+  const utmStorage = useStorage("ffun_utm", null, undefined, {serializer: StorageSerializers.object});
+  const globalState = useGlobalState();
+
+  watchEffect(() => {
+    marketing.processUTM(route, router, utmStorage);
+  });
+
+  watchEffect(async () => {
+    if (utmStorage.value && globalState.isLoggedIn && Object.keys(utmStorage.value).length > 0) {
+      await events.trackUtm(utmStorage.value);
+      utmStorage.value = null;
+    }
+  });
+</script>
 
 <style scoped>
   .container {

package/src/logic/api.ts

@@ -2,6 +2,7 @@ import * as _ from "lodash";
 import axios, {AxiosError} from "axios";
 import * as t from "@/logic/types";
 import type * as e from "@/logic/enums";
+import * as settings from "@/logic/settings";
 
 const ENTRY_POINT = "/api";
 
@@ -331,5 +332,9 @@ export async function getInfo() {
 }
 
 export async function trackEvent(data: {[key: string]: string | number | null}) {
+  if (!settings.trackEvents) {
+    return;
+  }
+
   await post({url: API_TRACK_EVENT, data: {event: data}});
 }

package/src/logic/events.ts

@@ -83,3 +83,20 @@ export async function tagStateChanged({
     source: source
   });
 }
+
+export async function trackUtm({
+  utm_source,
+  utm_medium,
+  utm_campaign
+}: {
+  utm_source: string;
+  utm_medium: string;
+  utm_campaign: string;
+}) {
+  await api.trackEvent({
+    name: "user_utm",
+    utm_source: utm_source,
+    utm_medium: utm_medium,
+    utm_campaign: utm_campaign
+  });
+}

package/src/logic/marketing.ts

@@ -0,0 +1,54 @@
+import {useRoute, useRouter} from "vue-router";
+import type {RouteLocationNormalizedLoaded, Router} from "vue-router";
+import * as settings from "@/logic/settings";
+
+export function processUTM(route: RouteLocationNormalizedLoaded, router: Router, utmStorage: any) {
+  const utmParams = ["utm_source", "utm_medium", "utm_campaign"];
+
+  // extract UTM parameters from the URL
+  const utmData = utmParams.reduce(
+    (acc, param) => {
+      const value = route.query[param];
+
+      if (!value) {
+        return acc;
+      }
+
+      if (Array.isArray(value)) {
+        if (value[0]) {
+          acc[param] = value[0];
+        }
+
+        return acc;
+      }
+
+      if (value) {
+        acc[param] = value;
+        return acc;
+      }
+
+      return acc;
+    },
+    {} as Record<string, string>
+  );
+
+  // remove UTM parameters from the URL if they exist
+  if (Object.keys(utmData).length > 0) {
+    const newQuery = {...route.query};
+
+    utmParams.forEach((param) => {
+      if (newQuery[param]) {
+        delete newQuery[param];
+      }
+    });
+
+    router.replace({query: newQuery});
+  }
+
+  // store UTM in local storage
+  if (Object.keys(utmData).length == 0) {
+    return;
+  }
+
+  utmStorage.value = utmData;
+}

package/src/logic/settings.ts

@@ -22,6 +22,10 @@ export const plausibleEnabled = import.meta.env.VITE_FFUN_PLAUSIBLE_ENABLED == "
 export const plausibleDomain = import.meta.env.VITE_FFUN_PLAUSIBLE_DOMAIN || "localhost";
 export const plausibleScript = import.meta.env.VITE_FFUN_PLAUSIBLE_SCRIPT || "";
 
+export const trackEvents = import.meta.env.VITE_FFUN_TRACK_EVENTS == "true" || false;
+
+export const utmLifetime = import.meta.env.VITE_FFUN_UTM_LIFETIME || 7; // days
+
 console.log("settings.appName", appName);
 console.log("settings.appDomain", appDomain);
 console.log("settings.appPort", appPort);
@@ -40,3 +44,7 @@ console.log("settings.redditSubreddit", redditSubreddit);
 console.log("settings.plausibleEnabled", plausibleEnabled);
 console.log("settings.plausibleDomain", plausibleDomain);
 console.log("settings.plausibleScript", plausibleScript);
+
+console.log("settings.trackEvents", trackEvents);
+
+console.log("settings.utmLifetime", utmLifetime);