@vizertech/nextjs-capi/README.md

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

# 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;
```

### Completa toda la informacion en un .env usando como ejemplo .env.example
.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)

### Agregar el provider y Script en _app
pages/_app.ts|js|tsx|jsx
```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
```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.