Skip to main content

Analytics

Track page events and user clicks.

Version

Installation​

NPM​

npm install @availity/analytics

Yarn​

yarn add @availity/analytics

Usage​

The <Analytics /> component wraps your app to enable tracking of user interactions and page views. For a helpful overview of how to setup these tools, read our Setting Up Logging guide.

This package works alongside @availity/analytics-core. Starting with the Setting Up Logging guide will give you a better understanding of how they work together.

Auto Tracking​

Auto tracking logs user interactions based on data-analytics-... attributes on DOM elements, eliminating the need for custom event handlers.

import React from 'react';
import Analytics from '@availity/analytics';
import { avLogMessagesApiV2 } from '@availity/api-axios';
import { AvSplunkAnalytics } from '@availity/analytics-core';

const splunkPlugin = new AvSplunkAnalytics(avLogMessagesApiV2, true);

const App = () => (
  <Analytics plugins={[splunkPlugin]}>
    <button
      type="button"
      data-analytics-action="click"
      data-analytics-my-value="123"
    >
      Button with analytics
    </button>
  </Analytics>
);

Read more about auto tracking and its limitations.

Manual Tracking​

Use the useAnalytics hook to access the analytics instance and call trackEvent() directly.

import React from 'react';
import Analytics, { useAnalytics } from '@availity/analytics';
import { avLogMessagesApiV2 } from '@availity/api-axios';
import { AvSplunkAnalytics } from '@availity/analytics-core';

const splunkPlugin = new AvSplunkAnalytics(avLogMessagesApiV2, true);

const MyComponent = () => {
  const analytics = useAnalytics();

  const handleClick = () => {
    analytics.trackEvent({
      level: 'info',
      action: 'click',
      label: 'my-button',
    });
  };

  return <button onClick={handleClick}>Track me</button>;
};

const App = () => (
  <Analytics plugins={[splunkPlugin]}>
    <MyComponent />
  </Analytics>
);

Props​

children: ReactNode​

Required. The child components to render inside the analytics provider.

plugins?: AnalyticsPlugin[]​

Array of plugins to pass to the underlying AvAnalytics class instance. Read more about analytics plugins.

pageTracking?: boolean​

Enable or disable page tracking on initialization. Default: true.

autoTrack?: boolean​

Enable or disable auto tracking on initialization. Default: true.

recursive?: boolean​

Enable or disable recursive functionality on initialization. Default: true.

attributePrefix?: string​

Customize the prefix used for data analytics attributes. Default: 'data-analytics'.

eventModifiers?: string[]​

Array of event modifiers for action type matching. Default: ['action'].

useAnalytics​

Hook giving access to the AvAnalytics instance for manual event tracking.

import { useAnalytics } from '@availity/analytics';

const Example = () => {
  const analytics = useAnalytics();

  return (
    <button onClick={() => analytics.trackEvent({ action: 'click', label: 'example' })}>
      Click Me
    </button>
  );
};

Additional Exports​

The package also exports the following for advanced use cases:

  • AnalyticsContext — The React context used by the provider, useful for testing or custom wrappers.
  • Types: AnalyticsProps, AnalyticsPlugin, AnalyticsEvent, AnalyticsContextValue, TrackEventOptions