Feature: ads analytics data-properties (#384)

#### What problem is this solving?

Includes ads data-properties on Product Summary, which enables the
Activity Flow script to observe ad elements and collect metrics.

This makes the block `ads-analytics` obsolete in the app
`vtex.sponsored-products`. Now, the merchant doesn't have to include the
wrapper in their product summary.

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- When a product is sponsored, adds HTML data properties so that they can be observed by the Activity Flow script.
+
 ## [2.85.0] - 2023-09-21
 
 ### Added

react/ProductSummaryCustom.tsx

@@ -14,6 +14,7 @@ import type { CssHandlesTypes } from 'vtex.css-handles'
 import LocalProductSummaryContext from './ProductSummaryContext'
 import { mapCatalogProductToProductSummary } from './utils/normalize'
 import ProductPriceSimulationWrapper from './components/ProductPriceSimulationWrapper'
+import getAdsDataProperties from './utils/getAdsDataProperties'
 
 const {
   ProductSummaryProvider,
@@ -151,6 +152,8 @@ function ProductSummaryCustom({
         onClickCapture: autocompleteSummary ? undefined : actionOnClick,
       }
 
+  const adsDataProperties = getAdsDataProperties({ product, position })
+
   return (
     <LocalProductSummaryContext.Provider value={oldContextProps}>
       <ProductContextProvider
@@ -168,6 +171,7 @@ function ProductSummaryCustom({
             onMouseLeave={handleMouseLeave}
             style={{ maxWidth: PRODUCT_SUMMARY_MAX_WIDTH }}
             ref={inViewRef}
+            {...adsDataProperties}
           >
             <Link className={linkClasses} {...linkProps}>
               <article className={summaryClasses}>{children}</article>

react/package.json

@@ -34,7 +34,7 @@
     "vtex.product-list-context": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-list-context",
     "vtex.product-specification-badges": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-specification-badges",
     "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-summary",
-    "vtex.product-summary-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary-context@0.9.0/public/@types/vtex.product-summary-context",
+    "vtex.product-summary-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary-context@0.10.0/public/@types/vtex.product-summary-context",
     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.render-runtime",
     "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.responsive-values",
     "vtex.search-page-context": "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.search-page-context",

react/utils/getAdsDataProperties.ts

@@ -0,0 +1,32 @@
+import { Product } from 'vtex.product-summary-context/react/ProductSummaryTypes'
+
+type GetAdsDataPropertiesArgs = {
+  product: Product
+  position?: number
+}
+
+const getAdsDataProperties = ({
+  product,
+  position,
+}: GetAdsDataPropertiesArgs) => {
+  if (!product.advertisement?.adId) return {}
+
+  const {
+    productId,
+    productName,
+    advertisement: { adId, campaignId, adRequestId, adResponseId, actionCost },
+  } = product
+
+  return {
+    'data-van-prod-id': productId,
+    'data-van-prod-name': productName,
+    'data-van-position': position,
+    'data-van-aid': adId,
+    'data-van-cid': campaignId,
+    'data-van-req-id': adRequestId,
+    'data-van-res-id': adResponseId,
+    'data-van-cpc': actionCost,
+  }
+}
+
+export default getAdsDataProperties

react/yarn.lock

@@ -5030,9 +5030,9 @@ [email protected]:
   version "0.3.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-specification-badges#2df6b189acfabf642504df02d7b8ad406ee90c07"
 
-"vtex.product-summary-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary-context@0.9.0/public/@types/vtex.product-summary-context":
-  version "0.9.0"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary-context@0.9.0/public/@types/vtex.product-summary-context#44c411f37e19c220921ec5af640900b6f95c1d06"
+"vtex.product-summary-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary-context@0.10.0/public/@types/vtex.product-summary-context":
+  version "0.10.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary-context@0.10.0/public/@types/vtex.product-summary-context#b19d6782b61766a801e43741659b9f49b4f289ab"
 
 "vtex.product-summary@http://vtex.vtexassets.com/_v/public/typings/v1/[email protected]/public/@types/vtex.product-summary":
   version "2.82.0"