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
``bash
npm install @vizertech/nextjs-capi
`

Yarn
`bash
yarn add @vizertech/nextjs-capi
`

1. Crea una ruta en next API llamada events

pages/api/events.ts|js

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

export default fbEventsHandler;
`

$3

.env

`dotenv
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)

$3


pages/_app.ts|js|tsx|jsx
`jsx
import { FBPixelScript, FBPixelProvider } from '@vizertech/nextjs-capi';

<>





`

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


`jsx
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.