Integrate Facebook Pixel and Fb Pixel Events in GatsbyJs

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

Problem Statement

If you follow Facebook Pixel Integration Guidelines, they will simply tell you to add a snippet of javascript code and place at the bottom of your head tag on your webpage.

However, on GatsbyJs you can’t amend the head tags directly, so we need a different approach!

We go to the plugin eco-system, luckily a kind developer has already created a GatsbyJs Facebook plugin, gatsby-plugin-facebook-pixel

Nice and straight forward, install the plugin with npm, then add the code to gatsby-config.js ensuring you add your pixel id. Simple instructions are on the link above.

npm i gatsby-plugin-facebook-pixel

Then, add the following code in gatsby-config.js

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

So what does this get you? Well, this plugin will inject the Facebook pixel javascript snippet on to your website, and this will track page views. This gives you a basis of the Facebook pixel working

Adding facebook pixel events

https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking/

Facebook event tracking

fbq('track', 'Purchase', {currency: "USD", value: 30.00});

Nice and simple, this is saying hey, when this event fires, track the event, the event is someone has purchased something and that purchase is worth $30.

You can then use this value to track the ROI of Facebook advertising

Okay but if you add that directly do gatsby you’ll get an error

fqb is not defined

So what now, well now we take a little trick from react

if (typeof window !== "undefined") {
if (window.fbq != null) {
window.fbq('track', 'Lead', {currency: "USD", value: 9.99});
}
}

This code is saying

  • Hey do we have a browser window type object
  • On that object can we find the Facebook object
  • If we can let's use it and call the function to track

And Facebook Pixel is integrated to your GatsbyJs Website.

Learning nd Developing.