Feature/fix issue with promotion (#83)

* fix issues with other line items * disable analytics * fix analytics issues * add another event to search * fix cart refresh tracking
basecom · Nov 4, 2024 · 7b5e52b · 7b5e52b
1 parent 9c353ea
commit 7b5e52b
Show file tree

Hide file tree

Showing 16 changed files with 82 additions and 33 deletions.
diff --git a/components/Account/AccountOverviewContent.vue b/components/Account/AccountOverviewContent.vue
@@ -7,6 +7,7 @@ const shippingAddress = computed(() => customer.value.defaultShippingAddress);
 const paymentMethod = computed(() => customer.value.defaultPaymentMethod);
 const { latestOrder, loadLatestOrder } = useCustomerLatestOrder();
 const { pushSuccess, pushError } = useNotifications();
+const { trackNewsletterRegistration } = useAnalytics();
 const { t } = useI18n();
 
 const props = defineProps<{
@@ -25,6 +26,7 @@ const handleNewsletterChange = async (event: Event) => {
                 option: 'subscribe',
             });
 
+            trackNewsletterRegistration();
             pushSuccess(t('cms.element.form.newsletter.successSubscribe'));
         } catch (error) {
             pushError(t('cms.element.form.newsletter.errorSubscribe'));

diff --git a/components/Checkout/CheckoutLineItem.vue b/components/Checkout/CheckoutLineItem.vue
@@ -70,7 +70,7 @@ const removeCartItem = async () => {
     isLoading.value = true;
 
     try {
-        trackRemoveFromCart(product.value);
+        trackRemoveFromCart(product.value, lineItem.value.quantity);
         await removeItem();
 
         pushSuccess(t('checkout.lineItem.remove.successMessage', { lineItemName: lineItem.value.label }));

diff --git a/components/Checkout/Confirm/CheckoutConfirmPayment.vue b/components/Checkout/Confirm/CheckoutConfirmPayment.vue
@@ -25,6 +25,7 @@ onMounted(async () => {
         description: method.translated.description,
         mediaUrl: method.media?.url,
     }));
+    trackAddPaymentInfo();
 });
 </script>
 

diff --git a/components/Checkout/Confirm/CheckoutConfirmShipping.vue b/components/Checkout/Confirm/CheckoutConfirmShipping.vue
@@ -28,6 +28,8 @@ onMounted(async () => {
         description: method.translated.description,
         mediaUrl: method.media?.url,
     }));
+
+    trackAddShippingInfo();
 });
 </script>
 

diff --git a/components/Layout/Header/Search/LayoutHeaderSearchBar.vue b/components/Layout/Header/Search/LayoutHeaderSearchBar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getProductRoute } from '@shopware-pwa/helpers-next';
+import type { Schemas } from '@shopware/api-client/api-types';
 
 const props = withDefaults(
     defineProps<{
@@ -15,7 +16,7 @@ const props = withDefaults(
 const emit = defineEmits(['closeSearch']);
 
 const { searchTerm, search, getProducts, getTotal, loading } = useProductSearchSuggest();
-const { trackSearchSuggestions, trackSearch } = useAnalytics();
+const { trackSearchSuggestions, trackSearch, trackSelectItem } = useAnalytics();
 
 const router = useRouter();
 
@@ -78,6 +79,11 @@ const handleEnter = () => {
     }
 };
 
+const onClickProduct = (product: Schemas['Product']) => {
+    trackSelectItem(product, { id: 'search-suggest', name: 'search-suggest' });
+    emit('closeSearch')
+};
+
 onMounted(() => {
     // Get the input from the ref (need querySelector since the ref returns the FormKit wrapper and not the input itself)
     searchInput.value.$el.querySelector('input').focus();
@@ -122,7 +128,7 @@ onMounted(() => {
                 v-for="product in getProducts?.slice(0, displayTotal)"
                 :key="product.id"
                 :to="getProductRoute(product)"
-                @click="$emit('closeSearch')"
+                @click="onClickProduct(product)"
             >
                 <LayoutHeaderSearchSuggestions :product="product" />
             </NuxtLink>

diff --git a/components/Product/ProductAddToCart.vue b/components/Product/ProductAddToCart.vue
@@ -29,8 +29,9 @@ const handleEnter = async $event => {
 
 const handleAddToCart = async () => {
     try {
+        const quantityNumber = quantity.value ?? 1;
         await addToCart();
-        trackAddToCart(product.value, quantity.value);
+        trackAddToCart(product.value, quantityNumber);
         quantity.value = product.value.minPurchase;
 
         pushSuccess(t('product.addToCart.successMessage', { productName: product.value.translated.name }));

diff --git a/composables/analytics/useAnalytics.ts b/composables/analytics/useAnalytics.ts
@@ -50,6 +50,7 @@ export function useAnalytics(config?: UseAnalyticsConfig): UseAnalyticsReturn {
         trackSearch: analytics.trackSearch,
         trackAddToWishlist: analytics.trackAddToWishlist,
         trackRemoveFromWishlist: analytics.trackRemoveFromWishlist,
+        trackClearWishlist: analytics.trackClearWishlist,
         trackLogin: analytics.trackLogin,
         trackRegister: analytics.trackRegister,
         trackNavigation: analytics.trackNavigation,

diff --git a/composables/analytics/useGtag.ts b/composables/analytics/useGtag.ts
@@ -1,6 +1,7 @@
 import type { Schemas } from '@shopware/api-client/api-types';
 import type { UseAnalyticsReturn } from '../../types/analytics/analytics';
 import type { PromotionInfo } from '../../types/analytics/promotion';
+import type { TrackingLineItemList } from '../tracking/useItemTracking';
 
 export function useGtags(): UseAnalyticsReturn {
     const _cookieEnabledName = 'google-analytics-enabled';
@@ -16,6 +17,7 @@ export function useGtags(): UseAnalyticsReturn {
         getEventForProductList,
         getEventForProduct,
         getEventForProductWithPrice,
+        getEventForProductsWithPrice,
     } = useEcommerceTrackingHelper();
     const { getSearchEvent, getSearchSuggestionEvent } = useSearchTrackingHelper();
     const { getPageTrackingEvent, isPageTrackingReady } = usePageTrackingHelper();
@@ -152,8 +154,8 @@ export function useGtags(): UseAnalyticsReturn {
         _trackEvent('event', 'view_item_list', trackingEvent);
     };
 
-    const trackSelectItem = (product: Schemas['Product']) => {
-        const trackingEvent = getEventForProduct(product);
+    const trackSelectItem = (product: Schemas['Product'], list?: TrackingLineItemList) => {
+        const trackingEvent = getEventForProduct(product, list);
 
         _trackEvent('event', 'select_item', trackingEvent);
     };
@@ -198,6 +200,12 @@ export function useGtags(): UseAnalyticsReturn {
         _trackEvent('event', 'remove_from_wishlist', trackingEvent);
     };
 
+    const trackClearWishlist = (products: Schemas['Product'][]) => {
+        const trackingEvent = getEventForProductsWithPrice(products);
+
+        _trackEvent('event', 'remove_from_wishlist', trackingEvent);
+    };
+
     const trackLogin = () => {
         _trackEvent('event', 'login');
     };
@@ -248,6 +256,7 @@ export function useGtags(): UseAnalyticsReturn {
         trackSearch,
         trackAddToWishlist,
         trackRemoveFromWishlist,
+        trackClearWishlist,
         trackLogin,
         trackRegister,
         trackNavigation,

diff --git a/composables/analytics/useGtm.ts b/composables/analytics/useGtm.ts
@@ -1,6 +1,7 @@
 import type { Schemas } from '@shopware/api-client/api-types';
 import type { UseAnalyticsReturn } from '../../types/analytics/analytics';
 import type { PromotionInfo } from '../../types/analytics/promotion';
+import type { TrackingLineItemList } from '../tracking/useItemTracking';
 
 export function useGtm(): UseAnalyticsReturn {
     const _cookieEnabledName = 'google-analytics-enabled';
@@ -16,6 +17,7 @@ export function useGtm(): UseAnalyticsReturn {
         getEventForProductList,
         getEventForProduct,
         getEventForProductWithPrice,
+        getEventForProductsWithPrice,
     } = useEcommerceTrackingHelper();
     const { getSearchEvent, getSearchSuggestionEvent } = useSearchTrackingHelper();
     const { getPageTrackingEvent, isPageTrackingReady } = usePageTrackingHelper();
@@ -218,8 +220,8 @@ export function useGtm(): UseAnalyticsReturn {
         });
     };
 
-    const trackSelectItem = (product: Schemas['Product']) => {
-        const trackingEvent = getEventForProduct(product);
+    const trackSelectItem = (product: Schemas['Product'], list?: TrackingLineItemList) => {
+        const trackingEvent = getEventForProduct(product, list);
 
         _trackEvent({ ecommerce: null });
         _trackEvent({
@@ -256,7 +258,7 @@ export function useGtm(): UseAnalyticsReturn {
     const trackSearchSuggestions = () => {
         const trackingEvent = getSearchSuggestionEvent();
 
-        _trackEvent({ event: 'search_suggestions', ...trackingEvent });
+        _trackEvent({ event: 'search_suggest', ...trackingEvent });
     };
 
     const trackSearch = () => {
@@ -285,6 +287,16 @@ export function useGtm(): UseAnalyticsReturn {
         });
     };
 
+    const trackClearWishlist = (products: Schemas['Product'][]) => {
+        const trackingEvent = getEventForProductsWithPrice(products);
+
+        _trackEvent({ ecommerce: null });
+        _trackEvent({
+            event: 'remove_from_wishlist',
+            ecommerce: trackingEvent,
+        });
+    };
+
     const trackLogin = () => {
         _trackEvent({
             event: 'login',
@@ -348,6 +360,7 @@ export function useGtm(): UseAnalyticsReturn {
         trackSearch,
         trackAddToWishlist,
         trackRemoveFromWishlist,
+        trackClearWishlist,
         trackLogin,
         trackRegister,
         trackNavigation,

diff --git a/composables/tracking/page/useCartPageTracking.ts b/composables/tracking/page/useCartPageTracking.ts
@@ -3,12 +3,13 @@ import type { UseAnalyticsReturn } from '../../../types/analytics/analytics';
 export function useCartPageTracking(analytics: UseAnalyticsReturn) {
     const cartItemsCountStore = useCartItemsStore();
     const navigationStore = useNavigationStore();
+    const { cart } = useCart();
     const { mainNavigationElements } = storeToRefs(navigationStore);
     const { cartItemsCount } = storeToRefs(cartItemsCountStore);
-    const isCartPageReady = computed(() => !!cartItemsCount.value && !!mainNavigationElements.value.length);
+    const isCartPageReady = computed(() => cart.value?.lineItems.length && !!cartItemsCount.value && !!mainNavigationElements.value.length);
 
     usePageTracking(analytics, 'cart');
     whenever(isCartPageReady, () => {
-        setTimeout(() => analytics.trackViewCart());
+        analytics.trackViewCart();
     }, { immediate: true });
 }
diff --git a/composables/tracking/useEcommerceTrackingHelper.ts b/composables/tracking/useEcommerceTrackingHelper.ts
@@ -44,7 +44,8 @@ export function useEcommerceTrackingHelper() {
     const getEventForAllItems = (): TrackingEcommerceEvent => {
         const currentCart: Schemas['Cart'] = cart.value;
         const getLineItemsTracking = currentCart.lineItems
-            ?.map((lineItem, index) => {
+            ?.filter(item => item.type === 'product')
+            .map((lineItem, index) => {
                 const product = _products.value.find(product => product.id === lineItem.referencedId);
                 if (!product) {
                     return;
@@ -88,16 +89,20 @@ export function useEcommerceTrackingHelper() {
         };
     };
 
-    const getEventForProduct = (product: Schemas['Product']): TrackingEcommerceEvent => {
-        const list = _category.value ? { id: _category.value.id, name: _category.value.name } : undefined;
+    const getEventForProduct = (product: Schemas['Product'], list?: TrackingLineItemList): TrackingEcommerceEvent => {
+        const listItem = list ?
+            list :
+            _category.value
+                ? { id: _category.value.id, name: _category.value.name }
+                : undefined;
         _currentProduct.value = product;
 
         const item = getTrackingItem({
             itemIndex: 1,
             quantity: 1,
             price: _currentProductPrice.price.value,
             product,
-            list,
+            list: listItem,
         });
 
         return {
@@ -115,6 +120,17 @@ export function useEcommerceTrackingHelper() {
         };
     };
 
+    const getEventForProductsWithPrice = (products: Schemas['Product'][]): TrackingEcommerceEvent => {
+        const event = getEventForProductList(products);
+        const value = event.items.reduce((price, item) => price + item.price, 0);
+
+        return {
+            ...event,
+            value,
+            currency: currencyCode.value,
+        };
+    };
+
     const getEventWithShippingInfo = (): TrackingEcommerceEvent => {
         const trackingEvent = getEventForAllItems();
 
@@ -151,6 +167,7 @@ export function useEcommerceTrackingHelper() {
         getEventForProductList,
         getEventForProduct,
         getEventForProductWithPrice,
+        getEventForProductsWithPrice,
         getEventWithShippingInfo,
         getEventWithPaymentInfo,
         getPurchasedEvent,

diff --git a/composables/tracking/usePageTrackingHelper.ts b/composables/tracking/usePageTrackingHelper.ts
@@ -28,27 +28,18 @@ export function usePageTrackingHelper() {
     };
 
     const getPageTrackingEvent = (pageType: string, sessionId?: string): TrackingPageMetaEvents => {
-        const event = {
+        return {
             session_id: sessionId,
             page_type: pageType,
             page_path: path,
             country: sessionContext.value?.shippingLocation?.country?.iso,
             language: languageId.value && getLanguageCodeFromId(languageId.value),
-            login_status: 'logged-out',
+            mail: customer.value?.email,
+            user_id: customer.value?.id,
+            customer_group: customer.value?.groupId,
+            login_status: customer.value ? 'logged-in' : 'logged-out',
             device: getDeviceType(),
         };
-
-        if (customer.value) {
-            return {
-                ...event,
-                user_id: customer.value.id,
-                customer_group: customer.value.groupId,
-                login_status: 'logged-in',
-                mail: customer.value.email,
-            };
-        }
-
-        return event;
     };
 
     return {

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -42,10 +42,10 @@ export default defineNuxtConfig({
                 shopwareEndpoint: '',
                 accessToken: '',
                 analytics: {
-                    enabled: true,
+                    enabled: false,
                     type: 'gtag',
                     id: 'G-XXXX',
-                    trackingUrl: '',
+                    trackingUrl: 'https://www.googletagmanager.com/',
                 }
             },
         },

diff --git a/pages/wishlist.vue b/pages/wishlist.vue
@@ -9,7 +9,7 @@ useBreadcrumbs([
         path: '/wishlist',
     },
 ]);
-useAnalytics({ trackPageView: true, pageType: 'wishlist' });
+const { trackClearWishlist } = useAnalytics({ trackPageView: true, pageType: 'wishlist' });
 
 const products = ref<Schemas['Product'][]>([]);
 
@@ -32,7 +32,9 @@ const clearWishlistHandler = async () => {
     isLoading.value = true;
 
     try {
+        const productsList = products.value.slice(0);
         await clearWishlist();
+        trackClearWishlist(productsList);
         pushSuccess(t('wishlist.clearedSuccessfully'));
     } catch (error) {
         pushError(t('wishlist.errorClearingWishlist'));

diff --git a/stores/CartItemsStore.ts b/stores/CartItemsStore.ts
@@ -12,6 +12,7 @@ export const useCartItemsStore = defineStore('cart-items', () => {
         };
 
         const ids = cartItems.value
+            .filter((item) => item.type === 'product')
             .map(item => item.referencedId)
             .filter((key: string | undefined): key is string => !!key);
 

diff --git a/types/analytics/analytics.d.ts b/types/analytics/analytics.d.ts
@@ -1,4 +1,5 @@
 import type { Schemas } from '@shopware/api-client/api-types';
+import type { TrackingLineItemList } from '../../composables/tracking/useItemTracking';
 import type { PromotionInfo } from './promotion';
 
 export type UseAnalyticsConfig = {
@@ -32,7 +33,7 @@ export type UseAnalyticsReturn = {
     trackAddPaymentInfo: () => void;
     trackPurchase: (order: Schemas['Order']) => void;
     trackViewItemList: (products: Schemas['Product'][], page?: number) => void;
-    trackSelectItem: (product: Schemas['Product']) => void;
+    trackSelectItem: (product: Schemas['Product'], list?: TrackingLineItemList) => void;
     trackViewItem: (product: Schemas['Product']) => void;
     trackPage: (pageType: string) => void;
     setUserId: (userId: string) => void;
@@ -41,6 +42,7 @@ export type UseAnalyticsReturn = {
     trackSearch: () => void;
     trackAddToWishlist: (product: Schemas['Product']) => void;
     trackRemoveFromWishlist: (product: Schemas['Product']) => void;
+    trackClearWishlist: (products: Schemas['Product'][]) => void;
     trackLogin: () => void;
     trackRegister: () => void;
     trackNavigation: (level: number, name: string) => void;