@getlupa/client 0.14.3 → 0.14.4

package/dist/cjs/components/search-results/SearchResults.vue.d.ts

@@ -3,6 +3,7 @@ import { ProductGrid, SearchResultsDidYouMeanLabels, SearchResultsOptions, Searc
 import { FilterGroup, PublicQuery, SearchQueryResult } from "@getlupa/client-sdk/Types";
 import Vue from "vue";
 import { AnalyticsEventType } from "@/types/AnalyticsOptions";
+import { TrackableEventData } from "@/types/search-box/Common";
 export default class SearchResults extends Vue {
     options: SearchResultsOptions;
     initialFilters: FilterGroup;
@@ -24,6 +25,10 @@ export default class SearchResults extends Vue {
         queryKey: string;
         results: SearchQueryResult;
     }) => void;
+    trackEvent: ({ queryKey, data, }: {
+        queryKey: string;
+        data: TrackableEventData;
+    }) => void;
     enhanceData: ({ result, }: {
         result: SearchQueryResult;
     }) => Promise<void>;
@@ -53,6 +58,7 @@ export default class SearchResults extends Vue {
     }) => void;
     mounted(): void;
     beforeDestroy(): void;
+    trackItemListView(title: string): void;
     handleMounted(): void;
     handleParamsChange(): void;
     addSearchResult: (searchResult: SearchQueryResult) => SearchQueryResult;

package/dist/cjs/index.min.js

@@ -35682,9 +35682,10 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
                 searchQuery: this.query,
                 type: "itemClick",
                 analytics: {
-                    type: "search_product_click",
+                    type: this.query ? "search_product_click" : "select_item",
                     label: this.title || this.id || this.link,
                 },
+                options: { allowEmptySearchQuery: true },
             },
         });
         (_b = (_a = this.searchResultOptions.callbacks) === null || _a === void 0 ? void 0 : _a.onProductClick) === null || _b === void 0 ? void 0 : _b.call(_a, {
@@ -36099,11 +36100,20 @@ const processDebugEvent = (data) => {
     console.debug("Analytics debug event:", params);
 };
 const track = (queryKey, data = {}, options) => {
-    if (!isTrackingEnabled() || !data.searchQuery) {
+    var _a;
+    if (!isTrackingEnabled()) {
+        return;
+    }
+    const hasSearchQuery = data.searchQuery;
+    if (!hasSearchQuery && !((_a = data.options) === null || _a === void 0 ? void 0 : _a.allowEmptySearchQuery)) {
         return;
     }
-    trackLupaEvent(queryKey, data, options);
     trackAnalyticsEvent(data);
+    // Lupa events are only tracked if search query is set
+    if (!hasSearchQuery) {
+        return;
+    }
+    trackLupaEvent(queryKey, data, options);
 };
 
 const params$9 = namespace("params");
@@ -38456,13 +38466,27 @@ let SearchResults = class SearchResults extends Vue$1 {
     beforeDestroy() {
         window.removeEventListener("resize", this.handleResize);
     }
+    trackItemListView(title) {
+        this.trackEvent({
+            queryKey: this.options.queryKey,
+            data: {
+                analytics: {
+                    type: "view_item_list",
+                    label: title,
+                },
+                options: { allowEmptySearchQuery: true },
+            },
+        });
+    }
     handleMounted() {
         var _a;
         this.handleResize();
         if (this.isProductList) {
-            setDocumentTitle(this.options.labels.htmlTitleTemplate, "");
+            const pageTitle = this.options.labels.htmlTitleTemplate;
+            setDocumentTitle(pageTitle, "");
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (_a = this.$refs.searchResultsFilters) === null || _a === void 0 ? void 0 : _a.fetch();
+            this.trackItemListView(pageTitle);
         }
         const params = new URLSearchParams(window.location.search);
         if (!params.has(QUERY_PARAMS.QUERY)) {
@@ -38568,6 +38592,9 @@ __decorate([
 __decorate([
     tracking$2.Action("trackResults")
 ], SearchResults.prototype, "trackResults", void 0);
+__decorate([
+    tracking$2.Action("track")
+], SearchResults.prototype, "trackEvent", void 0);
 __decorate([
     dynamicData$1.Action("enhanceSearchResultsWithDynamicData")
 ], SearchResults.prototype, "enhanceData", void 0);

package/dist/cjs/types/AnalyticsOptions.d.ts

@@ -1,5 +1,5 @@
 export declare const PARENT_EVENT_NAME = "GetLupa";
-export declare type AnalyticsEventType = "search_query" | "search_form_submit" | "autocomplete_suggestion_click" | "autocomplete_product_click" | "search_product_click" | "search_zero_results" | "search_filters" | "search_add_to_cart";
+export declare type AnalyticsEventType = "search_query" | "search_form_submit" | "autocomplete_suggestion_click" | "autocomplete_product_click" | "search_product_click" | "search_zero_results" | "search_filters" | "search_add_to_cart" | "view_item_list" | "select_item";
 export declare type AnalyticsOptions = {
     type: "ua" | "ga4" | "debug";
     enabled: boolean;

package/dist/cjs/types/search-box/Common.d.ts

@@ -35,6 +35,9 @@ export declare type TrackableEventData = {
         type: AnalyticsEventType;
         label: string;
     };
+    options?: {
+        allowEmptySearchQuery: boolean;
+    };
 };
 export declare type HighlightedDocInfo = {
     doc?: Document;

package/dist/es/components/search-results/SearchResults.vue.d.ts

@@ -3,6 +3,7 @@ import { ProductGrid, SearchResultsDidYouMeanLabels, SearchResultsOptions, Searc
 import { FilterGroup, PublicQuery, SearchQueryResult } from "@getlupa/client-sdk/Types";
 import Vue from "vue";
 import { AnalyticsEventType } from "@/types/AnalyticsOptions";
+import { TrackableEventData } from "@/types/search-box/Common";
 export default class SearchResults extends Vue {
     options: SearchResultsOptions;
     initialFilters: FilterGroup;
@@ -24,6 +25,10 @@ export default class SearchResults extends Vue {
         queryKey: string;
         results: SearchQueryResult;
     }) => void;
+    trackEvent: ({ queryKey, data, }: {
+        queryKey: string;
+        data: TrackableEventData;
+    }) => void;
     enhanceData: ({ result, }: {
         result: SearchQueryResult;
     }) => Promise<void>;
@@ -53,6 +58,7 @@ export default class SearchResults extends Vue {
     }) => void;
     mounted(): void;
     beforeDestroy(): void;
+    trackItemListView(title: string): void;
     handleMounted(): void;
     handleParamsChange(): void;
     addSearchResult: (searchResult: SearchQueryResult) => SearchQueryResult;

package/dist/es/index.min.js

@@ -35678,9 +35678,10 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
                 searchQuery: this.query,
                 type: "itemClick",
                 analytics: {
-                    type: "search_product_click",
+                    type: this.query ? "search_product_click" : "select_item",
                     label: this.title || this.id || this.link,
                 },
+                options: { allowEmptySearchQuery: true },
             },
         });
         (_b = (_a = this.searchResultOptions.callbacks) === null || _a === void 0 ? void 0 : _a.onProductClick) === null || _b === void 0 ? void 0 : _b.call(_a, {
@@ -36095,11 +36096,20 @@ const processDebugEvent = (data) => {
     console.debug("Analytics debug event:", params);
 };
 const track = (queryKey, data = {}, options) => {
-    if (!isTrackingEnabled() || !data.searchQuery) {
+    var _a;
+    if (!isTrackingEnabled()) {
+        return;
+    }
+    const hasSearchQuery = data.searchQuery;
+    if (!hasSearchQuery && !((_a = data.options) === null || _a === void 0 ? void 0 : _a.allowEmptySearchQuery)) {
         return;
     }
-    trackLupaEvent(queryKey, data, options);
     trackAnalyticsEvent(data);
+    // Lupa events are only tracked if search query is set
+    if (!hasSearchQuery) {
+        return;
+    }
+    trackLupaEvent(queryKey, data, options);
 };
 
 const params$9 = namespace("params");
@@ -38452,13 +38462,27 @@ let SearchResults = class SearchResults extends Vue$1 {
     beforeDestroy() {
         window.removeEventListener("resize", this.handleResize);
     }
+    trackItemListView(title) {
+        this.trackEvent({
+            queryKey: this.options.queryKey,
+            data: {
+                analytics: {
+                    type: "view_item_list",
+                    label: title,
+                },
+                options: { allowEmptySearchQuery: true },
+            },
+        });
+    }
     handleMounted() {
         var _a;
         this.handleResize();
         if (this.isProductList) {
-            setDocumentTitle(this.options.labels.htmlTitleTemplate, "");
+            const pageTitle = this.options.labels.htmlTitleTemplate;
+            setDocumentTitle(pageTitle, "");
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             (_a = this.$refs.searchResultsFilters) === null || _a === void 0 ? void 0 : _a.fetch();
+            this.trackItemListView(pageTitle);
         }
         const params = new URLSearchParams(window.location.search);
         if (!params.has(QUERY_PARAMS.QUERY)) {
@@ -38564,6 +38588,9 @@ __decorate([
 __decorate([
     tracking$2.Action("trackResults")
 ], SearchResults.prototype, "trackResults", void 0);
+__decorate([
+    tracking$2.Action("track")
+], SearchResults.prototype, "trackEvent", void 0);
 __decorate([
     dynamicData$1.Action("enhanceSearchResultsWithDynamicData")
 ], SearchResults.prototype, "enhanceData", void 0);

package/dist/es/types/AnalyticsOptions.d.ts

@@ -1,5 +1,5 @@
 export declare const PARENT_EVENT_NAME = "GetLupa";
-export declare type AnalyticsEventType = "search_query" | "search_form_submit" | "autocomplete_suggestion_click" | "autocomplete_product_click" | "search_product_click" | "search_zero_results" | "search_filters" | "search_add_to_cart";
+export declare type AnalyticsEventType = "search_query" | "search_form_submit" | "autocomplete_suggestion_click" | "autocomplete_product_click" | "search_product_click" | "search_zero_results" | "search_filters" | "search_add_to_cart" | "view_item_list" | "select_item";
 export declare type AnalyticsOptions = {
     type: "ua" | "ga4" | "debug";
     enabled: boolean;

package/dist/es/types/search-box/Common.d.ts

@@ -35,6 +35,9 @@ export declare type TrackableEventData = {
         type: AnalyticsEventType;
         label: string;
     };
+    options?: {
+        allowEmptySearchQuery: boolean;
+    };
 };
 export declare type HighlightedDocInfo = {
     doc?: Document;

package/dist/iife/components/search-results/SearchResults.vue.d.ts

@@ -3,6 +3,7 @@ import { ProductGrid, SearchResultsDidYouMeanLabels, SearchResultsOptions, Searc
 import { FilterGroup, PublicQuery, SearchQueryResult } from "@getlupa/client-sdk/Types";
 import Vue from "vue";
 import { AnalyticsEventType } from "@/types/AnalyticsOptions";
+import { TrackableEventData } from "@/types/search-box/Common";
 export default class SearchResults extends Vue {
     options: SearchResultsOptions;
     initialFilters: FilterGroup;
@@ -24,6 +25,10 @@ export default class SearchResults extends Vue {
         queryKey: string;
         results: SearchQueryResult;
     }) => void;
+    trackEvent: ({ queryKey, data, }: {
+        queryKey: string;
+        data: TrackableEventData;
+    }) => void;
     enhanceData: ({ result, }: {
         result: SearchQueryResult;
     }) => Promise<void>;
@@ -53,6 +58,7 @@ export default class SearchResults extends Vue {
     }) => void;
     mounted(): void;
     beforeDestroy(): void;
+    trackItemListView(title: string): void;
     handleMounted(): void;
     handleParamsChange(): void;
     addSearchResult: (searchResult: SearchQueryResult) => SearchQueryResult;