# Tracking

# Page Tracking

Tracking pages views is on by default. It can alose be turn on by adding the tracking prop to the VariateProvider and setting it to true.

# Custom events

Custom tracking events can be sent from any Variate component by calling the track method on Variate. Event types can be either a revenue or custom type and can have extra data passed to them.

...
import React from 'react';
import { useVariate } from '@variate/react';
...

const Hero = ({ defaultContent }) => {

  const { variables, track } = useVariate('HomeHero', defaultvariables);
  
  return (
    <section>
      <h1>{variables.headline}</h1>
      <button onPress={() => track({
        name: 'Purchases',
        type: 'revenue',
        value: {
          amount: 1000 
        },
      })}>Track this</button>
    </section>
  )
}

Hero.defaultProps = {
  defaultContent: {
    headline: 'This is the original boring headline, it would be awesome if we tested it!'
  }
}

The VariateContext is available in the rare case you need to track events outside a Variate component.

...
import React, { useContext }from 'react';
import { VariateContext } from '@variate/react';
...

const StrangeComponent = ({ defaultContent }) => {

  const { variate } = useContext(VariateContext);
  
  return (
    <section>
      <button onPress={() => variate.track({
        name: 'clicked_strange',
        type: 'custom',
      })}>Track this</button>
    </section>
  )
}