How to use the react-tracking function in react-tracking

`/personalize/${CollectorIntentComponent.slug}`,
  `/personalize/${Artists.slug}`,
  `/personalize/${Genes.slug}`,
  `/personalize/${BudgetComponent.slug}`,
]

export interface Props {
  redirectTo?: string
  tracking?: TrackingProp
}

export interface State {
  finished: boolean
}

@track({}, { dispatch: data => Events.postEvent(data) })
export class Wizard extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      finished: false,
    }
  }

  onNextButtonPressed = (increaseBy: number, history) => {
    history.push(STEPS[STEPS.indexOf(location.pathname) + increaseBy])
  }

  onFinish = () => {
    this.setState({ finished: true })
    setTimeout(() => (window.location.href = this.props.redirectTo || "/"), 500)

import { data as sd } from "sharify"

import { ArtworkSidebarBidAction_artwork } from "__generated__/ArtworkSidebarBidAction_artwork.graphql"
import { SystemContextConsumer } from "Artsy"
import * as Schema from "Artsy/Analytics/Schema"
import track from "react-tracking"

export interface ArtworkSidebarBidActionProps {
  artwork: ArtworkSidebarBidAction_artwork
}

export interface ArtworkSidebarBidActionState {
  selectedMaxBidCents?: number
}

@track()
export class ArtworkSidebarBidAction extends React.Component<
  ArtworkSidebarBidActionProps,
  ArtworkSidebarBidActionState
> {
  state: ArtworkSidebarBidActionState = {
    selectedMaxBidCents: null,
  }

  setMaxBid = (newVal: number) => {
    this.setState({ selectedMaxBidCents: newVal })
  }

  redirectToRegister = () => {
    const { sale } = this.props.artwork
    window.location.href = `${sd.APP_URL}/auction-registration/${sale.slug}`
  }

import Link from 'redux-first-router-link';
import { FormattedMessage } from 'react-intl';
import { activeProjectSelector } from 'controllers/user';
import { PROJECT_LAUNCHES_PAGE } from 'controllers/pages';
import AddFilterIcon from 'common/img/add-filter-inline.svg';
import { GhostButton } from 'components/buttons/ghostButton';
import { ALL } from 'common/constants/reservedFilterIds';

import styles from './noFiltersBlock.scss';

const cx = classNames.bind(styles);

@connect((state) => ({
  activeProject: activeProjectSelector(state),
}))
@track()
export class NoFiltersBlock extends PureComponent {
  static propTypes = {
    activeProject: PropTypes.string.isRequired,
    tracking: PropTypes.shape({
      trackEvent: PropTypes.func,
      getTrackingData: PropTypes.func,
    }).isRequired,
    onAddFilter: PropTypes.func,
  };
  static defaultProps = {
    onAddFilter: () => {},
  };
  onClickAddFilter = () => {
    this.props.tracking.trackEvent(FILTERS_PAGE_EVENTS.CLICK_ADD_BTN_EMPTY_FILTER_PAGE);
    this.props.onAddFilter();
  };

@connect(
  (state) => ({
    btsIntegrations: availableBtsIntegrationsSelector(state),
    activeProject: activeProjectSelector(state),
    currentLaunch: launchSelector(state),
    currentFilter: activeFilterSelector(state),
  }),
  {
    showNotification,
    hideModalAction,
    unlinkIssueAction,
    linkIssueAction,
    postIssueAction,
  },
)
@track()
export class EditToInvestigateDefectModal extends Component {
  static propTypes = {
    intl: intlShape.isRequired,
    activeProject: PropTypes.string.isRequired,
    btsIntegrations: PropTypes.array.isRequired,
    data: PropTypes.shape({
      item: PropTypes.object,
      fetchFunc: PropTypes.func,
      eventsInfo: PropTypes.object,
    }).isRequired,
    showNotification: PropTypes.func.isRequired,
    hideModalAction: PropTypes.func.isRequired,
    unlinkIssueAction: PropTypes.func.isRequired,
    linkIssueAction: PropTypes.func.isRequired,
    postIssueAction: PropTypes.func.isRequired,
    currentLaunch: PropTypes.object,

tracking?: TrackingProp
  shouldAdRender?: boolean
}

interface State {
  isTruncated: boolean
  isHovered: boolean
}

interface NewsContainerProps {
  isTruncated: boolean
  marginTop?: string
  isHovered: boolean
}

@track()
export class NewsLayout extends Component {
  constructor(props: Props) {
    super(props)

    this.state = {
      isTruncated: this.props.isTruncated || false,
      isHovered: this.props.isHovered || false,
    }

    this.onExpand = this.onExpand.bind(this)
    this.trackExpand = once(this.trackExpand)
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.isHovered !== this.props.isHovered) {
      this.setState({ isHovered: nextProps.isHovered })

containerWidth: number
  disclaimer: any
  unit: any
}

interface NavArrowProps extends React.HTMLProps {
  direction: string
  isVisible?: boolean
  containerWidth: number
}

interface ResponsiveProps extends React.HTMLProps {
  containerWidth: number
}

@track()
export class CanvasSlideshow extends React.Component<
  CanvasSlideshowProps,
  any
> {
  private slider: any

  constructor(props) {
    super(props)
    this.onChangeSlide = this.onChangeSlide.bind(this)

    this.state = {
      isOnTitle: true,
    }
  }

  afterSlideChange = currentSlide => {

import { createFragmentContainer, graphql } from "react-relay"
import styled from "styled-components"

import { ArtworkSidebarClassification_artwork } from "__generated__/ArtworkSidebarClassification_artwork.graphql"
import * as Schema from "Artsy/Analytics/Schema"
import track from "react-tracking"

export interface ArtworkSidebarClassificationProps {
  artwork: ArtworkSidebarClassification_artwork
}

interface State {
  isModalOpen: boolean
}

@track()
export class ArtworkSidebarClassification extends React.Component<
  ArtworkSidebarClassificationProps,
  State
> {
  state = {
    isModalOpen: false,
  }

  @track({
    subject: Schema.Subject.Classification,
    type: Schema.Type.Link,
    context_module: Schema.ContextModule.Sidebar,
    action_type: Schema.ActionType.Click,
  })
  openModal() {
    this.setState({ isModalOpen: true })

* distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Component } from 'react';
import track from 'react-tracking';
import classNames from 'classnames/bind';
import PropTypes from 'prop-types';
import { EntitiesSelector } from 'components/filterEntities/entitiesSelector';
import { filterEntityShape } from '../propTypes';
import styles from './entitiesGroup.scss';

const cx = classNames.bind(styles);
@track()
export class EntitiesGroup extends Component {
  static propTypes = {
    entities: PropTypes.arrayOf(filterEntityShape),
    onAdd: PropTypes.func,
    onRemove: PropTypes.func,
    onChange: PropTypes.func,
    onValidate: PropTypes.func,
    errors: PropTypes.object,
    entitySmallSize: PropTypes.bool,
    tracking: PropTypes.shape({
      trackEvent: PropTypes.func,
      getTrackingData: PropTypes.func,
    }).isRequired,
    staticMode: PropTypes.bool,
    vertical: PropTypes.bool,
  };

import { Share } from "Components/Publishing/Byline/Share"
import { PartnerBlock } from "Components/Publishing/Partner/PartnerBlock"
import { Text } from "Components/Publishing/Sections/Text"
import { ArticleData } from "Components/Publishing/Typings"
import { Media } from "Utils/Responsive"
import { getArticleFullHref } from "../Constants"

interface SeriesAboutProps {
  article?: ArticleData
  color?: string
  editDescription?: any
  editSubTitle?: any
  tracking?: TrackingProp
}

@track()
export class SeriesAbout extends Component {
  public static defaultProps: Partial = {
    color: "black",
  }

  componentDidMount() {
    const textLink = document.querySelector(".SeriesAbout__description a")
    if (textLink) {
      textLink.addEventListener("click", this.onClickFooterLink)
    }
  }

  onClickFooterLink = event => {
    this.props.tracking.trackEvent({
      action: "Click",
      flow: "Partner Footer CTA",

});

const LABEL_WIDTH = 90;

const createDashboardNameValidator = (dashboardItems, dashboardItem) =>
  composeBoundValidators([
    bindMessageToValidator(validate.dashboardName, 'dashboardNameHint'),
    bindMessageToValidator(
      validate.createDashboardNameUniqueValidator(dashboardItems, dashboardItem),
      'dashboardNameExistsHint',
    ),
  ]);

@withModal('dashboardAddEditModal')
@injectIntl
@track()
@connect((state) => ({
  dashboardItems: dashboardItemsSelector(state),
}))
@reduxForm({
  form: 'addEditDashboard',
  validate: ({ name }, { dashboardItems = [], data: { dashboardItem = {} } }) => ({
    name: createDashboardNameValidator(dashboardItems, dashboardItem)(name),
  }),
})
export class AddEditModal extends Component {
  static propTypes = {
    data: PropTypes.shape({
      dashboardItem: PropTypes.object,
      onSubmit: PropTypes.func,
      type: PropTypes.string,
      eventsInfo: PropTypes.object,