Integrate Facebook Pixel and Fb Pixel Events in GatsbyJs

Gatsby-Plugin-Facebook-Pixel
Facebook Pixel Event in Gatsby

Problem Statement

We want to integrate Fb Pixel and also track Fb Pixel Events on our website. The website is built using GatsbyJs

npm i gatsby-plugin-facebook-pixel
// In your gatsby-config.js 
plugins: [
{
resolve: `gatsby-plugin-facebook-pixel`,
options: {
pixelId: "pixel id here",
},
}
];

Adding facebook pixel events

Okay so the 1st step is done which is adding a Facebook pixel, the next step is to track events. For this, we need to take a quick look at the following documentation

Facebook event tracking

This will show us how to add an event

fbq('track', 'Purchase', {currency: "USD", value: 30.00});
fqb is not defined
if (typeof window !== "undefined") {
if (window.fbq != null) {
window.fbq('track', 'Lead', {currency: "USD", value: 9.99});
}
}
  • On that object can we find the Facebook object
  • If we can let's use it and call the function to track

Learning nd Developing.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store