Menu
Menu Sheet Overlay
Search
Search Sheet

Ecommerce Events

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

    Table of contents

    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