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-capiYarn
yarn add @vizertech/nextjs-capi1. 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=true2. 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
});