How to use react-tracking - 10 common examples

const QuizReview = ({ quizAttemptId, hideTitle = false }) => {
  const [showReviewForConcept, setShowReviewForConcept] = useState(null);
  const tracking = useTracking();

  const { error, data } = useQuery(QUIZ_ATTEMPT_QUERY, {
    fetchPolicy: 'cache-and-network',
    variables: { id: quizAttemptId },
  });

  // Show modal with questions for a specific concept
  const showConceptReview = result => {
    setShowReviewForConcept(result.concept);
    tracking.trackEvent({
      page: 'QuizReview',
      quizAttemptId,
      action: 'STUDENT_REVIEW_CONCEPT',
      concept: result.concept,
      conceptScore: result.score,
      conceptPredictedScore: result.predictedScore,

export const ImageCarouselEmbedded = () => {
  const tracking = useTracking()
  const screenDimensions = useScreenDimensions()
  // The logic for cardHeight comes from the zeplin spec https://zpl.io/25JLX0Q
  const cardHeight = screenDimensions.width >= 375 ? 340 : 290

  const embeddedCardBoundingBox = { width: screenDimensions.width, height: isPad() ? 460 : cardHeight }

  const {
    images,
    embeddedFlatListRef: embeddedFlatListRef,
    embeddedImageRefs: embeddedImageRefs,
    dispatch,
    imageIndex,
  } = useContext(ImageCarouselContext)

  const measurements = getMeasurements({ images, boundingBox: embeddedCardBoundingBox })
  const offsets = measurements.map(m => m.cumulativeScrollOffset)

`/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,
  };