Refactoring

Author: ovdahlberg

README.md

@@ -1,8 +1,8 @@
-Facebook Conversion API for Next.js
+Facebook / Meta Conversion API for Next.js
 
 > Next.js wrapper for [Facebook's Conversion API](https://developers.facebook.com/docs/marketing-api/conversions-api/)
 
-# Facebook Conversion API for Next.js
+# Facebook / Meta Conversion API for Next.js
 This package helps you implement Facebook Conversion API in Next.js.
 
 It includes an API route handler for sending server-side events to Facebook and client-side functions to trigger the events.
@@ -66,22 +66,24 @@ Trigger the events you need. For example, add to cart or purchase events.
 ```jsx
 import { fbEvent } from '@rivercode/facebook-conversion-api-nextjs';
 
-fbEvent({
-  eventName: 'ViewContent', // ViewContent, AddToCart, InitiateCheckout or Purchase
-  eventId: 'eventId', // optional, unique event id's will be generated by default
-  emails: ['email1', 'email2'], // optional
-  phones: ['phone1', 'phone2'], // optional
-  firstName: 'firstName', // optional
-  lastName: 'lastName', // optional
-  country: 'country', // optional
-  city: 'city', // optional
-  zipCode: 'zipCode', // optional
-  products: [{ // optional
-    sku: 'product123',
-    quantity: 1,
-  }],
-  value: 1000, // optional
-  currency: 'USD', // optional
-  enableStandardPixel: false // default false (Require Facebook Pixel to be loaded, see step 2)
-});
+useEffect(() => {
+    fbEvent({
+        eventName: 'ViewContent', // ViewContent, AddToCart, InitiateCheckout, Purchase etc.
+        eventId: 'eventId', // optional, unique event id's will be generated by default
+        emails: ['email1', 'email2'], // optional
+        phones: ['phone1', 'phone2'], // optional
+        firstName: 'firstName', // optional
+        lastName: 'lastName', // optional
+        country: 'country', // optional
+        city: 'city', // optional
+        zipCode: 'zipCode', // optional
+        products: [{ // optional
+            sku: 'product123',
+            quantity: 1,
+        }],
+        value: 1000, // optional
+        currency: 'USD', // optional
+        enableStandardPixel: false // default false (Require Facebook Pixel to be loaded, see step 2)
+    });
+}, []);
 ```

src/api/graph/graph-api.ts src/api/graph-api.tssrc/api/graph/graph-api.ts renamed to src/api/graph-api.ts

@@ -1,4 +1,7 @@
-import { Arguments } from './graph-api.types';
+type Arguments = {
+  endpoint: string
+  body: any
+};
 
 /**
  * Facebook Graph API client.

src/api/graph/graph-api.types.ts

@@ -10,9 +10,7 @@ const FBPixelProvider = ({ children }: Props) => {
   const router = useRouter();
 
   useEffect(() => {
-    if (!router.asPath.includes('?')) {
-      fbPageView();
-    }
+    fbPageView();
 
     router.events.on('routeChangeComplete', fbPageView);
     return () => {

src/api/graph/index.ts

@@ -1,6 +1,6 @@
 import { v4 as uuidv4 } from 'uuid';
 import debug from './utils/debug';
-import FBEventType from '../types';
+import { FBEvent } from './types';
 
 declare global {
   interface Window {
@@ -25,7 +25,7 @@ const fbPageView = (): void => {
  * @param event
  * @constructor
  */
-const fbEvent = (event: FBEventType): void => {
+const fbEvent = (event: FBEvent): void => {
   const eventId = event.eventId ? event.eventId : uuidv4();
 
   if (event.enableStandardPixel) {

src/components/FBPixelProvider.tsx

@@ -1,7 +1,27 @@
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { getClientIpAddress, getClientFbp, getClientFbc } from '../utils/request';
 import { sendServerSideEvent } from '../services/server-side-events';
-import { Arguments } from './event-handler.types';
+
+type Arguments = {
+  eventName: string
+  eventId: string
+  emails?: Array<string> | null
+  phones?: Array<string> | null
+  firstName?: string
+  lastName?: string
+  country?: string
+  city?: string
+  zipCode?: string
+  products: {
+    sku: string
+    quantity: number
+  }[]
+  value?: number
+  currency?: string
+  userAgent: string
+  sourceUrl: string
+  testEventCode?: string
+};
 
 /**
  * Facebook Conversion API Event Handler for Next.js.

src/conversion-api.ts

@@ -1,7 +1,34 @@
 import { FormData } from 'formdata-node';
-import graphApi from '../../api/graph';
-import { Arguments, Response } from './server-side-events.types';
-import { sha256Hash } from '../../utils/hash';
+import graphApi from '../api/graph-api';
+import { sha256Hash } from '../utils/hash';
+
+type Arguments = {
+  eventName: string
+  eventId: string
+  emails?: Array<string> | null
+  phones?: Array<string> | null
+  firstName?: string
+  lastName?: string
+  country?: string
+  city?: string
+  zipCode?: string
+  products: {
+    sku: string
+    quantity: number
+  }[]
+  value?: number
+  currency?: string
+  fbp: string
+  fbc: string
+  ipAddress: string
+  userAgent: string
+  sourceUrl: string
+  testEventCode?: string
+};
+
+type Response = {
+  events_received?: number
+};
 
 /**
  * Send server side event to Facebook Graph API.