📈 Store utm info to session storage (#1782)

* 📈 Store utm info to session storage * 🎨 Simplify internal referrer list in utm
likecoin · Sep 10, 2024 · 5f5c130 · 5f5c130
1 parent 157244a
commit 5f5c130
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 20 deletions.
diff --git a/src/components/NFTBook/CrossSellDialog.vue b/src/components/NFTBook/CrossSellDialog.vue
@@ -149,7 +149,7 @@ export default {
           utmCampaign: this.utmCampaign,
           utmSource: `${this.utmSource}_cross-sell`,
           utmMedium: this.utmMedium,
-          referrer: document.referrer,
+          referrer: this.documentReferrer,
           email: this.walletEmail,
         });
         if (url) {

diff --git a/src/mixins/nft.js b/src/mixins/nft.js
@@ -1261,7 +1261,7 @@ export default {
           utmCampaign: this.utmCampaign,
           utmSource: this.utmSource,
           utmMedium: this.utmMedium,
-          referrer: document.referrer,
+          referrer: this.documentReferrer,
           email: this.walletEmail,
         });
         if (url) {
@@ -1281,7 +1281,7 @@ export default {
             utmCampaign: this.utmCampaign,
             utmSource: this.utmSource,
             utmMedium: this.utmMedium,
-            referrer: document.referrer,
+            referrer: this.documentReferrer,
           };
           if (this.walletEmail) {
             body.email = this.walletEmail;

diff --git a/src/mixins/utm.js b/src/mixins/utm.js
@@ -1,14 +1,24 @@
+import { setSessionStorageItem, getFromSessionStorage } from '@/util/misc';
+
+const INTERNAL_REFERRERS = [
+  'https://liker.land',
+  'https://authcore.like.co',
+  'https://checkout.stripe.com',
+];
+
 export default {
-  computed: {
-    utmCampaign() {
-      return this.$route.query.utm_campaign;
-    },
-    utmSource() {
-      return this.$route.query.utm_source;
-    },
-    utmMedium() {
-      return this.$route.query.utm_medium;
-    },
+  data() {
+    return {
+      utmCampaign: this.$route.query.utm_campaign,
+      utmSource: this.$route.query.utm_source,
+      utmMedium: this.$route.query.utm_medium,
+      documentReferrer: '',
+    };
+  },
+  mounted() {
+    this.documentReferrer = document.referrer;
+    this.restoreUTMFromSessionStorage();
+    this.storeUTMToSessionStorage();
   },
   methods: {
     getUtmProps({
@@ -22,5 +32,34 @@ export default {
         utmMedium: this.utmMedium || defaultUtmMedium,
       };
     },
+    restoreUTMFromSessionStorage() {
+      const utm = JSON.parse(getFromSessionStorage('UTM_INFO'));
+      if (utm) {
+        if (!this.utmCampaign) this.utmCampaign = utm.utmCampaign;
+        if (!this.utmSource) this.utmSource = utm.utmSource;
+        if (!this.utmMedium) this.utmMedium = utm.utmMedium;
+        if (
+          !this.documentReferrer ||
+          (utm.documentReferrer &&
+            INTERNAL_REFERRERS.find(referrer =>
+              this.documentReferrer.includes(referrer)
+            ) &&
+            INTERNAL_REFERRERS.find(referrer =>
+              utm.documentReferrer.includes(referrer)
+            ))
+        ) {
+          this.documentReferrer = utm.documentReferrer;
+        }
+      }
+    },
+    storeUTMToSessionStorage() {
+      const utm = {
+        utmCampaign: this.utmCampaign,
+        utmSource: this.utmSource,
+        utmMedium: this.utmMedium,
+        documentReferrer: this.documentReferrer,
+      };
+      setSessionStorageItem('UTM_INFO', JSON.stringify(utm));
+    },
   },
 };
diff --git a/src/mixins/wallet-login.js b/src/mixins/wallet-login.js
@@ -2,6 +2,7 @@ import { mapActions } from 'vuex';
 
 import alertMixin from '~/mixins/alert';
 import { logTrackerEvent } from '~/util/EventLogger';
+import { setSessionStorageItem } from '~/util/misc';
 
 export default {
   mixins: [alertMixin],
@@ -29,10 +30,7 @@ export default {
           'connect_wallet_start',
           1
         );
-        window.sessionStorage.setItem(
-          'USER_POST_AUTH_ROUTE',
-          this.$route.fullPath
-        );
+        setSessionStorageItem('USER_POST_AUTH_ROUTE', this.$route.fullPath);
         const connection = isOpenAuthcore
           ? await this.openAuthcoreModal({ isSignUp })
           : await this.openConnectWalletModal({

diff --git a/src/pages/nft/class/_classId/index.vue b/src/pages/nft/class/_classId/index.vue
@@ -1224,7 +1224,7 @@ export default {
               utmCampaign: this.utmCampaign,
               utmSource: this.utmSource,
               utmMedium: this.utmMedium,
-              referrer: document.referrer,
+              referrer: this.documentReferrer,
               email: this.walletEmail,
             });
             if (url) {

diff --git a/src/pages/nft/collection/_collectionId/index.vue b/src/pages/nft/collection/_collectionId/index.vue
@@ -342,7 +342,7 @@ export default {
               utmCampaign: this.utmCampaign,
               utmSource: this.utmSource,
               utmMedium: this.utmMedium,
-              referrer: document.referrer,
+              referrer: this.documentReferrer,
               email: this.walletEmail,
             });
             if (url) {

diff --git a/src/pages/shopping-cart/book.vue b/src/pages/shopping-cart/book.vue
@@ -274,7 +274,7 @@ export default {
           utmCampaign: this.utmCampaign,
           utmSource: this.utmSource,
           utmMedium: this.utmMedium,
-          referrer: document.referrer,
+          referrer: this.documentReferrer,
           items: this.shoppingCartBookItems,
           email: this.walletEmail,
         });

diff --git a/src/util/misc.js b/src/util/misc.js
@@ -69,4 +69,18 @@ export function getContentUrlType(url) {
   return undefined;
 }
 
+export function getFromSessionStorage(key) {
+  if (window.sessionStorage) {
+    return window.sessionStorage.getItem(key);
+  }
+  return null;
+}
+
+export function setSessionStorageItem(key, item) {
+  if (window.sessionStorage) {
+    return window.sessionStorage.setItem(key, item);
+  }
+  return undefined;
+}
+
 export default sleep;