@mrporter/inseason-analytics

In Season Analytics Module

This module aims to provide a single point of interaction for developers implementing analytics in front end applications.

Setup

Get the goods: npm install --save @mrporter/inseason-analytics

Import the functions you need (for example): import { trackEvent, trackPage } from '@mrporter/inseason-analytics';

When you import this module, it checks behind the scenes that the Web Analytics library has been loaded in, and NAP.WebAn is available on the page. If not, it fetches the script.

Event and Page Tracking

There are two tracking functions provided. These functions can be used safely before the the Web Analytics library is available, as calls are stored in a queue and passed to the Web Analytics functions when they become available.

trackEvent(eventData)

This calls the Web Analytics NAP.WebAn.trackEvent function, and adds the event to the digital data object's event array. eventData is an object - the format of each of the events can be found on the web analytics confluence page.

Example usage:

trackEvent({
    eventInfo: {
        eventName: 'add to cart',
        effect: 'update cart'
    },
    category: {
        primaryCategory: 'ecommerce',
        subCategory: 'productPage'
    },
    attributes: {
        pageNum: 1
    },
    item: [{ ... }]
});

(item is in the same format as the product array below)

trackPage()

This calls the Web Analytics NAP.WebAn.trackPage function, and sends the digital data object (excluding the event array) from the current page. Use this on an initial page load after adding anything necessary to the digital data object, or at a relevant time in a single page application.

'Digital Data Object' Manipulation

This digital data object lives on the window and has up to six keys in the following format:

window.digitalData = {
    page: { ... }, // page information (every page)
    user: { ... }, // user data (every page)
    cart: { ... }, // where a cart is shown
    product: [{ ... }], // on a product page (this is an array that contains one item)
    transaction: { ... }, // on the order confirmation page
    wishlist:{ ... } // on the wishlist page
}

Site Furniture sets some of the user and page data where it is consistent. The following methods merge more data into the digital data object, without replacing the values set by site furniture (unless you explicitly overwrite a value). In each case, newProps is an object containing the data that you wish to add to the digital data object.

setPage(newProps)

The specification for the page object can be found here. Site Furniture will have set the following properties:

• pageInfo.sysEnv
• pageInfo.language
• pageInfo.geoRegion
• pageInfo.destinationURL
• pageInfo.referringURL
• attributes.businessName
• attributes.region
• attributes.currencyCode
• attributes.externalCampaign
• attributes.internalCampaign

setPage can then be called in the following format:

setPage({
    pageInfo: {
        pageName,
        environment,
        pageType,
        primaryCategory,
        subCategory1,
        subCategory2
    },
    attributes: {
        featuresList // check the page level spec for this, probably not needed
    }
});

setUser(newProps)

The specification for the user object can be found here.

Site Furniture will set this on page load. If your app changes user state you can update the data object using this function.

Example usage:

setUser({
    profileInfo: {
        // these both come from seaview - not currently available in MRP
        profileId,
        returningStatus
    },
    attributes: {
        status,
        accountID,
        customerCategory,
        customerClass,
        gender,
        preferences: [ designerList ] // this is a 'nice to have'
    }
});

setProduct(newProps)

On the product page, there is an array called product which only contains one element, which is an object representing the product on that page. setProduct updates that product object.

Example usage:

setProduct({
    productInfo: {
        productID,
        sku,
        productName,
        manufacturer,
        manufacturerID
    },
    category: {
        primaryCategory,
        subcategory1,
        subcategory2
    },
    quantity,
    price: {
        currency,
        baseFullPrice,
        basePrice
    },
    attributes: {
        categoryIdList,
        promotionsList,
        saleFlag,
        discountPercent,
        productStock,
        alertsList,
        productFindingMethod
    }
});

The following three objects contain an array called item, which are all of the items within that cart, order confirmation page, or wishlist repsectively. Passing a new item array into this object using these methods will overwrite a previous array, rather than merging with it.

setCart(newProps)

setCart updates the cart object. Specification

setTransaction(newProps)

setTransaction updates the transaction object. Specification

setWishlist(newProps)

setWishlist updates the wishlist object. Specification