Integrate Facebook Pixel and Fb Pixel Events in GatsbyJs

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