KS-20482-add_analytics_for_static_image_recommandation

packages/klevu-core/src/events/KlevuEvents.ts

@@ -94,11 +94,13 @@ export class KlevuEvents {
    *
    * @param recommendation Metadata of what recommendation is shown
    * @param products List of all products that are shown
+   * @param bannerInfo Information about the static banner that is shown
    * @param override Ability to override any analytical keys in low level
    */
   static recommendationView({
     recommendationMetadata,
     products,
+    bannerInfo,
     override = {},
   }: {
     recommendationMetadata: Partial<RecommendationViewEventMetaData> &
@@ -118,6 +120,7 @@ export class KlevuEvents {
           >
         >
     >
+    bannerInfo?: KlevuEventV2DataStaticContent
     override?: Partial<KlevuRecommendationsEventV2Data>
   }) {
     const data: KlevuRecommendationsEventV2Data = {
@@ -137,6 +140,7 @@ export class KlevuEvents {
         spot_name: recommendationMetadata.spotName,
         segment_name: recommendationMetadata.segmentName || undefined,
         segment_id: recommendationMetadata.segmentKey || undefined,
+        static_content: bannerInfo && [bannerInfo],
         items:
           products &&
           products.map((p, index) => {

packages/klevu-core/src/modifiers/sendRecommendationViewEvent/sendRecommendationViewEvent.ts

@@ -25,7 +25,8 @@ const recommendationTypeOfRequests: KlevuTypeOfRequest[] = [
 export function sendRecommendationViewEvent(
   eventData?: Partial<RecommendationViewEventMetaData> &
     Pick<RecommendationViewEventMetaData, "logic" | "recsKey" | "title">,
-  override?: Partial<KlevuRecommendationsEventV2Data>
+  override?: Partial<KlevuRecommendationsEventV2Data>,
+  isMobile?: boolean
 ): KlevuFetchModifer {
   return {
     klevuModifierId: "sendMerchandisingViewEvent",
@@ -47,19 +48,42 @@ export function sendRecommendationViewEvent(
           return res
         }
 
-        KlevuEvents.recommendationView({
-          recommendationMetadata: {
-            ...kmcData.metadata,
-          },
-          products,
-          override,
-        })
+        if (kmcData.staticContent && kmcData.staticContent.length !== 0) {
+          const resolution = isMobile ? "mobile" : "desktop"
+          const image =
+            kmcData.staticContent[0].image.find(
+              (image) => image.resolution === resolution
+            ) ?? kmcData.staticContent[0].image[0]
+          const bannerInfo = {
+            resolution: resolution as "mobile" | "desktop",
+            index: 1,
+            banner_alt_tag: image.altTag,
+            banner_image_url: image.url,
+            content_type: "image" as const,
+          }
+
+          KlevuEvents.recommendationView({
+            recommendationMetadata: {
+              ...kmcData.metadata,
+            },
+            bannerInfo,
+          })
+        } else {
+          KlevuEvents.recommendationView({
+            recommendationMetadata: {
+              ...kmcData.metadata,
+            },
+            products,
+            override,
+          })
+        }
+
         return res
       }
 
       if (!eventData) {
         throw new Error(
-          "Need to provider eventData parameter for custom view events"
+          "Need to provide eventData parameter for custom view events"
         )
       }
 

packages/klevu-core/src/queries/kmcRecommendation/kmcRecommendation.ts

@@ -207,6 +207,8 @@ export async function kmcRecommendation(
       params: {
         kmcConfig,
       },
+      modifiers:
+        kmcConfig.metadata.action === "STATIC_CONTENT" ? modifiers : undefined,
     }
   }
 

packages/klevu-ui/package.json

@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",
-    "@klevu/core": "^5.2.0",
+    "@klevu/core": "file:../klevu-core",
     "@stencil/core": "^4.4.0",
     "axios": "^1.5.1",
     "lit-html": "^2.8.0",

packages/klevu-ui/src/components/klevu-recommendations/klevu-recommendations.tsx

@@ -133,7 +133,7 @@ export class KlevuRecommendations {
           itemGroupId: this.itemGroupId,
           ...this.options,
         },
-        sendRecommendationViewEvent()
+        sendRecommendationViewEvent(undefined, undefined, this.#isMobile())
       )
     )