Chroma Analytics

Allows users to fire analytics events from Chroma components to the site tracking function.

info

If you are not familiar with IAG solution to analytics/site-tracking please read the getting started guide

Import

import { AnalyticsProvider } from '@chroma/analytics'

In order to use the <AnalyticsProvider /> you must wrap your application with this component and then run the init command, however with the MFE setup you may be exposing a single component and unfortunately due to the way React providers work a minor update will be required. The site tracking team's package chromaTracking will also be needed, please contact Richard Karlsson for more information about this package.

Without MFEs

If you are building a non-MFE app simply wrap your application with the <AnalyticsProvider /> like this:

import { AnalyticsProvider } from "@iag/chroma-react-ui.components";
import { BrandProvider } from "@chroma/brand-provider";
import { App } from "./App";

ReactDOM.render(
  <React.StrictMode>
    <AnalyticsProvider>
      <BrandProvider brand={brand}>
        <App />
      </BrandProvider>
    </AnalyticsProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Next, inside <App /> you will need to initialise Chroma Analytics:

import { AnalyticsContext, Button } from '@iag/chroma-react-ui.components'
import { chromaTracking } from '@iag-packages/sitetracking'

function App() {
  const analyticsContextValue = useContext(AnalyticsContext)
  const analyticsObject = {
    brandName: 'NRMA',
    formName: 'My App',
    chromaTracking
  }
  /*
    to test events are firing replace the site tracking function in the brandObject above with:
    chromaTracking: (ae) => console.log(ae, 'chroma tracking')
  */

  useEffect(() => {
    // initialise your analytics data with an object that will be merged with each component event
    // before sending to the site tracking script
    analyticsContextValue.init(analyticsObject)
  }, [])
  return (
    <>
      <p>This is my content</p>
      <Button onClick={() => console.log('click)}>Click me</Button>
    </>
  )
}

export default App

With MFEs

First you will need to wrap the exposed component with <AnalyticsProvider><MFEComponent /></AnalyticsProvider> but if the contents of your component are directly in this top level you will need to extract that out to another component.

For example this:

import { AnalyticsProvider, BrandProvider, Button } from "@iag/chroma-react-ui.components";

function MyMFE() {
  return (
    <AnalyticsProvider>
      <BrandProvider brand={brand}>
        <p>This is my content</p>
        <Button onClick={() => console.log('click)}>Click me</Button>
      </BrandProvider>
    </AnalyticsProvider>
  )
}

Would need to become something like this:

import { AnalyticsProvider, AnalyticsContext, BrandProvider, Button } from "@iag/chroma-react-ui.components";
import { chromaTracking } from '@iag-packages/sitetracking'

function MyMFE() {
  return (
    <AnalyticsProvider>
      <BrandProvider brand={brand}>
        <MyInnerComponent />
      </BrandProvider>
    </AnalyticsProvider>
  )
}

function InnerComponent() {
  const analyticsContextValue = useContext(AnalyticsContext)
  const analyticsObject = {
    brandName: 'Coles',
    formName: 'MFE Guest 1',
    chromaTracking
  }
  /*
    to test events are firing replace the site tracking function in the brandObject above with:
    chromaTracking: (ae) => console.log(ae, 'chroma tracking')
  */

  useEffect(() => {
    analyticsContextValue.init(analyticsObject)
  }, [])
  return (
    <>
      <p>This is my content</p>
      <Button onClick={() => console.log('click)}>Click me</Button>
    </>
  )
}

export default MyMFE

Now any analytics enabled Chroma components inside your app such as the <Button /> above will call the chromaTracking function with the init object as well as the Chroma component event details appended.

Additional configuration

In order for this solution to work there is some additional script import and configuration necessary to use the iagDataLayer. Again please contact Richard Karlsson for more information about what is needed.

Additional setup information can be accessed here.