Track Specific Events and Conversions to Gain Insights Beyond Standard Analytics

Posted in tutorials

To gain insights beyond standard analytics, you track specific events and conversions using fullres. Let's say you have a subscribe button on your site, and you want to track a) when the button is clicked, and b) when the user successfully subscribes. Here is how you can implement event tracking in a NextJS application.

We are going to assume that you have already completed the basic fullres install.

Attach an event to your Subscribe Button

Import fullres into your Subscribe Button component or page:

import { trackEvent } from 'fullres-nextjs';

Within your click handler on the button, trigger `trackEvent`:

import { trackEvent } from 'fullres-nextjs';

const SubscribeButton = ({ label }) => {
  const handleClick = () => {
    trackEvent('subscribe_button_click', { position: 'Inline Post' });
  };

  return <button onClick={handleClick}>{label}</button>;
};

export default SubscribeButton;

The relevant piece of code here is just this part:

trackEvent('subscribe_button_click', { position: 'Inline Post' });

The `position` property and "Inline Post" string can be whatever makes the most sense for your implementation. With what we are doing here, I want to track the various button positions on the page.

Because my Subscribe Button is a Component, I would then include it in my post template at the bottom of each post with the following code:

<SubscribeButton label="Subscribe" />

But maybe your Subscribe Button is just inline in the post template in which case you would just integrate the "trackEvent" portion into your click handler.

This is what my subscribe button looks like. If you open up dev tools and then the Network tab, you will be able to see the events trigger and send to fullres each time you click on this button below.