# How do I track a goalCompleted event when a user clicks the signup CTA?

Asked by Tommy Vu on 2024-07-09. Tags: react, tracking, goals.

Running an experiment on our signup page and the conversion goal should be the
click on the main CTA button. React SPA with `@croct/plug-react`. Which hook gives
me the tracker and what does the payload look like? Docs show `croct.track` but I
want the react way of getting the instance

## 1 answer

### Accepted answer from Priya Raghavan (2024-07-09)

`useCroct` returns the SDK instance. Call track in the click handler:

```tsx
import {useCroct} from '@croct/plug-react';

export function SignupButton() {
    const croct = useCroct();

    return (
        <button
            onClick={() => {
                croct.track('goalCompleted', {goalId: 'signup-started'});
            }}
        >
            Sign up
        </button>
    );
}
```

One ordering detail that trips people up: when you configure the experiment, the
primary goal must reference an event that is already being tracked. So ship the
track call first, let a few events flow in, then pick `signup-started` as the
goal ID in the dashboard. If you create the experiment before any events exist,
the goal has nothing to bind to.

#### Reply from Tommy Vu (2024-07-10)

Deployed the track call yesterday, events showed up, goal wired this morning.
Works. Thanks for the ordering tip, would have hit that wall for sure.