@getlupa/client 0.10.1 → 0.10.2

package/dist/cjs/components/search-box/SearchBox.vue.d.ts

@@ -1,7 +1,7 @@
 import { FetchedData, HighlightedDocInfo, InputSuggestion, InputSuggestionFacet, SelectedData, TrackableEventData } from "@/types/search-box/Common";
 import { SearchBoxInputOptions, SearchBoxOptions, SearchBoxPanelOptions } from "@/types/search-box/SearchBoxOptions";
 import { QueryParams } from "@/types/search-results/QueryParams";
-import { Document } from "@getlupa/client-sdk/Types";
+import { Document, PublicQuery } from "@getlupa/client-sdk/Types";
 import Vue from "vue";
 declare const params: import("vuex-class/lib/bindings").BindingHelpers;
 export default class SearchBox extends Vue {
@@ -28,6 +28,10 @@ export default class SearchBox extends Vue {
         queryKey: string;
         data: TrackableEventData;
     }) => void;
+    trackSearch: ({ queryKey, query, }: {
+        queryKey: string;
+        query: PublicQuery;
+    }) => void;
     setSearchResultsLink: (searchResultsLink: string) => {
         searchResultsLink: string;
     };
@@ -63,6 +67,7 @@ export default class SearchBox extends Vue {
         query: string;
     }): void;
     trackDocumentClick(doc: HighlightedDocInfo): void;
+    trackSearchQuery(query?: string): void;
     trackSuggestionClick(suggestion?: string): void;
     resetValues(): void;
     handleProductClick(): void;

package/dist/cjs/components/search-box/products/SearchBoxProduct.vue.d.ts

@@ -23,5 +23,6 @@ export default class SearchBoxProduct extends Vue {
     get imageElements(): DocumentElement[];
     get detailElements(): DocumentElement[];
     get id(): string;
+    get title(): string;
     handleClick(event?: Event): void;
 }

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

@@ -2,6 +2,7 @@ import { QueryParams } from "@/types/search-results/QueryParams";
 import { ProductGrid, SearchResultsDidYouMeanLabels, SearchResultsOptions, SearchResultsProductOptions } from "@/types/search-results/SearchResultsOptions";
 import { FilterGroup, PublicQuery, SearchQueryResult } from "@getlupa/client-sdk/Types";
 import Vue from "vue";
+import { AnalyticsEventType } from "@/types/AnalyticsOptions";
 export default class SearchResults extends Vue {
     options: SearchResultsOptions;
     initialFilters: FilterGroup;
@@ -16,6 +17,7 @@ export default class SearchResults extends Vue {
     trackSearch: ({ queryKey, query, }: {
         queryKey: string;
         query: PublicQuery;
+        type?: AnalyticsEventType;
     }) => void;
     trackResults: ({ queryKey, results, }: {
         queryKey: string;

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

@@ -30,6 +30,7 @@ export default class SearchResultsProductCard extends Vue {
     mounted(): void;
     checkIfIsInStock(): Promise<void>;
     get id(): string;
+    get title(): string;
     handleClick(): void;
     handleProductEvent(item: {
         type: ReportableEventType;

package/dist/cjs/constants/development/searchResultsDev.example.const.d.ts

@@ -100,6 +100,7 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         details: string;
     };
     idKey: string;
+    titleKey: string;
     elements: DocumentElement[];
     breadcrumbs: ({
         label: string;

package/dist/cjs/index.min.js

@@ -12214,7 +12214,7 @@ const getRelativePath = (link) => {
     }
     catch (_a) {
         // Invalid url, let's return original string
-        return link;
+        return (link === null || link === void 0 ? void 0 : link.endsWith("/")) ? link.slice(0, link.length - 1) : link;
     }
 };
 // Checks if url links match absolutely, or if their relative parts are equal
@@ -12272,7 +12272,18 @@ let SearchBoxProduct = class SearchBoxProduct extends Vue$1 {
         }
         return "";
     }
+    get title() {
+        if (!this.panelOptions.titleKey) {
+            return "";
+        }
+        const title = this.item[this.panelOptions.titleKey] || "";
+        this.addHistory({
+            item: title,
+        });
+        return title;
+    }
     handleClick(event) {
+        var _a;
         if (this.panelOptions.titleKey) {
             this.addHistory({
                 item: this.item[this.panelOptions.titleKey] || "",
@@ -12289,7 +12300,7 @@ let SearchBoxProduct = class SearchBoxProduct extends Vue$1 {
                 type: "itemClick",
                 analytics: {
                     type: "autocomplete_product_click",
-                    label: this.link,
+                    label: (_a = this.title) !== null && _a !== void 0 ? _a : this.link,
                 },
             },
         });
@@ -13332,8 +13343,9 @@ let SearchBoxMainPanel = class SearchBoxMainPanel extends Vue$1 {
         this.sdkOptions = this.options.options;
     }
     get displayResults() {
-        var _a;
-        return ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.options.minInputLength;
+        var _a, _b;
+        return (((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            ((_b = this.inputValue) === null || _b === void 0 ? void 0 : _b.length) >= this.options.minInputLength);
     }
     get displayHistory() {
         var _a;
@@ -13532,7 +13544,7 @@ __vue_render__$V._withStripped = true;
   /* style */
   const __vue_inject_styles__$V = function (inject) {
     if (!inject) return
-    inject("data-v-d48b96f0_0", { source: "#lupa-search-box-panel {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n}\n.lupa-more-results {\n  text-align: center;\n}", map: undefined, media: undefined });
+    inject("data-v-947d134e_0", { source: "#lupa-search-box-panel {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n}\n.lupa-more-results {\n  text-align: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -30869,6 +30881,7 @@ let SearchBox = class SearchBox extends Vue$1 {
         this.opened = true;
         this.inputValue = value;
         this.suggestedValue = defaultSuggestedValue;
+        this.trackSearchQuery(value);
         if (this.isSearchContainer) {
             this.goToResultsDebounced({
                 searchText: this.searchValue,
@@ -30961,11 +30974,22 @@ let SearchBox = class SearchBox extends Vue$1 {
                 type: "itemClick",
                 analytics: {
                     type: "autocomplete_product_click",
-                    label: doc.doc.url || doc.id,
+                    label: doc.title || doc.id,
                 },
             },
         });
     }
+    trackSearchQuery(query) {
+        if (!query) {
+            return;
+        }
+        this.trackSearch({
+            queryKey: this.suggestedValue.queryKey,
+            query: {
+                searchText: query,
+            },
+        });
+    }
     trackSuggestionClick(suggestion) {
         var _a;
         if (suggestion ||
@@ -30980,7 +31004,7 @@ let SearchBox = class SearchBox extends Vue$1 {
                 searchQuery: this.inputValue,
                 type: "suggestionClick",
                 analytics: {
-                    type: "autocomplete_keyword_click",
+                    type: "autocomplete_suggestion_click",
                     label: suggestion || this.searchValue,
                 },
             },
@@ -31012,6 +31036,9 @@ __decorate([
 __decorate([
     tracking$4.Action("track")
 ], SearchBox.prototype, "trackClick", void 0);
+__decorate([
+    tracking$4.Action("trackSearch")
+], SearchBox.prototype, "trackSearch", void 0);
 __decorate([
     params$e.Action("setSearchResultsLink")
 ], SearchBox.prototype, "setSearchResultsLink", void 0);
@@ -31085,7 +31112,7 @@ __vue_render__$U._withStripped = true;
   /* style */
   const __vue_inject_styles__$U = function (inject) {
     if (!inject) return
-    inject("data-v-ed058b02_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-d81b3ccc_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 */
@@ -35367,10 +35394,14 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
         });
     }
     get id() {
-        if (this.options.idKey) {
-            return this.product[this.options.idKey];
-        }
-        return "";
+        return this.options.idKey
+            ? this.product[this.options.idKey]
+            : "";
+    }
+    get title() {
+        return this.options.titleKey
+            ? this.product[this.options.titleKey]
+            : "";
     }
     handleClick() {
         var _a, _b;
@@ -35380,6 +35411,10 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
                 itemId: this.id,
                 searchQuery: this.query,
                 type: "itemClick",
+                analytics: {
+                    type: "search_product_click",
+                    label: this.title || this.id || this.link,
+                },
             },
         });
         (_b = (_a = this.searchResultOptions.callbacks) === null || _a === void 0 ? void 0 : _a.onProductClick) === null || _b === void 0 ? void 0 : _b.call(_a, {
@@ -35396,8 +35431,8 @@ let SearchResultsProductCard = class SearchResultsProductCard extends Vue$1 {
                 type: item.type,
                 analytics: item.type === "addToCart"
                     ? {
-                        type: "add_to_cart",
-                        label: this.link,
+                        type: "search_add_to_cart",
+                        label: this.title || this.id || this.link,
                     }
                     : undefined,
             },
@@ -35567,7 +35602,7 @@ __vue_render__$o._withStripped = true;
 
 const initAnalyticsTracking = (analyticsOptions) => {
     try {
-        if ((analyticsOptions === null || analyticsOptions === void 0 ? void 0 : analyticsOptions.enabled) && analyticsOptions.type === "ua") {
+        if (analyticsOptions === null || analyticsOptions === void 0 ? void 0 : analyticsOptions.enabled) {
             window.sessionStorage.setItem(TRACKING_ANALYTICS_KEY, JSON.stringify(analyticsOptions));
         }
         else {
@@ -35712,25 +35747,66 @@ const sendGa = (name, ...args) => {
     });
 };
 const trackAnalyticsEvent = (data) => {
-    var _a;
+    var _a, _b, _c;
     try {
         const options = JSON.parse((_a = window.sessionStorage.getItem(TRACKING_ANALYTICS_KEY)) !== null && _a !== void 0 ? _a : "{}");
-        if (!data.analytics || !options.enabled) {
+        if (!data.analytics ||
+            !options.enabled ||
+            ((_b = options.ignoreEvents) === null || _b === void 0 ? void 0 : _b.includes((_c = data.analytics) === null || _c === void 0 ? void 0 : _c.type))) {
             return;
         }
-        const ga = window.ga;
-        if (!ga) {
-            console.error("Google Analytics object not found");
-            return;
+        switch (options.type) {
+            case "ua":
+                sendUaAnalyticsEvent(data, options);
+                break;
+            case "ga4":
+                sendGa4AnalyticsEvent(data, options);
+                break;
+            case "debug":
+                processDebugEvent(data);
+                break;
+            default:
+                sendUaAnalyticsEvent(data, options);
         }
-        sendGa("send", "event", options.parentEventName, data.analytics.type, data.analytics.label);
     }
-    catch (_b) {
+    catch (_d) {
         console.error("Unable to send an event to google analytics");
     }
 };
+const sendUaAnalyticsEvent = (data, options) => {
+    var _a, _b, _c, _d;
+    const ga = window.ga;
+    if (!ga) {
+        console.error("Google Analytics object not found");
+        return;
+    }
+    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;
+    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 params = {
+        search_text: data.searchQuery,
+        item_title: sendItemTitle ? (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.label : undefined,
+    };
+    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));
+};
+const processDebugEvent = (data) => {
+    var _a, _b, _c;
+    const sendItemTitle = data.searchQuery !== ((_a = data.analytics) === null || _a === void 0 ? void 0 : _a.label);
+    const params = {
+        event: (_b = data.analytics) === null || _b === void 0 ? void 0 : _b.type,
+        search_text: data.searchQuery,
+        item_title: sendItemTitle ? (_c = data.analytics) === null || _c === void 0 ? void 0 : _c.label : undefined,
+    };
+    console.debug("Analytics debug event:", params);
+};
 const track = (queryKey, data = {}, options) => {
-    if (!isTrackingEnabled()) {
+    if (!isTrackingEnabled() || !data.searchQuery) {
         return;
     }
     trackLupaEvent(queryKey, data, options);
@@ -37397,6 +37473,7 @@ let SearchResultsProducts = class SearchResultsProducts extends Vue$1 {
             "labels",
             "queryKey",
             "idKey",
+            "titleKey",
             "routingBehavior",
         ]);
     }
@@ -38083,7 +38160,11 @@ let SearchResults = class SearchResults extends Vue$1 {
         this.query(getPublicQuery(publicQuery, this.initialFilters, this.isProductList));
     }
     query(publicQuery) {
-        this.trackSearch({ queryKey: this.options.queryKey, query: publicQuery });
+        this.trackSearch({
+            queryKey: this.options.queryKey,
+            query: publicQuery,
+            type: "search_form_submit",
+        });
         const context = getLupaTrackingContext();
         const limit = publicQuery.limit || this.defaultSearchResultPageSize;
         const query = Object.assign(Object.assign(Object.assign({}, publicQuery), context), { limit });
@@ -39349,6 +39430,7 @@ let SearchBoxModule = class SearchBoxModule extends VuexModule {
             link: generateLink((_b = panel.links) === null || _b === void 0 ? void 0 : _b.details, doc),
             queryKey: panel.queryKey,
             id: panel.idKey ? doc[panel.idKey] : "",
+            title: panel.titleKey ? doc[panel.titleKey] : "",
         };
     }
     saveSuggestions({ queryKey, suggestions, inputValue, }) {
@@ -39825,11 +39907,6 @@ let ParamsModule = class ParamsModule extends VuexModule {
             const routing = (_a = this.context.rootGetters["options/boxRoutingBehavior"]) !== null && _a !== void 0 ? _a : "direct-link";
             redirectToResultsPage(this.searchResultsLink, searchText, facet, routing);
         }
-        this.context.dispatch("tracking/track", {
-            data: {
-                analytics: { type: "search_form_submit", label: searchText },
-            },
-        }, { root: true });
     }
     appendParams({ params, paramsToRemove, encode = true, save = true, searchResultsLink, }) {
         if (!(params === null || params === void 0 ? void 0 : params.length)) {
@@ -39980,22 +40057,23 @@ const getSearchTrackingData = (searchText, type) => {
     };
 };
 let TrackingModule = class TrackingModule extends VuexModule {
-    trackSearch({ queryKey, query, }) {
+    trackSearch({ queryKey, query, type = "search_query", }) {
         var _a, _b;
         const options = (_a = this.context.rootGetters["options/envOptions"]) !== null && _a !== void 0 ? _a : {};
         const hasFilters = Object.keys((_b = query.filters) !== null && _b !== void 0 ? _b : {}).length > 0;
         if (hasFilters) {
-            const data = getSearchTrackingData(query.searchText, "filters");
+            const data = getSearchTrackingData(query.searchText, "search_filters");
             track(queryKey, data, options);
+            return;
         }
-        const data = getSearchTrackingData(query.searchText, "search");
+        const data = getSearchTrackingData(query.searchText, type);
         track(queryKey, data, options);
     }
     trackResults({ queryKey, results, }) {
         var _a;
         const options = (_a = this.context.rootGetters["options/envOptions"]) !== null && _a !== void 0 ? _a : {};
         if (results.total < 1) {
-            const data = getSearchTrackingData(results.searchText, "zero_results");
+            const data = getSearchTrackingData(results.searchText, "search_zero_results");
             track(queryKey, data, options);
         }
     }

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

@@ -1,10 +1,12 @@
+import { AnalyticsEventType } from "@/types/AnalyticsOptions";
 import { TrackableEventData } from "@/types/search-box/Common";
 import { PublicQuery, SearchQueryResult } from "@getlupa/client-sdk/Types";
 import { VuexModule } from "vuex-module-decorators";
 export default class TrackingModule extends VuexModule {
-    trackSearch({ queryKey, query, }: {
+    trackSearch({ queryKey, query, type, }: {
         queryKey: string;
         query: PublicQuery;
+        type?: AnalyticsEventType;
     }): void;
     trackResults({ queryKey, results, }: {
         queryKey: string;

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

@@ -1,7 +1,8 @@
 export declare const PARENT_EVENT_NAME = "GetLupa";
-export declare type AnalyticsEventType = "search" | "search_form_submit" | "autocomplete_keyword_click" | "autocomplete_product_click" | "zero_results" | "filters" | "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";
 export declare type AnalyticsOptions = {
-    type: "ua";
+    type: "ua" | "ga4" | "debug";
     enabled: boolean;
     parentEventName: string;
+    ignoreEvents?: AnalyticsEventType[];
 };

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

@@ -41,4 +41,5 @@ export declare type HighlightedDocInfo = {
     link?: string;
     queryKey?: string;
     id?: unknown;
+    title?: string;
 };

package/dist/cjs/types/search-results/SearchResultsProductCardOptions.d.ts

@@ -14,6 +14,7 @@ export declare type SearchResultsProductCardOptions = {
     elements: DocumentElement[];
     queryKey: string;
     idKey?: string;
+    titleKey?: string;
 };
 export declare type SearchResultBadgeOptions = {
     anchor: AnchorPosition;

package/dist/es/components/search-box/SearchBox.vue.d.ts

@@ -1,7 +1,7 @@
 import { FetchedData, HighlightedDocInfo, InputSuggestion, InputSuggestionFacet, SelectedData, TrackableEventData } from "@/types/search-box/Common";
 import { SearchBoxInputOptions, SearchBoxOptions, SearchBoxPanelOptions } from "@/types/search-box/SearchBoxOptions";
 import { QueryParams } from "@/types/search-results/QueryParams";
-import { Document } from "@getlupa/client-sdk/Types";
+import { Document, PublicQuery } from "@getlupa/client-sdk/Types";
 import Vue from "vue";
 declare const params: import("vuex-class/lib/bindings").BindingHelpers;
 export default class SearchBox extends Vue {
@@ -28,6 +28,10 @@ export default class SearchBox extends Vue {
         queryKey: string;
         data: TrackableEventData;
     }) => void;
+    trackSearch: ({ queryKey, query, }: {
+        queryKey: string;
+        query: PublicQuery;
+    }) => void;
     setSearchResultsLink: (searchResultsLink: string) => {
         searchResultsLink: string;
     };
@@ -63,6 +67,7 @@ export default class SearchBox extends Vue {
         query: string;
     }): void;
     trackDocumentClick(doc: HighlightedDocInfo): void;
+    trackSearchQuery(query?: string): void;
     trackSuggestionClick(suggestion?: string): void;
     resetValues(): void;
     handleProductClick(): void;

package/dist/es/components/search-box/products/SearchBoxProduct.vue.d.ts

@@ -23,5 +23,6 @@ export default class SearchBoxProduct extends Vue {
     get imageElements(): DocumentElement[];
     get detailElements(): DocumentElement[];
     get id(): string;
+    get title(): string;
     handleClick(event?: Event): void;
 }

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

@@ -2,6 +2,7 @@ import { QueryParams } from "@/types/search-results/QueryParams";
 import { ProductGrid, SearchResultsDidYouMeanLabels, SearchResultsOptions, SearchResultsProductOptions } from "@/types/search-results/SearchResultsOptions";
 import { FilterGroup, PublicQuery, SearchQueryResult } from "@getlupa/client-sdk/Types";
 import Vue from "vue";
+import { AnalyticsEventType } from "@/types/AnalyticsOptions";
 export default class SearchResults extends Vue {
     options: SearchResultsOptions;
     initialFilters: FilterGroup;
@@ -16,6 +17,7 @@ export default class SearchResults extends Vue {
     trackSearch: ({ queryKey, query, }: {
         queryKey: string;
         query: PublicQuery;
+        type?: AnalyticsEventType;
     }) => void;
     trackResults: ({ queryKey, results, }: {
         queryKey: string;

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

@@ -30,6 +30,7 @@ export default class SearchResultsProductCard extends Vue {
     mounted(): void;
     checkIfIsInStock(): Promise<void>;
     get id(): string;
+    get title(): string;
     handleClick(): void;
     handleProductEvent(item: {
         type: ReportableEventType;

package/dist/es/constants/development/searchResultsDev.example.const.d.ts

@@ -100,6 +100,7 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         details: string;
     };
     idKey: string;
+    titleKey: string;
     elements: DocumentElement[];
     breadcrumbs: ({
         label: string;