If you want to track website/Mobile App conversions (like ‘sales’, ‘leads’, ‘signups’, ‘add to cart’ etc) generated by Facebook users on your website in your Facebook advertising account then you need to deploy the ‘Facebook pixel code’ on all of your website pages. 

Another advantage of deploying the ‘Facebook pixel code’ on your website is,  you can then create ‘custom audiences’ in your Facebook Advertising account. Through custom audiences you can remarket your website users on Facebook.

In this article, I will show you, how to test and deploy the Facebook pixel code and Facebook event code on your website via Google Tag Manager.

Introduction to Facebook Pixel

The tracking code (or tag) used by Facebook is called the ‘Facebook Pixel’. It is a basically a bunch of JavaScript code which you should add to your website so that Facebook can:

#1 Track and report on your website users activities like: Pageviews, view content (viewing product detail pages), website searches, signups, leads, ‘add to cart’, ‘purchases’ etc.

#2 Retarget your website users on Facebook.

#3 Find new target audience / customers for your business.

#4 Track and report on the conversions generated by your Facebook ads.

#5 Automatically optimize your ads for conversions.

Following is an example of a Facebook Pixel Code:

The facebook pixel code contains a unique ID called the ‘Pixel ID’. It is in a format which resembles a mobile phone number. For example in the pixel code below:

s.parentNode.insertBefore(t,s)}(window, document,’script’,
‘https://connect.facebook.net/en_US/fbevents.js’);
fbq(‘init’, ‘87945356632151151‘);
fbq(‘track’, ‘PageView’);
</script>

The Facebook pixel id is: 87945356632151151

Through pixel id, Facebook is able to differentiate between various Facebook advertisers.

The Facebook machine learning algorithm uses this pixel code to learn about your website users on Facebook. For example what Fan pages they like, click, comment, people they engage with etc on day to day basis.

The more the pixel code fires on your website, the more Facebook learn about your website users and better it becomes in targeting them and other similar audiences to complete your website conversions.

What that means, if you have got a brand new Pixel code, Facebook will know little to nothing about your website users’ activities on Facebook. Consequently, your Facebook ads, may initially struggle to generates sales/leads for your website and you are likely to see negative ROI.

Businesses who are making a killing on Facebook, generating millions of dollars in sales via Facebook ads, all have got very matured Facebook pixel. So their pixels know a lot more about their target audience/customers than your brand new pixel.

Introduction to Facebook Events

The Facebook pixel code track your website users’ activities on Facebook.

Facebook call these users activities as ‘events‘. Each user activity is defined via a unique Facebook event.

For example, users’ purchase activity on your  website is defined via ‘Purchase‘ event:

A user’s ‘add to cart’ activity on your website is defined via ‘AddToCart‘ event:

Each Facebook event has got one or more attributes.

For example, the Facebook ‘purchase’ event has got two attributes: ‘value’ (which is the value of the purchase) and ‘currency’ (the currency in which the purchase was made).

Similarly, the Facebook ‘AddToCart’ event has got two attributes: ‘value’ and ‘currency’.

Following are the examples of other events recognised by Facebook:

#1 Search – this event should be fired when a user perform a search on your website. Following is the example of the code used to track Search Event:

 

#2 ViewContent – this event should be fired when a user visits an important content page or product detail page on your website. Following is the example of the code used to track ‘ViewContent’ Event:

 

#3 AddToWishlist – this event should be fired when a user add an item to a wishlist on your website. Following is the example of the code used to track ‘AddToWishlist’ Event:

 

#4 InitiateCheckout – this event should be fired when a user enter the checkout on your website. Following is the example of the code used to track ‘InitiateCheckout’ Event:

 

#5 AddPaymentInfo – this event should be fired when a user add his payment information during the checkout on your website. Following is the example of the code used to track ‘AddPaymentInfo’ Event:

 

#6 Lead – this event should be fired when a user submit a lead on your website. Following is the example of the code used to track ‘Lead’ Event:

 

#7 CompleteRegistration – this event should be fired when a user completes a registration on your website. I used this event to track newsletter subscribers. Following is the example of the code used to track ‘CompleteRegistration’ Event:

Standard Vs Custom Facebook Events

Standard Facebook events are the one which are defined by Facebook. Following are examples of standard Facebook events:

1. Search
2. ViewContent
3. AddToWishlist
4. AddToCart
5. InitiateCheckout
6. AddPaymentInfo
7. Purchase
8. Lead
9. CompleteRegistration

Custom Facebook Events are the one which are defined by people like me and you. So if there is any users’ activity which you can not track via standard Facebook events then use the custom Facebook events for that.

Through custom events, you can track any users’ activity on your website within Facebook. Following is the syntax for tracking custom events in Facebook:

fbq(‘track’, ‘<EVENT_NAME>‘, {
<parameter_key>: <parameter_value>,
<parameter_key>: ‘<parameter_value>‘
});

Facebook default pixel code

The Facebook default pixel code (also called ‘pixel base code‘) refer to the pixel code supplied by Facebook. This code does not contain any customization from the end user (like you or your developer). This code also do not contain any standard or custom Facebook event code.

You can add the Facebook default pixel code on your website in following ways:

#1 Hard code the pixel code on all the pages of your website.

#2 Use Google Tag Manager to deploy the default pixel code on your website.

#3 Enter the Facebook Pixel id. Many Shopping carts like ‘Shopify’ can automatically add Facebook default pixel code on your website. All you need to do is, to supply your Facebook pixel id to your shopping cart software.

Tracking Facebook events

In order to track a Facebook event, you would need to add the event code on your website. You can add the event code in following ways:

#1 Hard code the event code on your website.

#2 Use Google Tag Manager to deploy the event code on your website.

#3 Enter the Facebook Pixel id. Many Shopping carts like ‘Shopify’ can track all standard Facebook events automatically. All you need to do is, to supply your Facebook pixel id to your shopping cart software.

For example, if you want to track ‘purchases’ made by users on your website, within Facebook then you need to copy paste the following similar code on your ‘order confirmation’ page:

Note the word ‘similar’. This is not going to be your actual code.

The actual code is likely to contain server side variables which pull data from your shopping cart. In case of Google Tag Manager, the actual code is likely to contain data layer variables which pull data from the data layer embedded on your ‘order confirmation’ page.

You can however send this example code to your developer and tell him to collect the data in this format. He should understand, what to do next.

Adding Facebook default Pixel Code on a website via Google Tag Manager

Follow the steps below:

Step-1: Signup for Facebook Business Manager account (if you already don’t have one). Through business manager account you can manage multiple advertising accounts. Facebook call these advertising accounts as ‘Advert account‘.

Note: You would need a personal Facebook account before you can signup for Business Manager account.

Step-2: Use your business manager account to create a new ad account. You can also use business manager to request access to any existing ad account (like the one which belongs to your client) or to claim your ad account (i.e. add your existing ad account to your business manager account):

Note: The URL of your Facebook business manager settings page from where you can: add, request or create a new advert account will look something like the one below:

https://business.facebook.com/settings/people?business_id=15546372665463115

Step-3: Make sure you have access to the Facebook Advertising account with either ‘Advert Account Admin‘ (best permission) or ‘Advert Account Advertiser’ permission:

To learn more about getting access to the Facebook Advertising account, read this article: https://www.facebook.com/business/help/195296697183682

Step-4: From your Facebook Business manager Home page, navigate to the advert account for which you want to set up the pixel tracking:

Note(1): The URL of your Facebook business manager home page will look something like the one below:

https://business.facebook.com/home/accounts?business_id=15546372665463115

Note(2): Each Advert account represents one website. So if you have got two websites for Facebook advertising then create/use two adverts accounts.

Note(3): Each advert account has got it own unique pixel code. The pixel id makes a Facebook default pixel code unique.

Step-5: Once you are in your desired advert account then click on the ‘Pixels’ from the ‘Adverts Reporting’ menu (or other similar menu):

If your Facebook pixel is not already set up then you will be asked to create a new pixel:

However, if your Facebook pixel is already setup then click on ‘setup’ button:

You will now see the ‘Install your pixel code’ dialog box:

Step-6: Click on ‘Use an integration or tag manager’ option. You will now see another dialog box:

Step-7: Select ‘Google Tag Manager’. You will now see another ‘Install your pixel code’ dialog box:

Step-8: Click on ‘Manual Install’. You will now see ‘Install your pixel using Google Tag Manager’ dialog box:

Step-9: Scroll down this dialog box until you see the section named ‘Copy and paste your pixel base code’:

Step-10: Click on ‘Use Advanced Matching’ button and then copy the Facebook pixel base code

Note(1): The ‘Advanced Matching’ feature helps in improving the effectiveness of your Facebook conversion reporting and Facebook ads optimization and targeting.

Note(2): In order to copy the Facebook pixel code, hover your mouse over the Facebook pixel code and then click on it. You will then see the following window for a brief moment which confirms that the pixel code has been copied:

Step-11: Modify the copied Facebook pixel code in such a way that it fires only when the following condition is true:

if ((document.location.href.search (‘appspot.com’) == -1) && (document.referrer.search (‘appspot.com’) == -1))

So the final code will look similar to the one below:

<!– Facebook Pixel Code –>
<script>
if ((document.location.href.search (‘appspot.com’) == -1) && (document.referrer.search (‘appspot.com’) == -1))
{
!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’, ‘87788654821151’, {
em: ‘insert_email_variable,’
});
fbq(‘track’, ‘PageView’);
}
</script>
<noscript><img height=”1″ width=”1″ style=”display:none”
src=”https://www.facebook.com/tr?id=87788654821151&ev=PageView&noscript=1″
/></noscript>
<!– DO NOT MODIFY –>
<!– End Facebook Pixel Code –>

Here the highlighted code in bold text is the additional code added to the Facebook default pixel code.

Without this code, Google Tag Manager, most likely, going to inflate your Facebook pixel data. For example reporting more ‘add to carts’ or ‘purchases’ than the one actually occured on your website.

You are likely to see lot of Facebook pixels fired for visits coming from https://gtm-msr.appspot.com/render2

This URL is going to appear as ‘Referring URL’ in your Facebook Pixel reports.

So what I have done here, is not to fire the Facebook default pixel code, if the current and referring URL contains ‘appspot’.

We are going to use this modified Facebook pixel code in GTM.

 

Step-12: Login to your Google Tag Manager account and create a new custom HTML tag.

Step-13: Name your new tag ‘Facebook default pixel code’ and then paste the modified Facebook pixel code in the text area:

Step-14: Click on ‘Advanced Settings’ link and make sure that the ‘Tag firing options’ is set to ‘Once Per Page’:

Step-15: Set the tag to fire on all pages of your website:

Step-16: Save your new tag and then preview it to see whether it fires on all of your web pages.

Step-17: Publish your container.

Tracking Facebook event on a website via Google Tag Manager

Let us suppose you want to track ‘add to carts’ on your website within Facebook so that you can see which Facebook ads are resulting in ‘add to cart’ activity on your website.

Follow the steps below:

Step-1: Click on the ‘setup’ button on your Facebook pixel page:

Step-2: Click on ‘Use an integration or tag manager’ option then select ‘Google Tag Manager’ and then Click on ‘Manual Install’.

You will now see ‘Install your pixel using Google Tag Manager’ dialog box:

Step-3: Scroll down this dialog box until you see the section named ‘Copy Event Code’:

Step-4: Copy the ‘Add to Basket’ event code and then modify it in such a way that it fires only when the following condition is true:

if ((document.location.href.search (‘appspot.com’) == -1) && (document.referrer.search (‘appspot.com’) == -1))

So the final code will look similar to the one below:

<script>
if ((document.location.href.search (‘appspot.com’) == -1) && (document.referrer.search (‘appspot.com’) == -1)){
fbq(‘track’, ‘AddToCart’, {
value: 3.50,
currency: ‘USD’
});
}
</script>

Here the highlighted code in bold text is the additional code added to the Facebook ‘add to cart’ event code. We are going to use this modified event code in GTM.

Step-5: Login to your Google Tag Manager account and create a new custom HTML tag.

Step-6: Name your new tag ‘Send Add to Cart Event to Facebook’ and then paste the modified Facebook pixel code in the text area:

Note: You would need to create a separate custom HTML tag for each unique Facebook  event.

Step-7: Click on ‘Advance Settings’ and then click on ‘Tag Sequencing’:

Step-8: Select the checkbox named ‘Fire a tag before Send Add to Cart Event to Facebook fires’ and then select ‘Facebook default pixel code’ from the ‘Setup Tag’:

Here ‘Facebook default pixel code’ is the tag I created to fire Facebook pixel code via GTM.

Step-9: Select the checkbox ‘Don’t fire Send Add to Cart Event to Facebook if Facebook default pixel code fails’.

Step-10: Fire this tag only on those web pages which contain ‘Add to Cart’ button and when the button is clicked.

Step-11: Test whether this tag fire correctly. If it does then publish the container.

Step-12: Repeat Step 1 to 11 for other Facebook events.

Using ‘Facebook Pixel Helper’ to test Facebook events

Follow the steps below:

Step-1: Install the Facebook Pixel Helper chrome extension and enable it. This add-on is used to validate various Facebook pixel events. Once this add-on is enabled, it will appear as a button at the top right hand side of your chrome browser window.

If this add-on does not find any Facebook pixel on a web page, it will appear in gray colour:

However if this add-on does find Facebook pixel(s) on a web page, it will appear in dark blue colour with a little green box which shows the number of Facebook pixels found on a web page:

If you click on this button, you can get more details about the type of Facebook pixels fired on a web page, as well as their current validation status:

The green check mark next to each Facebook event (‘PageView’, ‘Lead’, ‘Purchase’ etc) shows that the Facebook pixel for that particular event is firing correctly.

Step-2: Navigate to any web page of your website and then use the ‘Facebook pixel helper’ tool to test whether the ‘pageview’ pixel is fired on the web page and whether the pixel is firing correctly for each tracked Facebook event:

Since there is a green check mark next to the Facebook ‘PageView’ event, it means the event is firing correctly.

Note: The ‘Facebook default pixel code’ which we just deployed via GTM on the website fire only the Facebook ‘PageView’ event. It does not fire any other Facebook event like ‘view content’, ‘add to cart’, ‘lead’, ‘purchase’ etc. For that, you will also need to deploy the Facebook event code on your website via GTM.

Step-3: To confirm further, navigate to your Facebook pixel page and look for ‘Active’ status next to the events: ‘PixelInitialized’ and ‘Pageview’:

The ‘Active’ status 100% confirm that the Facebook default pixel is firing correctly.

Related Articles

• Tracking Facebook ‘Likes’ and ‘Unlikes’ in Google Analytics
• Why Facebook and Google Analytics data do not match
• Learn to correctly track Facebook Referral traffic in Google Analytics
• Understanding Facebook Referral traffic in Google Analytics
• Complete Guide to Google Analytics for Facebook
• Facebook Analytics – Super Duper Guide
• Tracking Website Sales in Facebook via Google Tag Manager