How to add facebook pixel to magento 2 website

Facebook ads is one of the best digital marketing channels to help a business acquire new customers.

If you are running any type of Facebook advertising campaign for your Magento 2 website, using Facebook Pixel is essential to help you optimize your Facebook ad campaigns.

In short, Facebook Pixel is like Google Analytics for Facebook ads! It allows you to better target your ads and see how effective they are when converting clicks into sales.

And in this article we will show you 3 methods to add Facebook Pixel to Magento 2:

• Method 1: Using a free Magento 2 Facebook pixel extension.
• Method 2: Integrate Facebook Pixel code to Magento 2 using Google Tag Manager.
• Method 3: Manually insert Pixel code to Magento 2 website – No plugin required.

If you plan to use custom audiences and conversion goals, we recommend using a plugin. But if you just want to use Facebook Pixel to create Lookalike objects and other basic features, then the manual code implementation is the simplest solution for your needs.

What is Facebook pixel code

The Facebook Pixel is a code block (javascript) you get from Facebook.

By inserting Facebook Pixel code on your website, Facebook can collect data and help you measure the effectiveness of your advertising, optimize your ads, build a custom target audience to use for your next Ads campaign.

Facebook Pixel Code can also be used for Facebook remarketing campaigns, targets customers who visited your website.

How to get Facebook Pixel Code

To get Facebook Pixel code follow these steps:

Step 1: Go to Event Manager section and click on Connect data sources

Step 2: Select Web and follow all the steps and create your Pixel code. Now click on Install Code Manually to get your Pixel code

Step 3: Now you can get the pixel code for your ads account, click on Copy to get the code

An example of Pixel code

<!-- Facebook Pixel Code -->
<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', '216137273337007');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=216137273337007&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Method 1: (Recommended) Install Facebook Pixel code to Magento 2 using a free extension

After getting the pixel code, we will start installing this code to our Magento 2 website.

Why I strongly recommend using a Magento 2 extension to install facebook pixel code? By using an extension to install pixel code, you won’t need to manually setup every even for Magento 2 like Add to cart, Add to wishing list, Checkout success…

The extension will do all the hard tasks for you. All you need to do is insert Facebook Pixel ID into the extension.

Install Pixel code using Facebook’s extension for Magento 2

Facebook has an official Magento 2 extension to integrate Pixel code to website. You can download this extension here or follow these steps to get download link from Facebook

Step 1: Go to Event Manager section of your Facebook ads account and select the Pixel you want to install. Next, click on Continue Pixel Setup and select User a Partner

Step 2: In Choose a partner page, select Magento

Click on Download button to download the extension

Step 3: Install the Pixel extension

Unzip the facebook-for-magento2.zip file and copy facebook-for-magento2 folder to your /app/code folder located in magento 2 installation folder. For example: /var/www/html/magento2/app/code .

The path to extension should be like this if you do everything correctly: /magento2/app/code/Facebook/BusinessExtension

Now to install the Magento 2 extension, run the following commands

Get facebook php-business-sdk dependency which is required to use this

composer require facebook/php-business-sdk

Enable the extension

php bin/magento module:enable Facebook_BusinessExtension

Update Magento 2 database

php bin/magento setup:upgrade

Deploy static content

php bin/magento setup:static-content:deploy

Start the compilation process

php bin/magento setup:di:compile

Clean cache

php bin/magento cache:clean

Start cronjob

php bin/magento cron:run

Now the extension should be found in Magento 2 admin dashboard in Store > Setup > Facebook

Proceed all the required steps to finish integrating Facebook Pixel code to your Magento 2 website

Select the ad account and pixel you want to connect with your website. You will see this popup if everything is properly set

Wait for a few second, Facebook will connect to your Magento 2 website

If you see this screen, that means you have successfully installed Pixel code to your Magento 2 website

Now go to your website, view source and you will see pixel code was properly installed to your website

Method 2: Install Facebook Pixel code using Google Tag Manager

We can also install Pixcel code to Magento 2 website using Google Tag Manager

Google Tag Manager is a free tool by Google that helps wesite owner manage all website tags without editing code.

Using Google Tag Manager, you can add many Tracking code like Google Analytic, Facebook Pixel Code, or marketing tool like CrazyEgg, OptinMonster

Step 1: Create a Google Tag Manager account at: https://tagmanager.google.com/?hl=en#/admin/accounts/create

Step 2: Get your Google Tag Manager ID here

Step 3: Install free Google Tag Manager extension by Yireo. The extension that help you install Google Tag Manager without touching code files.

Run the following command to install Yireo’s Google Tag Manager extension

composer require yireo/magento2-googletagmanager2

Enable the extension

php bin/magento module:enable Yireo_GoogleTagManager2

Update database and clean cache

php bin/magento cache:clean
php bin/magento setup:upgrade

Now you should see Yireo’s Google Tag Manager extension in your admin dashboard.

The extension is located in Store > Configuration > Sales > Yireo GoogleTagManager

Change configuration like this with Container Public ID is your Google Tag Manager ID

Save changes

Now paste the Pixel code you created and save change

The pixel code now should work properly on your website

Manually install Facebook Pixel code to Magento 2

Using this method, we can easily install Facebook Pixel code to Magento 2 by directly adding tracking code to <head> section of the website.

In Magento 2 admin dashboard, go to Design > Configuration. Select the store and storeview you want to add pixel code and click on edit

Go to HTML Head >  Scripts and Style Sheets section and paste your Pixel code here:

Finally, save changes and flush cache to apply changes

You can take a look at this video to follow all the steps to Manually add facebook pixel to Magento 2

Test if the pixel code is working properly

To check if the pixel code was installed properly you can install Pixel Helper chrome extension

After installing the extension, go to your website and click on the small icon to open Pixel helper. If you installed pixel code properly, information will be displayed like this

Wrapping up

In case Facebook advertising is one of your main marketing channels then you should start adding pixel code to your Magento 2 website immediately.

Facebook pixel is a great tool to help advertisers easily track, optimize campaigns, increase conversion rates. 

If you have any problem when setting up Pixel code for Magento 2 store, please drop a comment below describing your problem. I am always here to help.