IAG analytics - getting started

caution

This page covers the current existing analytics solution. There is a new analytics solution currently in development by the Chroma/Pegasus and Sitetracking teams and the docs will be updated as soon as this solution is ready

The first step to using Chroma Analytics is to install the @iag-packages/sitetracking npm package:

npm install @iag-packages/sitetracking

This package can then be used to setup the initial event payload data that you want included with each request. The setup can work either per application or per page/flow by running the ChromaAnalytics init() method, note this can be run multiple times and it will use the latest call to set the data object to attach per event request.

import { init as AnalyticsInit } from "@iag/chroma-react-ui.components";
import { chromaTracking, ReactSiteTracking } from "@iag-packages/sitetracking";

To run the analytics init method on app or specific page load a useEffect or useLayoutEffect React hook can be utilised. In initial tests useLayoutEffectseemed to work better as this runs synchronously once React has performed all DOM mutations similar to the old componentDidMount method.

The Object inside the init method can contain any meta data and will passed along with any future events such as a button click:

info

You must pass in the imported chromaTracking function into the init function

useLayoutEffect(() => {
  AnalyticsInit({
    chromaTracking,
    chromaReactVersion: "x.x.x",
    chromaCoreDependency: "x.x.x",
    chromaAssetsDependency: "x.x.x",
    formName: "PayExcess",
  });
}, []);

The following code:

<Button primary id="primaryButton">Next</Button>

would therefore emit the following event to the chroma-analytics package:

{
  chromaReactVersion: 'x.x.x',
  chromaCoreDependency: 'x.x.x',
  chromaAssetsDependency: 'x.x.x',
  formName: 'PayExcess',
  event: {
    action: 'click',
    componentType: 'Button',
    tagName: {
      class: 'c-btn--primary',
      id: 'primaryButton',
      label: 'Next',
      name: 'Next button',
      type: 'button'
    }
  }
}

Analytics enhanced component listz

For a list of all of the chroma-react components that currently support the new analytics enhanced behaviour there is a Confluence page documenting the event requests: Table of analytics enhanced chroma components. https://confluence.iag.com.au/display/CLP/Analytics+Enhanced+Chroma+Components

Site tracking code

For this solution to work correctly your application must be configured to use some additional Site Tracking configuration. To make developers lives easier I will include that information below as it is to be used in conjunction with the Chroma solution.

info

The IAG VPN is necessary for this to work

Include the following script in your index.html to begin with:

<script>
  window.iagDataLayer = window.iagDataLayer || [];
  window.load = window.load || {};
  window.load.config = window.load.config || {};
  window.load.config.dataLayerName = "iagDataLayer";
  window.load.config.brand = "nrma"; // Brand/Tealium Profile NAME
  window.load.config.apptype = "chroma"; // eg. Journey , Brochureware, ssc
  window.load.config.appname = "chroma"; // Application name, eg mrj-la, prj-la, boat, car
  window.load.config.chromaTracking = true;
</script>
<script src="https://dev.tags.iagdev.net/load/load.js"></script>
// contact site tracking team for UAT/Prod urls

Next you will need to wrap your app in the imported sitetracking package component:

<ReactSiteTracking
  name="development"
  brand="nrma"
  environment="dev"
  product="QUOTE_CREATED"
  basePageId="/all/chroma"
  initialData={{ appNameVersion: 'local-chroma-tracking|version-1' }}
  shouldReset
>
  <App />
</ReactSiteTracking>

Update props with your application details and again ensure that you are using the IAG VPN to test.