Merge pull request #250 from vtex-apps/feature/gtm-major-compatibility

Adding compatibility with new GTM major

CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- List name to GTM `productClick` event.
+- Passing `listName` and `position` prop to Product Summary.
+
+### Fixed
+- `trackingId` is now being used on `RelatedProducts` shelf.
+- Shelf item's position now starts at 1.
 
 ## [1.44.2] - 2020-12-01
 ### Fixed

react/RelatedProducts.js

@@ -7,6 +7,7 @@ import { useDevice } from 'vtex.device-detector'
 import { ProductListContext } from 'vtex.product-list-context'
 import { useProduct } from 'vtex.product-context'
 import { useCssHandles } from 'vtex.css-handles'
+import { useTreePath } from 'vtex.render-runtime'
 
 import productRecommendationsQuery from './queries/productRecommendations.gql'
 import ProductList from './components/ProductList'
@@ -31,12 +32,23 @@ const RelatedProducts = ({
   productQuery,
   productList,
   recommendation: cmsRecommendation,
+  trackingId: rawTrackingId,
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
   const { isMobile } = useDevice()
+  const treePath = useTreePath()
 
   const productContext = useProduct()
 
+  let trackingId = rawTrackingId
+
+  if (!trackingId) {
+    // Taking the block name to pass to listName if no trackingId is passed
+    const treePathList =
+      (typeof treePath === 'string' && treePath.split()) || []
+    trackingId = treePathList[treePathList.length - 1] || 'List of products'
+  }
+
   const productId =
     path(['product', 'productId'], productQuery) ||
     path(['product', 'productId'], productContext)
@@ -74,10 +86,11 @@ const RelatedProducts = ({
           loading,
           ...productList,
           isMobile,
+          trackingId,
         }
         return (
           <div className={handles.relatedProducts}>
-            <ProductListProvider>
+            <ProductListProvider listName={trackingId}>
               <ProductList {...productListProps} />
             </ProductListProvider>
           </div>
@@ -100,6 +113,7 @@ RelatedProducts.propTypes = {
   }),
   /** ProductList schema configuration */
   productList: PropTypes.shape(productListSchemaPropTypes),
+  trackingId: PropTypes.string,
 }
 
 RelatedProducts.defaultProps = {

react/Shelf.js

@@ -38,7 +38,7 @@ const Shelf = props => {
     // Taking the block name to pass to listName if no trackingId is passed
     const treePathList =
       (typeof treePath === 'string' && treePath.split()) || []
-    trackingId = treePathList[treePathList.length - 1] || 'Shelf'
+    trackingId = treePathList[treePathList.length - 1] || 'List of products'
   }
 
   const filteredProducts = useMemo(() => {
@@ -52,6 +52,7 @@ const Shelf = props => {
     loading,
     paginationDotsVisibility,
     products: filteredProducts,
+    trackingId,
   }
 
   if (loading) {

react/__mocks__/vtex.native-types/index.js

@@ -2,3 +2,4 @@ import React from 'react'
 import { FormattedMessage } from 'react-intl'
 
 export const IOMessage = props => <FormattedMessage {...props} />
+export const formatIOMessage = message => message

react/components/ProductList.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { Fragment } from 'react'
 import ReactResizeDetector from 'react-resize-detector'
-import { IOMessage } from 'vtex.native-types'
+import { IOMessage, formatIOMessage } from 'vtex.native-types'
 import { useCssHandles } from 'vtex.css-handles'
 
 import {
@@ -37,12 +37,20 @@ const ProductList = ({
   minItemsPerPage,
   paginationDotsVisibility,
   navigationStep: navigationStepProp,
+  trackingId,
 }) => {
   const handles = useCssHandles(CSS_HANDLES)
   const navigationStep = Number.isNaN(parseInt(navigationStepProp, 10))
     ? navigationStepProp
     : parseInt(navigationStepProp, 10)
 
+  let listName = trackingId
+
+  if (!listName) {
+    listName =
+      showTitle && titleText ? formatIOMessage(titleText) : 'List of products'
+  }
+
   return products && !products.length ? null : (
     <Fragment>
       {showTitle && (
@@ -68,6 +76,7 @@ const ProductList = ({
             navigationStep={navigationStep}
             minItemsPerPage={minItemsPerPage}
             paginationDotsVisibility={paginationDotsVisibility}
+            listName={listName}
           />
         )}
       </ReactResizeDetector>
@@ -102,6 +111,7 @@ ProductList.propTypes = {
     'desktopOnly',
     'mobileOnly',
   ]),
+  trackingId: PropTypes.string,
   ...productListSchemaPropTypes,
 }
 

react/components/ShelfContent.js

@@ -143,6 +143,7 @@ class ShelfContent extends Component {
       navigationStep,
       minItemsPerPage,
       paginationDotsVisibility,
+      listName,
     } = this.props
 
     const { currentSlide } = this.state
@@ -191,7 +192,12 @@ class ShelfContent extends Component {
                 key={path(['productId'], item) || index}
                 defaultWidth={DEFAULT_SHELF_ITEM_WIDTH}
               >
-                <ShelfItem item={item} summary={summary} />
+                <ShelfItem
+                  item={item}
+                  position={index + 1}
+                  summary={summary}
+                  listName={listName}
+                />
               </Slide>
             ))}
           </Slider>
@@ -249,6 +255,8 @@ ShelfContent.propTypes = {
   isMobile: shelfContentPropTypes.isMobile,
   /** Gap between Shelf Items */
   gap: shelfContentPropTypes.gap,
+  /** Title of the shelf */
+  listName: shelfContentPropTypes.listName,
 }
 
 export default withCssHandles(CSS_HANDLES)(ShelfContent)

react/components/ShelfItem.js

@@ -9,7 +9,7 @@ import { usePixel } from 'vtex.pixel-manager/PixelContext'
  * ShelfItem Component. Normalizes the item received in the props
  * to adapt to the extension point prop.
  */
-const ShelfItem = ({ item, summary }) => {
+const ShelfItem = ({ item, summary, position, listName }) => {
   const { push } = usePixel()
   const newSummary = useMemo(() => assocPath(['name', 'tag'], 'h2', summary), [
     summary,
@@ -23,14 +23,18 @@ const ShelfItem = ({ item, summary }) => {
     push({
       event: 'productClick',
       product,
+      list: listName,
+      position,
     })
-  }, [product, push])
+  }, [product, position, listName, push])
 
   return (
     <ExtensionPoint
       id="product-summary"
       product={product}
+      listName={listName}
       actionOnClick={pushPixelProductClick}
+      position={position}
       {...newSummary}
     />
   )

react/utils/propTypes.js

@@ -105,4 +105,6 @@ export const shelfContentPropTypes = {
   isMobile: PropTypes.bool,
   /** Gap between Shelf Items */
   gap: PropTypes.oneOf(getGapPaddingValues()),
+  /** Title of the shelf */
+  listName: PropTypes.string.isRequired,
 }