NextJS 13 Wrapper for pixel and CAPI v16 and v17.

Facebook Conversion API para NextJS

Wrapper simple para eventos de cliente y servidor con Next13. Eventos soportados

• AddToCart
• AddToWishlist
• CompleteRegistration
• Purchase
• FindLocation
• Lead
• Contact
• Search
• ViewContent

Install

NPM

npm install @vizertech/nextjs-capi

Yarn

yarn add @vizertech/nextjs-capi

1. Crea una ruta en next API llamada events

pages/api/events.ts|js

import { fbEventsHandler } from '@vizertech/nextjs-capi';

export default fbEventsHandler;

Completa toda la informacion en un .env usando como ejemplo .env.example

.env

FB_ACCESS_TOKEN=accessToken
NEXT_PUBLIC_GRAPH_VERSION=v17.0
NEXT_PUBLIC_PIXEL_ID=pixelId
NEXT_PUBLIC_DEBUG=true

2. Cargar el pixel en el frontend (opcional)

Agregar el provider y Script en _app

pages/_app.ts|js|tsx|jsx

import { FBPixelScript, FBPixelProvider } from '@vizertech/nextjs-capi';

<>
  <FBPixelScript />
  <FBPixelProvider>
    <Component {...pageProps} />
  </FBPixelProvider>
</>

3. Envia los eventos desde cualquiero parte de tu aplicacion, usando los typings adecuados para cada evento

import { fbEvent } from '@vizertech/nextjs-capi';

//use on client side effect and browser event handlers only
fbEvent({
    event_name: '',
    event_time: 24234423, //unix time
    action_source: "website", //TODO: ver que valores son estos,
    event_id?: '',
    event_source_url: 'https://...',
    currency: 'mxn',
    custom_data?: {
        content_type?: 'product_group',
        currency?: 'MXN',
        value?: 100,
        contents?: [
            { id: 1, quantity: 1, item_price: 100 }
        ]
    },
    user_data: {
        client_ip_address: '',
        ct?: [''], //hash
        external_id?: [''], //hash
        fn?: [''], //hash
        ph?: [''], //hash
        zp?: [''], //hash
        client_user_agent: [''], //hash
        st?: [''], //hash
        country?: [''], //hash
        em?: [''], //hash
        fbc?: '',
        fbp?: ''
    },
    test_event_code?: '' //SEND ONLY FOR TEST EVENTS MODE
});

4. Agradecimiento especial a @RivercodeAB (ISC) por la idea original de este paquete que permitió actualizar dependencias, actualizar las versiones de Graph API de Meta y establecer types mas acorde al schema mas actual y enviarlo como json en lugar de formData, adicionales a algunos helpers utiles.