Analytics

Analytics Setup

Analytics is key to understanding your users and measuring the effects of your actions. We have included standard analytics tools in BOB Frontend to let you track users and get valuable insights into their behavior. This will help you build better products and increase your conversion rates.

Google Analytics

The root layout of the application has Google Analytics enabled by default. Just add your Google Analytics ID (GA ID) to your .env file:

GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

Google Tag Manager

The root layout also has Google Tag Manager enabled by default. Add your Google Tag Manager ID (GTM ID) to your .env file:

GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXXX

Sending Events to Google Tag Manager

To send an event to Google Tag Manager, import this function into your component:

import { sendGTMEvent } from '@next/third-parties/google';

Example – sending an event when a button is clicked:

<Button
  type="submit"
  onClick={() => sendGTMEvent({ event: 'buttonClicked', value: 'SubscribeTop' })}
>
  Subscribe Now
</Button>

Facebook Pixel

A custom Facebook Pixel component is ready to use. Add your Facebook Pixel ID to your .env file:

FACEBOOK_PIXEL_ID=XXXXXXXXXX

Sending Events to Facebook Pixel

To send events to Facebook Pixel in your app, use the trackFacebookPixelEvent function. Example – tracking a product page view:

export function ProductPage() {
  useEffect(() => {
    // Track view content event when the product page loads
    trackFacebookPixelEvent(FacebookPixelEvents.ViewContent, {
      content_name: 'Sample Product',
      content_type: 'product',
      content_ids: ['123'],
      value: 9.99,
      currency: 'USD'
    });
  }, []);
 
  return <div>Product Page</div>;
}

More details about Facebook Pixel can be found in the official documentation.

X Pixel (formerly Twitter Pixel)

A custom X Pixel component is also available by default. Add your X Pixel ID to your .env file:

X_PIXEL_ID=XXXXXXXXX

Sending Events to X Pixel

You can send events to X Pixel using the trackXPixelEvent function. Example – tracking a product page view:

export function ProductPage() {
  useEffect(() => {
    // Track page view event when the product page loads
    trackXPixelEvent(XPixelEvents.PageView, {
      content_name: 'Sample Product',
      content_type: 'product',
      value: 9.99,
      currency: 'USD'
    });
  }, []);
 
  return <div>Product Page</div>;
}

This allows you to track traffic and important custom events like Purchases, Leads, etc.

You can find the full setup guide in X Pixel Documentation under: Event Code Implementation.