Analytics

Adding analytics to a component is pretty straightforward,

First set up your analytics object in your composition method:

const { compositionFunction, component } = Composition(NavCard)(({ fields, params }) => {

const items = fields?.items.reduce(
    (acc: Parameters<typeof NavCard>[0]['items'], curr: typeof fields) => {
      return [
        {
          ...
          analytics: {
            category: 'nav-card_rectangular',
            label: title?.value || '',
            action: [cta?.text?.value, cta?.href].filter(Boolean).join(' | '),
            guid: link?.value?.id || '',
            event: 'event-click',
          },
        },
      ];
    },
    []
  );

Then import the track object from src/lib/Analytics into your component, and grab the analytics data from the composition props. After that, simply attach a handler to the correct component node, to call the track.component method and send the data to analytics:

import track from 'src/lib/Analytics';
...

const ComponentName = ({
  ...
  analytics,
}: PropsType) => {

...
  <Button
    ...
    onClick={() => track.component(analytics)}
  >
    Click Me!
  </Button>

Testing Analytics

When not in production, analytics data will be sent to the console instead of to Google. To verify that your analytics are being setup and used correctly, simply open the console, trigger the analytics method, and you should see something similar to the following:

Intro | Technical Overview | Practical Overview | Typescript | Sitecore | Definition of Done | Analytics