Facebook Pixel Manual Integration (article)

Susana Moleón Moya
Susana Moleón Moya
  • Updated

What is the Facebook Pixel?

The Facebook pixel is a piece of code that you put on your website that allows you to measure the effectiveness of your advertising by understanding the actions people take on your website.

How have we implemented it?

We have integrated the Facebook Pixel with Standard Tracking Events into the Gray Line Licensee whitelabel codebase.

All standard events are tracked by calling the pixel's fbq('track') function, with the event name, and (optionally) a JSON object as its parameters. For example, here's a function call to track when a visitor has completed a purchase event, with currency and value included as a parameter:

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

What events are being tracked?

  • PageView
  • View content (tour pages)
  • Search
  • Contact
  • Add to cart
  • Initiate checkout 
  • Purchase

What sort of data will I see?

You will see information related to the above events.

You can click into events and view details about further information available

P1.png

P2.png

P3.png

P4.png

 

O5.png

P6.png

How do I enable it?

Create the Pixel

First you need to create a Facebook Pixel, then get the ID of that pixel

Create the pixel: https://www.facebook.com/business/help/952192354843755?id=1205376682832142

Select manual installation

O7.png

P7.png

Get the ID: You will be given a piece of code that looks like the figure below. Take a copy of the code, then extract the ID number provided.

P8.png

Turn on automatic advanced matching

P9.png

Add events using event setup tool - this step can be skipped (we have already added event triggers into the codebase)

Verify domain name - choose the DNS TXT record option. Follow Facebook's instructions. To add the DNS record, login to your CloudFlare account, go to DNS, and add in the new TXT record as provided by Facebook.

Type: TXT

Name: @

TTL: Auto

Content: <<< insert data provided by facebook >>>>

Go back to Facebook and click verify.

P10.png

P11.png

Note: don't use "grayline-dev.com" for the Name field, make sure you use your own domain name or simply write "@" 

Configure web events - this can be done by you / your marketing team now or later, please see Facebook's instructions for further information

P12.png

Configure Your Website with the Facebook Pixel ID

Login to your website and search for "dojo settings"

Scroll down to Facebook Pixel section. Paste in the ID number you copied earlier, and tick the checkbox to enable the pixel.

P14.png

P15.png

How do I analyse the data and use this with Facebook Ads?

This article explains how we've implemented the Facebook Pixel into your website code, what events we are triggering, and what you need to do to activate this on your website. 

Further data analysis and Facebook Ad configuration is beyond the scope of this article. We recommend either reading the Facebook documentation and following along yourself, or outsourcing to a third party Marketing & Analytics company to do this for you.

Cookies, Tracking and GDPR

Facebook Pixel tracking will NOT occur unless a user has explicitly accepted marketing & analytic cookies. See here for further info > Cookie Consent GDPR

Note: Apple's iOS 14.5 changes require apps in the App Store that engage in what Apple defines as "tracking" to show a prompt to iOS 14.5 and later users in accordance with their AppTrackingTransparency framework. These changes affect how Facebook receives and processes events from tools such as the Facebook pixel. If you optimise, target or report on web events from Facebook pixel or any of our other business tools, you can take steps to update your event setup and manage these changes. Learn more

Troubleshooting

Is there no data populating inside of Facebook?

Note: data does not populate immediately inside the Facebook graph, you may need to wait 30 mins and you need to refresh the page to see fresh data. 

Use this Chrome Tool to debug & make sure your Facebook events are firing

https://developers.facebook.com/docs/facebook-pixel/support/pixel-helper

You should see a green icon and details about events when using this tool. 

P16.png

(Note: in case an event is triggered at the same time as a page redirect, e.g. AddToCart, you will not see such events populating in the tester tool)

If this tool doesn't work / you don't see anything, check your Facebook Pixel ID is correct.

Also try clearing your cache to get the latest code updated correctly. 

Clear the website cache: https://support.tourcms.com/hc/en-us/articles/9344170468369-Gray-Line-Licensees-Clear-Cache-article-

Clear the CloudFlare cache: Login to CloudFlare, click Purge Cache > Purge Everything

IMPORTANT: make sure you clear the website cache BEFORE you clear the CloudFlare cache

P17.png

P18.png

Further Reading

About FB Pixel: https://www.facebook.com/business/help/742478679120153?id=1205376682832142&helpref=faq_content

Create and install FB Pixel : https://www.facebook.com/business/help/952192354843755?id=1205376682832142

Chrome extension tool for testing the pixel : https://developers.facebook.com/docs/facebook-pixel/support/pixel-helper

Standard tracking events: https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking#standard-events