## Concepts
The Meta Pixel / Facebook Pixel is basically a tool used to collect users' data that interacts with the website to make the Facebook advertisements more effective by targeting those Advertisements to look alike users from those who already showed interest on the website by taking actions like viewing pages, adding products to carts, purchasing and other relevant actions, those actions are called events.
Here are the Facebook standard events, and an explanation of when to trigger then.
[Specifications for Meta Pixel Standard Events | Meta Business Help Center](https://www.facebook.com/business/help/402791146561655?id=1205376682832142)
The pixel is a piece of code inserted on the website to track those events, sometimes for various reasons this pixel might not send the events, that’s why you can integrate the Conversion API (CAPI) which is a server-to-server integration that allows transferring data from a server like 29Next to Facebook’s servers.
## Integration
To integrate the Facebook Pixel in the code, follow the steps below:
1. Insert this pixel code snippet inside the `<head>` element, or use Google Tag Manager (GTM) for this
> [!attention]
> Replace the YOUR_PIXEL_ID text with your pixel ID
```html
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
```
2. Insert the code snippet inside the beginning of your `<body>` element
> [!attention]
> Replace the YOUR_PIXEL_ID text with your pixel ID
```html
<noscript>
<img
height="1" width="1"
style="display:none"
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"
/>
</noscript>
```
🚀 Just by doing these 2 steps, you will be able to test your integration with the `PageView` event!
> [!info]
> To make testing easier install the extension [Meta Pixel Helper - Chrome Web Store](https://chromewebstore.google.com/detail/meta-pixel-helper/fdgfkebogiimcoedlicjlajpkdmockpc?hl=en) and access the website, when the event is triggers this extension will receive a notification displaying something like this:
> ![[meta-pixel-helper-extension.webp]]
3. To send a [default Facebook](https://www.facebook.com/business/help/402791146561655?id=1205376682832142) event all you have to do is adding the `fbq` function with the event that you want to trigger, see the examples below:
```js
// Commonly used when the user add items to the cart, or when the checkout page is loaded in case there is no cart
fbq("track", "AddToCart");
// -----------------------------------------------------------------------------
// Saving the order data on the checkout page after completing an order
sessionStorage.setItem('orderId', result.number);
sessionStorage.setItem('orderValue', result.total_incl_tax);
// On the next page after making the order (upsell1 or thank-you) sending the 'purchase' event
const orderId = sessionStorage.getItem("orderId");
const orderValue = sessionStorage.getItem("orderValue");
fbq('track', 'Purchase', {value: orderValue, currency: 'USD'}, {eventId: 'store_name-'+orderId});
```
## Integration with Meta / Facebook Pixel in CRMs
### 29Next
![[29next-fb-pixel-step-1.webp]]
![[29next-fb-pixel-step-2.webp]]
![[29next-fb-pixel-step-3.webp]]
After adding the Facebook Meta Pixel App in 29Next and completed the [[#Integration]] all you have to do is capture the cookies fbp and fbc and send them inside the metadata property during the createOrder, the code below is capturing the variables, just add it to your `attribution.metadata` property
```js
const cookies = document.cookie.split(";");
const fbp = cookies.find((cookie) => cookie.includes("_fbp"));
let fb_fbp;
if (fbp) {
fb_fbp = fbp.split("=")[1];
}
const fbc = cookies.find((cookie) => cookie.includes("_fbc"));
let fb_fbc;
if (fbc) {
fb_fbc = fbc.split("=")[1];
}
if (fb_fbp) {
attributionData.metadata.fb_fbp = fb_fbp;
}
if (fb_fbc) {
attributionData.metadata.fb_fbc = fb_fbc;
}
```