@getlupa/client 0.14.3 → 0.15.0

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, items?: Record<string, unknown>[]): void;
     handleMounted(): void;
     handleParamsChange(): void;
     addSearchResult: (searchResult: SearchQueryResult) => SearchQueryResult;

package/dist/cjs/components/search-results/products/product-card/SearchResultsProductCard.vue.d.ts

@@ -1,4 +1,5 @@
 import { DocumentElement } from "@/types/DocumentElement";
+import { TrackingOptions } from "@/types/General";
 import { TrackableEventData } from "@/types/search-box/Common";
 import { BadgeOptions } from "@/types/search-results/BadgeOptions";
 import { ResultsLayout } from "@/types/search-results/ResultsLayout";
@@ -15,6 +16,7 @@ export default class SearchResultsProductCard extends Vue {
     layout: ResultsLayout;
     searchResultsRoutingBehavior: RoutingBehavior;
     searchResultOptions: SearchResultsOptions;
+    trackingOptions: TrackingOptions;
     query: string;
     trackClick: ({ queryKey, data, }: {
         queryKey: string;

package/dist/cjs/index.min.js

@@ -12429,6 +12429,7 @@ let SearchBoxProduct = class SearchBoxProduct extends Vue$1 {
                 analytics: {
                     type: "autocomplete_product_click",
                     label: (_a = this.title) !== null && _a !== void 0 ? _a : this.link,
+                    items: [this.item],
                 },
             },
         });
@@ -31119,6 +31120,7 @@ let SearchBox = class SearchBox extends Vue$1 {
                 analytics: {
                     type: "autocomplete_product_click",
                     label: doc.title || doc.id,
+                    items: [doc],
                 },
             },
         });
@@ -31257,7 +31259,7 @@ __vue_render__$V._withStripped = true;
   /* style */
   const __vue_inject_styles__$V = function (inject) {
     if (!inject) return
-    inject("data-v-39831122_0", { source: "\n#lupa-search-box {\n  width: 100%;\n}\n.lupa-search-box-wrapper {\n  position: relative;\n}\n", map: undefined, media: undefined });
+    inject("data-v-1d0dc04c_0", { source: "\n#lupa-search-box {\n  width: 100%;\n}\n.lupa-search-box-wrapper {\n  position: relative;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -35682,9 +35684,11 @@ 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,
+                    items: [this.product],
                 },
+                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, {
@@ -35730,6 +35734,9 @@ __decorate([
 __decorate([
     options$7.State((o) => o.searchResultOptions)
 ], SearchResultsProductCard.prototype, "searchResultOptions", void 0);
+__decorate([
+    options$7.State((o) => o.trackingOptions)
+], SearchResultsProductCard.prototype, "trackingOptions", void 0);
 __decorate([
     params$a.Getter("query")
 ], SearchResultsProductCard.prototype, "query", void 0);
@@ -36066,6 +36073,15 @@ const trackAnalyticsEvent = (data) => {
         console.error("Unable to send an event to google analytics");
     }
 };
+const parseEcommerceData = (data, title) => {
+    var _a, _b;
+    return ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.items)
+        ? {
+            item_list_name: title,
+            items: (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.items,
+        }
+        : undefined;
+};
 const sendUaAnalyticsEvent = (data, options) => {
     var _a, _b, _c, _d;
     const ga = window.ga;
@@ -36076,34 +36092,47 @@ const sendUaAnalyticsEvent = (data, options) => {
     sendGa("send", "event", options.parentEventName, (_b = (_a = data.analytics) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : "", (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "");
 };
 const sendGa4AnalyticsEvent = (data, options) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (!window || !window.dataLayer) {
         console.error("dataLayer object not found.");
         return;
     }
     const sendItemTitle = data.searchQuery !== ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.label);
+    const title = sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined;
     const params = {
         search_text: data.searchQuery,
-        item_title: sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined,
+        item_title: sendItemTitle ? (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label : undefined,
+        ecommerce: parseEcommerceData(data, title),
     };
-    window.dataLayer.push(Object.assign({ event: (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : options.parentEventName }, params));
+    window.dataLayer.push(Object.assign({ event: (_e = (_d = data.analytics) === null || _d === void 0 ? void 0 : _d.type) !== null && _e !== void 0 ? _e : options.parentEventName }, params));
 };
 const processDebugEvent = (data) => {
     var _a, _b, _c;
     const sendItemTitle = data.searchQuery !== ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.label);
+    const title = sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined;
     const params = {
-        event: (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.type,
+        event: (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.type,
         search_text: data.searchQuery,
-        item_title: sendItemTitle ? (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label : undefined,
+        item_title: title,
+        ecommerce: parseEcommerceData(data, title),
     };
     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,11 +38485,25 @@ let SearchResults = class SearchResults extends Vue$1 {
     beforeDestroy() {
         window.removeEventListener("resize", this.handleResize);
     }
+    trackItemListView(title, items = []) {
+        this.trackEvent({
+            queryKey: this.options.queryKey,
+            data: {
+                analytics: {
+                    type: "view_item_list",
+                    label: title,
+                    items,
+                },
+                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();
         }
@@ -38531,6 +38574,7 @@ let SearchResults = class SearchResults extends Vue$1 {
             if (!hasResults) {
                 return;
             }
+            this.trackItemListView(this.options.labels.htmlTitleTemplate, results.items);
             yield this.enhanceData({ result: results });
         });
     }
@@ -38568,6 +38612,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);
@@ -40368,6 +40415,7 @@ let OptionsModule = class OptionsModule extends VuexModule {
         super(...arguments);
         this.searchBoxOptions = DEFAULT_SEARCH_BOX_OPTIONS;
         this.searchResultOptions = DEFAULT_OPTIONS_RESULTS;
+        this.trackingOptions = {};
         this.searchResultInitialFilters = {};
     }
     get envOptions() {
@@ -40416,6 +40464,9 @@ let OptionsModule = class OptionsModule extends VuexModule {
     setSearchBoxOptions({ options }) {
         this.searchBoxOptions = options;
     }
+    setTrackingOptions({ options }) {
+        this.trackingOptions = options !== null && options !== void 0 ? options : {};
+    }
     setSearchResultOptions({ options }) {
         this.searchResultOptions = options;
     }
@@ -40426,6 +40477,9 @@ let OptionsModule = class OptionsModule extends VuexModule {
 __decorate([
     Mutation
 ], OptionsModule.prototype, "setSearchBoxOptions", null);
+__decorate([
+    Mutation
+], OptionsModule.prototype, "setTrackingOptions", null);
 __decorate([
     Mutation
 ], OptionsModule.prototype, "setSearchResultOptions", null);
@@ -40470,9 +40524,15 @@ let TrackingModule = class TrackingModule extends VuexModule {
         }
     }
     track({ queryKey, data, }) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const options = (_a = this.context.rootGetters["options/envOptions"]) !== null && _a !== void 0 ? _a : {};
-        track(queryKey, data, options);
+        const trackingOptions = (_b = this.context.rootState["options"].trackingOptions) !== null && _b !== void 0 ? _b : {};
+        const items = (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.items) !== null && _d !== void 0 ? _d : [];
+        const mappedItems = ((_e = trackingOptions.analytics) === null || _e === void 0 ? void 0 : _e.itemMap)
+            ? items.map(trackingOptions.analytics.itemMap)
+            : items;
+        track(queryKey, Object.assign(Object.assign({}, data), { analytics: data.analytics
+                ? Object.assign(Object.assign({}, data.analytics), { items: mappedItems }) : undefined }), options);
     }
 };
 __decorate([
@@ -40647,6 +40707,7 @@ const app = {
 };
 const tracking = (options) => {
     initTracking(options);
+    store.commit("options/setTrackingOptions", { options });
 };
 const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];

package/dist/cjs/store/modules/options.d.ts

@@ -1,3 +1,4 @@
+import { TrackingOptions } from "@/types/General";
 import { SearchBoxOptions } from "@/types/search-box/SearchBoxOptions";
 import { RoutingBehavior } from "@/types/search-results/RoutingBehavior";
 import { SearchResultsOptions } from "@/types/search-results/SearchResultsOptions";
@@ -6,6 +7,7 @@ import { VuexModule } from "vuex-module-decorators";
 export default class OptionsModule extends VuexModule {
     searchBoxOptions: SearchBoxOptions;
     searchResultOptions: SearchResultsOptions;
+    trackingOptions: TrackingOptions;
     searchResultInitialFilters: FilterGroup;
     get envOptions(): Options;
     get classMap(): Record<string, string>;
@@ -17,6 +19,9 @@ export default class OptionsModule extends VuexModule {
     setSearchBoxOptions({ options }: {
         options: SearchBoxOptions;
     }): void;
+    setTrackingOptions({ options }: {
+        options: TrackingOptions;
+    }): void;
     setSearchResultOptions({ options }: {
         options: SearchResultsOptions;
     }): void;

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

@@ -1,8 +1,9 @@
 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;
     parentEventName: string;
     ignoreEvents?: AnalyticsEventType[];
+    itemMap?: (item: Record<string, unknown>) => Record<string, unknown>;
 };

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

@@ -34,6 +34,10 @@ export declare type TrackableEventData = {
     analytics?: {
         type: AnalyticsEventType;
         label: string;
+        items?: Record<string, unknown>[];
+    };
+    options?: {
+        allowEmptySearchQuery: boolean;
     };
 };
 export declare type HighlightedDocInfo = {

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, items?: Record<string, unknown>[]): void;
     handleMounted(): void;
     handleParamsChange(): void;
     addSearchResult: (searchResult: SearchQueryResult) => SearchQueryResult;

package/dist/es/components/search-results/products/product-card/SearchResultsProductCard.vue.d.ts

@@ -1,4 +1,5 @@
 import { DocumentElement } from "@/types/DocumentElement";
+import { TrackingOptions } from "@/types/General";
 import { TrackableEventData } from "@/types/search-box/Common";
 import { BadgeOptions } from "@/types/search-results/BadgeOptions";
 import { ResultsLayout } from "@/types/search-results/ResultsLayout";
@@ -15,6 +16,7 @@ export default class SearchResultsProductCard extends Vue {
     layout: ResultsLayout;
     searchResultsRoutingBehavior: RoutingBehavior;
     searchResultOptions: SearchResultsOptions;
+    trackingOptions: TrackingOptions;
     query: string;
     trackClick: ({ queryKey, data, }: {
         queryKey: string;

package/dist/es/index.min.js

@@ -12425,6 +12425,7 @@ let SearchBoxProduct = class SearchBoxProduct extends Vue$1 {
                 analytics: {
                     type: "autocomplete_product_click",
                     label: (_a = this.title) !== null && _a !== void 0 ? _a : this.link,
+                    items: [this.item],
                 },
             },
         });
@@ -31115,6 +31116,7 @@ let SearchBox = class SearchBox extends Vue$1 {
                 analytics: {
                     type: "autocomplete_product_click",
                     label: doc.title || doc.id,
+                    items: [doc],
                 },
             },
         });
@@ -31253,7 +31255,7 @@ __vue_render__$V._withStripped = true;
   /* style */
   const __vue_inject_styles__$V = function (inject) {
     if (!inject) return
-    inject("data-v-39831122_0", { source: "\n#lupa-search-box {\n  width: 100%;\n}\n.lupa-search-box-wrapper {\n  position: relative;\n}\n", map: undefined, media: undefined });
+    inject("data-v-1d0dc04c_0", { source: "\n#lupa-search-box {\n  width: 100%;\n}\n.lupa-search-box-wrapper {\n  position: relative;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -35678,9 +35680,11 @@ 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,
+                    items: [this.product],
                 },
+                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, {
@@ -35726,6 +35730,9 @@ __decorate([
 __decorate([
     options$7.State((o) => o.searchResultOptions)
 ], SearchResultsProductCard.prototype, "searchResultOptions", void 0);
+__decorate([
+    options$7.State((o) => o.trackingOptions)
+], SearchResultsProductCard.prototype, "trackingOptions", void 0);
 __decorate([
     params$a.Getter("query")
 ], SearchResultsProductCard.prototype, "query", void 0);
@@ -36062,6 +36069,15 @@ const trackAnalyticsEvent = (data) => {
         console.error("Unable to send an event to google analytics");
     }
 };
+const parseEcommerceData = (data, title) => {
+    var _a, _b;
+    return ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.items)
+        ? {
+            item_list_name: title,
+            items: (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.items,
+        }
+        : undefined;
+};
 const sendUaAnalyticsEvent = (data, options) => {
     var _a, _b, _c, _d;
     const ga = window.ga;
@@ -36072,34 +36088,47 @@ const sendUaAnalyticsEvent = (data, options) => {
     sendGa("send", "event", options.parentEventName, (_b = (_a = data.analytics) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : "", (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : "");
 };
 const sendGa4AnalyticsEvent = (data, options) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (!window || !window.dataLayer) {
         console.error("dataLayer object not found.");
         return;
     }
     const sendItemTitle = data.searchQuery !== ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.label);
+    const title = sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined;
     const params = {
         search_text: data.searchQuery,
-        item_title: sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined,
+        item_title: sendItemTitle ? (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label : undefined,
+        ecommerce: parseEcommerceData(data, title),
     };
-    window.dataLayer.push(Object.assign({ event: (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : options.parentEventName }, params));
+    window.dataLayer.push(Object.assign({ event: (_e = (_d = data.analytics) === null || _d === void 0 ? void 0 : _d.type) !== null && _e !== void 0 ? _e : options.parentEventName }, params));
 };
 const processDebugEvent = (data) => {
     var _a, _b, _c;
     const sendItemTitle = data.searchQuery !== ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.label);
+    const title = sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined;
     const params = {
-        event: (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.type,
+        event: (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.type,
         search_text: data.searchQuery,
-        item_title: sendItemTitle ? (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label : undefined,
+        item_title: title,
+        ecommerce: parseEcommerceData(data, title),
     };
     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,11 +38481,25 @@ let SearchResults = class SearchResults extends Vue$1 {
     beforeDestroy() {
         window.removeEventListener("resize", this.handleResize);
     }
+    trackItemListView(title, items = []) {
+        this.trackEvent({
+            queryKey: this.options.queryKey,
+            data: {
+                analytics: {
+                    type: "view_item_list",
+                    label: title,
+                    items,
+                },
+                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();
         }
@@ -38527,6 +38570,7 @@ let SearchResults = class SearchResults extends Vue$1 {
             if (!hasResults) {
                 return;
             }
+            this.trackItemListView(this.options.labels.htmlTitleTemplate, results.items);
             yield this.enhanceData({ result: results });
         });
     }
@@ -38564,6 +38608,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);
@@ -40364,6 +40411,7 @@ let OptionsModule = class OptionsModule extends VuexModule {
         super(...arguments);
         this.searchBoxOptions = DEFAULT_SEARCH_BOX_OPTIONS;
         this.searchResultOptions = DEFAULT_OPTIONS_RESULTS;
+        this.trackingOptions = {};
         this.searchResultInitialFilters = {};
     }
     get envOptions() {
@@ -40412,6 +40460,9 @@ let OptionsModule = class OptionsModule extends VuexModule {
     setSearchBoxOptions({ options }) {
         this.searchBoxOptions = options;
     }
+    setTrackingOptions({ options }) {
+        this.trackingOptions = options !== null && options !== void 0 ? options : {};
+    }
     setSearchResultOptions({ options }) {
         this.searchResultOptions = options;
     }
@@ -40422,6 +40473,9 @@ let OptionsModule = class OptionsModule extends VuexModule {
 __decorate([
     Mutation
 ], OptionsModule.prototype, "setSearchBoxOptions", null);
+__decorate([
+    Mutation
+], OptionsModule.prototype, "setTrackingOptions", null);
 __decorate([
     Mutation
 ], OptionsModule.prototype, "setSearchResultOptions", null);
@@ -40466,9 +40520,15 @@ let TrackingModule = class TrackingModule extends VuexModule {
         }
     }
     track({ queryKey, data, }) {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const options = (_a = this.context.rootGetters["options/envOptions"]) !== null && _a !== void 0 ? _a : {};
-        track(queryKey, data, options);
+        const trackingOptions = (_b = this.context.rootState["options"].trackingOptions) !== null && _b !== void 0 ? _b : {};
+        const items = (_d = (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.items) !== null && _d !== void 0 ? _d : [];
+        const mappedItems = ((_e = trackingOptions.analytics) === null || _e === void 0 ? void 0 : _e.itemMap)
+            ? items.map(trackingOptions.analytics.itemMap)
+            : items;
+        track(queryKey, Object.assign(Object.assign({}, data), { analytics: data.analytics
+                ? Object.assign(Object.assign({}, data.analytics), { items: mappedItems }) : undefined }), options);
     }
 };
 __decorate([
@@ -40643,6 +40703,7 @@ const app = {
 };
 const tracking = (options) => {
     initTracking(options);
+    store.commit("options/setTrackingOptions", { options });
 };
 const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];

package/dist/es/store/modules/options.d.ts

@@ -1,3 +1,4 @@
+import { TrackingOptions } from "@/types/General";
 import { SearchBoxOptions } from "@/types/search-box/SearchBoxOptions";
 import { RoutingBehavior } from "@/types/search-results/RoutingBehavior";
 import { SearchResultsOptions } from "@/types/search-results/SearchResultsOptions";
@@ -6,6 +7,7 @@ import { VuexModule } from "vuex-module-decorators";
 export default class OptionsModule extends VuexModule {
     searchBoxOptions: SearchBoxOptions;
     searchResultOptions: SearchResultsOptions;
+    trackingOptions: TrackingOptions;
     searchResultInitialFilters: FilterGroup;
     get envOptions(): Options;
     get classMap(): Record<string, string>;
@@ -17,6 +19,9 @@ export default class OptionsModule extends VuexModule {
     setSearchBoxOptions({ options }: {
         options: SearchBoxOptions;
     }): void;
+    setTrackingOptions({ options }: {
+        options: TrackingOptions;
+    }): void;
     setSearchResultOptions({ options }: {
         options: SearchResultsOptions;
     }): void;

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

@@ -1,8 +1,9 @@
 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;
     parentEventName: string;
     ignoreEvents?: AnalyticsEventType[];
+    itemMap?: (item: Record<string, unknown>) => Record<string, unknown>;
 };

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

@@ -34,6 +34,10 @@ export declare type TrackableEventData = {
     analytics?: {
         type: AnalyticsEventType;
         label: string;
+        items?: Record<string, unknown>[];
+    };
+    options?: {
+        allowEmptySearchQuery: boolean;
     };
 };
 export declare type HighlightedDocInfo = {

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, items?: Record<string, unknown>[]): void;
     handleMounted(): void;
     handleParamsChange(): void;
     addSearchResult: (searchResult: SearchQueryResult) => SearchQueryResult;

package/dist/iife/components/search-results/products/product-card/SearchResultsProductCard.vue.d.ts

@@ -1,4 +1,5 @@
 import { DocumentElement } from "@/types/DocumentElement";
+import { TrackingOptions } from "@/types/General";
 import { TrackableEventData } from "@/types/search-box/Common";
 import { BadgeOptions } from "@/types/search-results/BadgeOptions";
 import { ResultsLayout } from "@/types/search-results/ResultsLayout";
@@ -15,6 +16,7 @@ export default class SearchResultsProductCard extends Vue {
     layout: ResultsLayout;
     searchResultsRoutingBehavior: RoutingBehavior;
     searchResultOptions: SearchResultsOptions;
+    trackingOptions: TrackingOptions;
     query: string;
     trackClick: ({ queryKey, data, }: {
         queryKey: string;