Goals Google Analytics

Avatar
  • updated
  • Completed

How can I set up goals to any button, including buttons in the feedback form?

Avatar
Support Team

You can set up GA statistics goals using the following component code: 

import React from 'react';
import ReactGA from 'react-ga';
import { useOverrides } from '@quarkly/components';
import { Box, Button } from '@quarkly/widgets';

const overrides = {
  'Button': {
    kind: 'Button',
  },
};

ReactGA.initialize('UA-6450776-3', {
  titleCase: false,
  gaOptions: {
    name: 'myTracker',
    category: 'preorder',
    userId: 123
  }
});

const GaButton = ({ pageName, ...props }) => {
  const { override, rest } = useOverrides(props, overrides);
  
  const gaPageview = ReactGA.pageview(pageName);
  
  
const ga = ReactGA.ga();
const pageview = () => ga('send', 'event', 'preorder');

  return (
    <box {...rest}="">
      <button onsubmit="{pageview}" {...override('button')}="">
        {override('Button').children || 'Some Text'}
      </button>
    </box>
  )
};

export default Object.assign(GaButton, {
  propInfo: {
    pageName: {
      control: 'input'
    }
  },
  overrides,
});;

Where UA-0000000-0 needs to be replaced with your counter number. After that, you need to replace the goal values:
ga("send", "event", "category", "action", "label", "value")
where "category" is the category of your goal, "action" is the action of your goal, "label" is the label, and "value" means value. 

These data you need to replace with your custom ones.

To read the full documentation on the component, follow this link: https://www.npmjs.com/package/react-ga#reactgaga 

To learn how to add your component, view this video:  

Avatar
Support Team
  • Completed