Menu
Menu Sheet Overlay
Search
Search Sheet

      Ecommerce Events

      Below is a list common analytics events that are part of Google Enhanced Ecommerce Analytics.

      Product impression events

      A product impression event occurs when a user has seen a product within a list of products.

      Receiving product impression events

      Add this productImpressionEvent function override to your analytics connector.

          import GoogleAnalytics from 'progressive-web-sdk/dist/analytics/connectors/google-analytics/connector'
      
          import {
              getProductById
          } from 'progressive-web-sdk/dist/store/products/selectors'
      
          let delayImpressionTimer
      
          const nonInteraction = {
              nonInteraction: true
          }
      
          export default class MyGA extends GoogleAnalytics {
              constructor() {
                  super('My GA', 'myTrackerName', {
                      ecommerceLibrary: 'ec'          // This should be either 'ec' or 'ecommerce'
                  })
              }
      
              productImpressionEvent(payload, state) {
                  const product = getProductById(payload.productId)(state).toJS()
                  this.ecAddImpressionAction(product)
      
                  clearTimeout(delayImpressionTimer)
      
                  delayImpressionTimer = setTimeout(() => {
                      this.send(
                          EVENT_ACTION.productImpression,
                          ['send', 'event', 'Ecommerce', 'Product Impressions', nonInteraction]
                      )
                  }, 1000)
              }
          }

      Note: Above example is tailored for Google Analytics

      payload should have the following structure:

      payload = {
          productId
      }

      Why is there a delay impression timer?

      Although GA batches tracker calls as much as possible, we found that it is sending off the product impression tracker too early. This caused unnecessary network calls to the GA tracker. To reduce the number of network calls, we set a delay on the product impression tracker so that it will wait for the user to pause their scrolling before sending off a batch of product impressions.

      Dispatching product impression events from the PWA using React Waypoint

      To determine when a product has been viewed, we need to know when a product tile has entered the user’s viewport. We use an open source library called React Waypoint to help us with boundary detection. The package is not installed by default when your project is generated, so will need to run the following command to include this package into your project.

      npm install react-waypoint --save

      Implement Waypoint around your entire product tile. We recommend using the offset props in the Waypoint component.

      import {sendProductImpressionAnalytics} from 'progressive-web-sdk/dist/analytics/actions'
      import Waypoint from 'react-waypoint'
      
      ...
              <Waypoint
                  topOffset="20%"
                  bottomOffset="20%"
                  onEnter={() => {
                      sendProductImpression(id)
                  }}
              >
                  <div>
                      ... Product tile content ...
                  </div>
              </Waypoint>
      
      const mapDispatchToProps = {
          ...
          sendProductImpression: sendProductImpressionAnalytics
      }

      Validating that product impression events are working

      Validate GA tracking has the following values in the console log:

      hitType                                                 event
      eventCategory                                           Ecommerce
      eventAction                                             Product Impressions
      nonInteraction                                          1
      
      ec:impression list "1" product "1" id                   Product ID 1
      ec:impression list "1" product "1" name                 Product Name 1
      
      // If more than one product impression is included in the batch
      ec:impression list "1" product "2" id                   Product ID 2
      ec:impression list "1" product "2" name                 Product Name 2

      Product click events

      Receiving product click events

      Add this productClickEvent function override to your analytics connector.

          import GoogleAnalytics from 'progressive-web-sdk/dist/analytics/connectors/google-analytics/connector'
      
          import {
              getProductById
          } from 'progressive-web-sdk/dist/store/products/selectors'
      
          export default class MyGA extends GoogleAnalytics {
              constructor() {
                  super('My GA', 'myTrackerName', {
                      ecommerceLibrary: 'ec'          // This should be either 'ec' or 'ecommerce'
                  })
              }
      
              productClickEvent(payload, state) {
                  const product = getProductById(payload.productId)(state).toJS()
      
                  product.position = payload.position
                  this.ecAddProduct(product)
      
                  this.ecSetAction('click', {list: payload.productListName})
      
                  return ['send', 'event', 'Ecommerce', 'Product Click']
              }
          }

      Note: The example above is tailored for Google Analytics

      payload should have the following structure:

      payload = {
          productId,
          productListName,
          position
      }

      Dispatching product click events from the PWA

      Build an analytics action and insert the following web/app/utils/analytics/actions.js

      import {createActionWithAnalytics} from 'progressive-web-sdk/dist/utils/action-creation'
      
      export const productClickAnalytics = createActionWithAnalytics(
          'Send product click analytics',
          [],
          'productClick',
          (productId, productListName, position) => ({productId, productListName, position})
      )
      import {productClickAnalytics} from '../utils/analytics/actions'
      
      ...
          <ProductTile
              onClick={() => {
                  sendProductClickAnalytics(productId, categoryTitle, idx + 1)
              }}
          />
      
      const mapDispatchToProps = {
          ...
          productClickAnalytics
      }

      Verifying that product click events are working

      Verify that GA tracking shows the following values in the console log:

      hitType                                                 event
      eventCategory                                           Ecommerce
      eventAction                                             Product Click
      
      ec:action                                               click
      ec:product "1" id                                       Product ID 1
      ec:product "1" name                                     Product Name 1

      Product detail events

      Receiving product detail events

      Add this productDetailEvent function override to your analytics connector.

          import GoogleAnalytics from 'progressive-web-sdk/dist/analytics/connectors/google-analytics/connector'
      
          import {
              getProductById,
              getCurrentProductId
          } from 'progressive-web-sdk/dist/store/products/selectors'
      
          const nonInteraction = {
              nonInteraction: true
          }
      
          export default class MyGA extends GoogleAnalytics {
              constructor() {
                  super('My GA', 'myTrackerName', {
                      ecommerceLibrary: 'ec'          // This should be either 'ec' or 'ecommerce'
                  })
              }
      
              productDetailEvent(payload, state) {
                  const product = getProductById(getCurrentProductId(state))(state).toJS()
                  this.ecAddProductAction('detail', product)
      
                  return ['send', 'event', 'Ecommerce', 'Product Detail']
              }
          }

      Note: The above example is tailored for Google Analytics

      payload should be null

      Dispatching product detail events from a PWA

      Product detail events should be dispatched when the user is viewing a product details page. The best place to dispatch this event is in the initProductDetailsPage component, web/app/containers/product-details/action.jsx near the end of the API call.

      import {sendProductDetailAnalytics} from 'progressive-web-sdk/dist/analytics/actions'
      ...
      export const initProductDetailsPage = (url, routeName, {basketItemId}) => (dispatch, getStore) => {
          ...
          dispatch(sendProductDetailAnalytics(routeName))
      }
      

      Verifying that product detail events are working

      Verify that GA tracking shows the following values in the console log:

      hitType                                                 event
      eventCategory                                           Ecommerce
      eventAction                                             Product Detail
      
      ec:action                                               detail
      ec:product "1" id                                       Product ID 1
      ec:product "1" name                                     Product Name 1

      IN THIS ARTICLE:

      Feedback

      Was this page helpful?