Analytics listeners

Examples

Typescript ❤️

Fabric analytics listeners to be used by the products

Install

yarn add @atlaskit/analytics-listeners

npm

@atlaskit/analytics-listeners

Source

Bitbucket

Bundle

unpkg.com

Changelog

Latest

9.0.0

Major Changes

#117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

Patch Changes

Updated dependencies

Fabric aggregated listeners for analytics-next API

The main purpose of this component is to provide a high level abstraction of all Fabric listeners used with analytics-next API so the Products can only import this component instead of having multiple nested listeners in their code.

The following listeners are currently implemented:

Fabric Editor
Fabric elements
Atlaskit (core)
Navigation
Media
People Teams

Atlaskit (core) events may result in multiple events being fired for the same action if you have instrumented AK components with your own analytics. In this case we recommend temporarily excluding the atlaskit listener via the 'excludedChannels' prop until we have a fix for this on the backend.

Installation

  npm install @atlaskit/analytics-listeners
  # or
  yarn add @atlaskit/analytics-listeners

Using the component

Example firing an analytics-next event:

  import React from 'react';
  import {
    withAnalyticsEvents,
    createAndFireEvent,
    WithAnalyticsEventsProps
  } from '@atlaskit/analytics-next';
  import FabricAnalyticsListeners from '@atlaskit/analytics-listeners';

  export type Props = WithAnalyticsEventsProps & {
    onClick: (e) => void;
  };

  class DummyComponent extends React.Component<Props> {
    static displayName = 'DummyComponent';

    render() {
      return (
        <div id="dummy" onClick={this.props.onClick}>
          Test
        </div>
      );
    }
  }

  export const DummyComponentWithAnalytics = withAnalyticsEvents({
    onClick: createAndFireEvent('fabric-elements')({
      action: 'someAction',
      actionSubject: 'someComponent',
      eventType: 'ui',
    }),
  })(DummyComponent);

  const myOnClickHandler = (e): void => {
    console.log('component clicked');
  };

  // Pass the analyticsWebClient instance created by the Product
  // Refer to type AnalyticsWebClient from @atlaskit/analytics-listeners
  ReactDOM.render(
    <div>
      <FabricAnalyticsListeners client={analyticsWebClient}>
        <DummyComponentWithAnalytics onClick={myOnClickHandler} />
      </FabricAnalyticsListeners>
    </div>,
    container,
  );