Tracking pixels

Implementing tracking pixels is essential for the growth of your SaaS. They allow you to create custom audiences of users, track user behavior, and measure the effectiveness of your marketing campaigns.

They are also crucial for retargeting campaigns, allowing you to show ads to users who have visited your site but not yet converted.

I currently support two pixels out of the box:

• Facebook
• Google Tag Manager

Support for more pixels is planned for the future.

Facebook Pixel

The tracking script for Facebook can be found in the @/lib/pixels/facebook.tsx file.

Environment variables

Add your Facebook Pixel ID to your environment variables.

.env
NEXT_PUBLIC_FACEBOOK_PIXEL_ID="your pixel id"

Enable site-wide tracking

To enable the Facebook pixel, we just need to import the component and add it within the <SessionProvider> provider.

Simply go to @/app/providers.tsx and add the following code:

@/app/providers.tsx
import { FacebookPixelScript } from "@/lib/pixels/facebook";

<SessionProvider>
    <Toaster
    richColors
    position="bottom-right"
    expand={false}
    theme={theme === "dark" ? "light" : "dark"}
    />

    <FacebookPixelScript />     // Add this component inside <SessionProvider>

    {children}
</SessionProvider>

Enable custom events

You can track any custom goal or event you like by importing and calling the facebookEvent() function which can be found in the @/lib/pixels/facebook.tsx file.

More details on how Facebook event tracking works can be found here.

Here's an example of how you can track when someone clicks on a button to start a checkout process:

example.tsx
import { trackFacebookEvent } from "@/lib/pixels/facebook";

trackFacebookEvent('Purchase', {currency: "USD", value: 30.00});

You could wrap this into a function and use it whenever your logic requires.

const handlePurchase = () => {
    // Your checkout logic here
    trackFacebookEvent('Purchase', {currency: "USD", value: 30.00});
}

Finally, you can render a button that calls this function when clicked.

<Button onClick={handlePurchase}>Buy Now</Button>

Google Tag Manager

Environment variables

Add your GTM ID to your environment variables.

.env
NEXT_PUBLIC_GOOGLE_GTM_ID="your gtm id"

Enable site-wide tracking

To enable site-wide GTM support, we need to import the GoogleTagManager component and add it within our <SessionProvider> provider.

Simply go to @/app/providers.tsx and add the following code:

@/app/providers.tsx
import { GoogleTagManager } from "@next/third-parties/google";

<SessionProvider>
    <Toaster
    richColors
    position="bottom-right"
    expand={false}
    theme={theme === "dark" ? "light" : "dark"}
    />

    // You can have both pixels enabled at the same time
    <FacebookPixelScript />
    <GoogleTagManager gtmId={`${process.env.NEXT_PUBLIC_GOOGLE_GTM_ID}`} />

    {children}
</SessionProvider>

Enable custom events

To track custom events with GTM, you can simply import the sendGTMEvent component and call it with the event name and any additional data you want to send.

example.tsx
import { sendGTMEvent } from '@next/third-parties/google'

<Button onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'xyz' })}>
    Send Event
</Button>