📈 Set utm_medium for internal button

likecoin · Nov 5, 2024 · a86bb3f · a86bb3f
1 parent 33789a0
commit a86bb3f
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 [