From 04037ed760a00faaa81e72bb2b4a375cd6c0713f Mon Sep 17 00:00:00 2001
From: William Chong <me@williamchong.cloud>
Date: Tue, 5 Nov 2024 19:50:09 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88=20Set=20ll=5Fmedium=20for=20intern?=
 =?UTF-8?q?al=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.vue             |  9 ++++++++-
 src/components/NFTBook/ItemCardV2.vue |  4 ++++
 src/components/SiteHeader.vue         |  7 ++++++-
 src/mixins/nft-or-collection.js       |  6 ++++++
 src/mixins/utm.js                     |  7 ++++++-
 src/pages/index.vue                   |  9 ++++++++-
 src/pages/store/index.vue             | 16 ++++++++++++++++
 7 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index a5d84395e..9ae286415 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -65,7 +65,14 @@
             <div class="grid grid-flow-row gap-y-[16px]">
               <NuxtLink
                 class="hover:underline"
-                :to="localeLocation({ name: 'store' })"
+                :to="
+                  localeLocation({
+                    name: 'store',
+                    query: {
+                      ll_medium: 'footer',
+                    },
+                  })
+                "
                 @click.native="handleClickButton('store_books')"
               >
                 {{ $t('footer_nav_store_books') }}
diff --git a/src/components/NFTBook/ItemCardV2.vue b/src/components/NFTBook/ItemCardV2.vue
index 83141ab61..20b5955e9 100644
--- a/src/components/NFTBook/ItemCardV2.vue
+++ b/src/components/NFTBook/ItemCardV2.vue
@@ -67,6 +67,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    internalMedium: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
index 5da43908c..21b848a9d 100644
--- a/src/components/SiteHeader.vue
+++ b/src/components/SiteHeader.vue
@@ -23,7 +23,12 @@
       </NuxtLink>
 
       <ButtonV2
-        :to="localeLocation({ name: 'store' })"
+        :to="
+          localeLocation({
+            name: 'store',
+            ll_medium: 'header_store_button',
+          })
+        "
         preset="tertiary"
         size="mini"
         :text="$t('header_button_try_collect')"
diff --git a/src/mixins/nft-or-collection.js b/src/mixins/nft-or-collection.js
index 787f49222..021ea3434 100644
--- a/src/mixins/nft-or-collection.js
+++ b/src/mixins/nft-or-collection.js
@@ -72,12 +72,18 @@ export default {
             params: {
               collectionId: this.collectionId,
             },
+            query: {
+              ll_medium: this.internalMedium,
+            },
           })
         : this.localeLocation({
             name: 'nft-class-classId',
             params: {
               classId: this.classId,
             },
+            query: {
+              ll_medium: this.internalMedium,
+            },
           });
     },
   },
diff --git a/src/mixins/utm.js b/src/mixins/utm.js
index d0b289290..fc04b0b3e 100644
--- a/src/mixins/utm.js
+++ b/src/mixins/utm.js
@@ -11,12 +11,15 @@ export default {
     return {
       utmCampaign: this.$route.query.utm_campaign,
       utmSource: this.$route.query.utm_source,
-      utmMedium: this.$route.query.utm_medium,
+      utmMedium: this.$route.query.utm_medium || this.internalMedium,
       documentReferrer: '',
       fbClickId: this.formattedFbcQs,
     };
   },
   computed: {
+    internalMedium() {
+      return this.$route.query.ll_medium;
+    },
     gadClickId() {
       return this.$route.query.gclid;
     },
@@ -33,6 +36,8 @@ export default {
     this.restoreUTMFromSessionStorage();
     this.storeUTMToSessionStorage();
     this.getFbClickIdFromCookie();
+    // TODO: split internalMedium into a new separate field
+    this.utmMedium = this.utmMedium || this.internalMedium;
   },
   methods: {
     setUTMProps({ utmCampaign, utmSource, utmMedium }) {
diff --git a/src/pages/index.vue b/src/pages/index.vue
index ac239a8fd..c7916b310 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -400,6 +400,7 @@
               :cover-resize="300"
               :is-link-disabled="stickyBookstoreItem.isMultiple"
               :is-lazy-loaded="false"
+              :internal-medium="'index_sticky_item'"
               @click-cover="handleClickItem($event, stickyBookstoreItem)"
             />
           </div>
@@ -421,6 +422,7 @@
                 class-cover-frame-aspect-ratio="min-h-[360px] laptop:min-h-[0] aspect-[4/5]"
                 :cover-resize="300"
                 :is-link-disabled="item.isMultiple"
+                :utm-medium="$route.query.utm_medium || 'index_bookstore_item'"
                 @click-cover="handleClickItem($event, item)"
               />
             </li>
@@ -452,6 +454,9 @@
           <NFTBookItemCardV2
             :item-id="item.classId"
             class-cover-frame-aspect-ratio="aspect-[4/5]"
+            :utm-medium="
+              $route.query.utm_medium || 'index_bookstore_item_swiper'
+            "
             @click-cover="handleClickItem($event, item)"
           />
         </SwiperSlide>
@@ -571,7 +576,9 @@
                     name: 'store',
                     query: {
                       tag: 'autograph',
-                      utm_source: 'landing_page_signature_banner_cta',
+                      utm_medium:
+                        $route.query.utm_medium ||
+                        'landing_page_signature_banner_cta',
                     },
                   })
                 "
diff --git a/src/pages/store/index.vue b/src/pages/store/index.vue
index 44ef16a72..761f203da 100644
--- a/src/pages/store/index.vue
+++ b/src/pages/store/index.vue
@@ -309,6 +309,7 @@
                 :item-id="item.classId"
                 class-cover-frame-aspect-ratio="aspect-[4/5]"
                 :is-link-disabled="item.isMultiple"
+                :utm-medium="utmMedium"
                 @click-cover="handleClickItem($event, item)"
               />
             </li>
@@ -706,6 +707,21 @@ export default {
       }
       return baseUrl;
     },
+    internalMedium() {
+      const {
+        query: { ll_medium: qsMedium, tag, q },
+      } = this.$route;
+      if (qsMedium) {
+        return qsMedium;
+      }
+      if (tag) {
+        return `tag-${tag}`;
+      }
+      if (q) {
+        return 'search';
+      }
+      return '';
+    },
     // Price filter related
     priceFilterList() {
       return [