@vizertech/nextjs-capi/src/capi.ts

NextJS 13 Wrapper for fb pixel and capi for graph v17.0 API

import { v4 as uuidv4 } from 'uuid';
import debug from './lib/debug';
import { FacebookEvent } from './types';

//Asegurarnos que el typeing de window para client side contenga fbq para eventos de pixel client only
declare global {
    interface Window {
        fbq: any;
    }
}


//pixel client only pageView event to trigger on any route change
function fbPageView(): void {
    debug('Evento Cliente: PageView');

    window.fbq('track', 'PageView');
}

//facebook custom event with capi and or pixel
function fbEvent(
    event: FacebookEvent,
    isTest: boolean = false,
    testEventCode?: string,
    enablePixel: boolean = false
) {
    const eventId = event.event_id ? event.event_id : uuidv4();

    if (enablePixel === true) {
        const pixelData = {
            data: event
        }

        window.fbq('track', event.event_name, pixelData, { eventID: eventId });
        debug(`Client Side Event: ${event.event_name}`);
        debug(`Client Side Payload: ${JSON.stringify(pixelData)}`);
        debug(`Client Side Event ID: ${eventId}`);
    }

    setTimeout(() => {
        fetch('/api/events', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(event)
        }).then((response) => {
            debug(`Server Side Event: ${event.event_name} (${response.status})`);
            debug(`Server Side Payload: ${JSON.stringify(event)}`);
        }).catch((error) => {
            debug(`Server Side Event Error: ${event.event_name} (${error.status})`);
        });
    }, 250)
}

export {
    fbEvent, 
    fbPageView
}