@atlaskit/analytics-next

Creating Custom Analytics Events

This feature allows developers to create custom analytics events. The code sample demonstrates how to create a new UIAnalyticsEvent with specific payload attributes and log it to the console.

const { AnalyticsListener, UIAnalyticsEvent } = require('@atlaskit/analytics-next');

const handleClick = () => {
  const event = new UIAnalyticsEvent({
    payload: {
      action: 'clicked',
      actionSubject: 'button',
      attributes: {
        componentName: 'MyButton',
        packageName: '@atlaskit/analytics-next',
        packageVersion: '1.0.0'
      }
    }
  });
  console.log(event);
};

handleClick();

Tracking User Interactions

This feature allows developers to track user interactions with components. The code sample shows how to wrap a button component with analytics events, so that a custom event is fired when the button is clicked.

const { withAnalyticsEvents } = require('@atlaskit/analytics-next');

const Button = ({ createAnalyticsEvent }) => (
  <button
    onClick={() => {
      const event = createAnalyticsEvent({
        action: 'clicked',
        actionSubject: 'button'
      });
      event.fire('atlaskit');
    }}
  >
    Click me
  </button>
);

const TrackedButton = withAnalyticsEvents()(Button);

Managing Analytics Contexts

This feature allows developers to manage analytics contexts, providing additional metadata for analytics events. The code sample demonstrates how to wrap a component with an AnalyticsContext to include contextual data.

const { AnalyticsContext } = require('@atlaskit/analytics-next');

const MyComponent = () => (
  <AnalyticsContext data={{ componentName: 'MyComponent' }}>
    <button onClick={() => console.log('Button clicked')}>Click me</button>
  </AnalyticsContext>
);