Enabling Facebook pixel code placement with your website can be tricky. But in this tutorial, we will show you how to add the Facebook pixel to your website with Blocksy Pro. With the Blocksy theme, the entire process is a breeze.

Every website owner would like to be aware of every activity on their site. That is where the Facebook pixel comes in. In simple terms, it is a snippet code that lets you track conversions, events, and other actions that bring sales to your website.

The Facebook pixel code then lets you view these actions on your Facebook pixel page in ‘Events Manager’.

Above all, this code embedded in your website can collect data from Facebook Ad Campaigns. This can improve and tweak your campaign.

Note: A Facebook pixel is now called a ‘Meta pixel ‘as part of the Facebook Rebrand.

Requirements: To add the Facebook Pixel code to your site, you need to activate the custom code snippet extension. This is possible with the Blocksy Pro version, which you can purchase here.

Requirements needed to for this tutorial. Blocksy PRO and Facebook Pixel Code — You must have these requirements before proceeding with this tutorial

Video Tutorial

Here is my YouTube video tutorial on adding a Facebook pixel with Blocksy Pro.

Rule of thumb: Always backup your website before making changes to it. This enables you to restore your site with a previously working backup version if the changes do not go as planned.

1. Activate Custom Code Snippet Extension

The first thing you need to do in this process is activate the Custom Code Snippets extension in Blocksy Pro. To do this, follow these steps:

First, navigate to the ‘WordPress Dashboard‘.

Then, click on the Blocksy icon among the menu items on the dashboard.

Blocksy sub-menu items via the WordPress dashboard. — Select “Blocksy” sub-menu item

Then click on ‘Extensions‘, which is among the options. Under ‘Extensions‘, click on ‘Pro Extensions‘.

Pro extensions tab on Blocksy Pro page — Go to the extensions page and switch to Pro Extensions.

Afterward, look for ‘Custom code snippets‘ and click “activate.”

If you need more information on how to use the extension you have just activated, click on the information symbol on the right side of the activation button. The instructions will be displayed.

Detailed instructions on how to use custom code snippets in Blocksy — The two methods of using Custome code snippets in Blocksy

2. Add Facebook Pixel Code

Now that we have Custom Code Snippet activated in Blocksy Pro, we can go ahead and add the Facebook pixel. Follow the steps below;

Return to the WordPress menu and go to ‘Appearance‘ among the menu items.

Under ‘Appearance‘, choose ‘Customise‘. That will take us to the customization mode of Blocksy Pro.

Appearance sub-menu via WP Admin dashboard — Select “Customise”.

Then, scroll down the left sidebar until you reach the ‘Extensions’ section. While here, click on ‘Custom code snippets.‘

Blocksy Extensions section via theme customiser. — Go to Custom Code Snippets

The Custom Code Snippet offers three code placement areas. These are the header, body, and footer scripts.

The Facebook Pixel code applies to the header section as Facebook recommends.

Adding the code to the header section reduces the chances of browsers or third-party code blocking the pixel’s execution. It also executes the code sooner.
– Facebook

It might not be the case if you placed the code in either the body section or footer section.

Once you have placed the code in the ‘header scripts’ section, click ‘Publish‘ to add the Facebook pixel to the website.

The 3 custom code placements that is header, after body and footer. — Insert the Facebook pixel code in the “Header scripts” placement

We need to clear the cache when we are through with this step.

3. Clear server cache

To clear cache, go back to the ‘Dashboard‘.

Cache means stored web documents such as HTML pages and images stored temporarily—your web browser stores copies of web pages you have recently visited.

Since we host our website on WP Engine, we follow these steps to clear the cache.

Return to the ‘Dashboard‘.

Then go to the ‘WP Engine’ menu item. On the WP Engine page, go to the ‘Caching tab‘.

The Caching tab on WP Engine's page inside WordPress Dashboard — Go to the “Caching” Tab

Scroll down and click the ‘Clear all caches’ button to clear the cache. This finally marks the end of our process.

"Clear all caches" button on WP Engine page via WP Admin dashboard — Click the “Clear all caches” to have the cache

Sometimes, Facebook Pixel might not work even after adding it to your website. This could be because your server is still providing the old cache. So it is essential to make sure that you clear the old cache.

Another essential aspect to note is verifying if the Facebook pixel has been added to your site. You can do this in a few steps with the Facebook Pixel Helper.

Add the Facebook Pixel Helper extension to your Google Chrome browser.

The Facebook Pixel Helper extension page — Add the Facebook Pixel Helper to your browser.

After that, you should visit the page where you have added the Facebook Pixel code.

A popup will indicate how many pixels it finds on the page if the code is added. It will also tell you if your pixel is working correctly and the errors if it fails to work.

Results from the Facebook Pixel Helper indicating presence of pixel code on a webpage — Facebook Pixel Helper results confirm Pixel code presence.

Summarised steps on how to add Facebook Pixel Code — Three steps on how to Facebook Pixel code in Blocksy

Final Thoughts

We hope this tutorial helps you get your Facebook pixel set up on your WordPress website with Blocksy Pro. Blocksy is a powerful WordPress theme that we use here at MRK WP to create and manage our clients’ websites. With the Blocksy Pro version, you have access to different customizable options for your website.

Articles