[Product] Implement Product Recommendations Component from Coveo

[davidzochowski]

This would show products to the user depending on pages that they've visited or products similar to the one they are currently viewing.

There is a Coveo Atomic component for this. https://docs.coveo.com/en/atomic/latest/reference/recommendation-components/ Example here: https://stackblitz.com/edit/atomicv2?file=examples%2Frecommendations.html

There are multiple 'strategies' that Coveo has defined that will influence what products are returned. The most common ones can be found here: https://docs.coveo.com/en/l2fa0038/coveo-for-commerce/associate-a-product-recommendation-pr-model-with-a-query-pipeline#pr-advanced-configuration-options-strategies However, there are a lot more we could use for special scenarios. Maybe we can make a generic component and have the strategy be a parameter on the component.

For this phase, let's implement the 'frequentViewed' and 'popularViewed' strategies and we can add more at a later date.

The idea is that we can place this component on the Product page(frequentViewed). This component will be placed lower on the page so as to not affect LCP and could be delayed to not affect pagespeed.

Note: We do not want to cache this on Cloudfront as the results will change depending on views and clicks. We do not need to worry about the QPM as recommendations tracks against a different usage metric (we have 1M recommendations per month)

[davidzochowski]

Could also place this on the 404 page but my priority is first on the product page.

[davidzochowski]

Notes from call:

• look into building using both atomic and custom code, but general consensus is that custom code would be better
• Deepak built this on the add to cart page within Vue so can use that as a reference. https://dev.lifesciences.danaher.com/us/en/cart.html?sharedProducts=B89230
• recommendations component will be added below the tab section and will be added at the page template level
• design mockups shows multiple components with different strategies but realistically, we will decide on 1 or 2 per page. For this round, product pages will only have 1 and will use 'frequentViewed'
• 404 page can have the component and will use 'popularViewed'
• This will be part of Phase 6 (Static Pages and Personalization)

[davidzochowski]

Here is a postman export of the Coveo API call. This is all of the ones I have but for this feature, please use the one under 'Recommendations' -> 'Product Recommendations'

coveo postman.zip

[davidzochowski]

I've updated the recommendations call. Please use this for the API calls. Product Recommendations.postman_collection.json

[davidzochowski]

**NOte: This is based on a copy of the Solutions Page Search+Analytics Payloads RECOMMENDATIONS:

Search Event-------

  const payload = {
    analytics: {
      actionCause: 'recommendationInterfaceLoad', //hardcoded
      clientId: //clientid from cookie
      clientTimestamp: userTimestamp,
      customData: {
        context_host: `${host}`,
        context_internal: isInternal,
      },
      documentReferrer: document.referrer,
      documentLocation: window.location.href,
      originContext: 'DanaherLifeSciencesProductRecommendations',
    },
    actionsHistory: searchHistory.map(({ time, value, name }) => ({ time, value, name })),
    anonymous: false,
    context: {
      host: `${host}`,
      internal: isInternal,
    },
    firstResult: 0,
    locale: 'en',
    "mlParameters": {
      "itemId": "allegra-vr-15-benchtop-centrifuge"
    },
    numberOfResults: 8, //Check with Anthony for how many items to show
    pipeline: 'Danaher LifeSciences Product Recommendations',
    recommendation: 'frequentViewed', //Note, this will change depending on which recommendation startegy we will use
    referrer: document.referrer,
    searchHub: 'DanaherLifeSciencesProductRecommendations',
    tab: 'Frequently Viewed Together', //Note, this will change depending on which recommendation startegy we will use
    timezone: userTimeZone,
  };

Search Analytics Event-------

  const payload = {
    actionCause: 'recommendationInterfaceLoad',
    anonymous: false,
    clientId: //clientid from cookie
    customData: {
      context_host: window.DanaherConfig.host,
      context_internal: isInternal,
    },
    language: 'en',
    numberOfResults: response.results.length,
    originLevel1: 'DanaherLifeSciencesProductRecommendations',
    originLevel2: 'Frequently Viewed Together', //Note, this will change depending on which recommendation startegy we will use
    originLevel3: document.referrer,
    queryPipeline: 'Danaher LifeSciences Product Recommendations',
    queryText: '',
    responseTime: response.duration,
    results,
    searchQueryUid: response.searchUid,
    userAgent: window.navigator.userAgent,
  };

Click Analytics Event-------

  const payload = {
    actionCause: 'recommendationOpen',
    anonymous: false,
    collectionName: res?.raw?.collection,
    customData: {
      context_host: window.DanaherConfig.host,
      context_internal: isInternal,
      contentIDKey: 'permanentid',
      contentIDValue: res?.clickUri,
    },
    documentPosition: parseInt(idx, 10),
    documentTitle: res?.title,
    documentURL: res?.clickUri,
    documentUriHash: res?.raw?.urihash,
    language: 'en',
    originLevel1: 'DanaherLifeSciencesProductRecommendations',
    originLevel2: 'Frequently Viewed Together', //Note, this will change depending on which recommendation startegy we will use
    originLevel3: document.referrer,
    queryPipeline: 'Danaher LifeSciences Product Recommendations',
    searchQueryUid: srchUid,
    sourceName: res?.raw?.source,
    userAgent: window.navigator.userAgent,
  };

[davidzochowski]

Production API Key xx107716c0-1ccd-4a61-8717-6ca36b6cdb0e