NOTE: This article is applicable to our Classic Checkout solution only.
(5-6 min read)
The Facebook pixel is an analytics tool that allows you to measure the effectiveness of your advertising by understanding the actions people take on your website. You can use pixel data to:
- Make sure your ads are being shown to the right people.
- Build advertising audiences.
- Unlock additional Facebook advertising tools.
How to set up Facebook Pixel Tracking?
Cleeng allows you to setup Facebook Pixel tracking by GTM (How to set GTM in Cleeng link here).
That is the easiest and the most elastic way of setting up and managing Facebook pixel.
Before you begin:
1. Create Facebook Pixel - https://www.facebook.com/business/help/952192354843755
2. Create GTM account and setup in the Cleeng dashboard - for detailed description look at Cleeng Article about GTM.
3. Now is the time to add that code for all pages in GTM.
4. Get your GTM ID
5. Place it in the Cleeng Dashboard (link to GTM setup) (Cleeng Dashboard -> Settings -> Broadcaster profile)
6. Create triggers for each step of authentication / checkout process (create link to Cleeng GTM article with proper section about GTM)
7. Create custom HTML TAG in GTM (create link to Cleeng GTM article with proper section about GTM)
8. Create custom user variables (create link to Cleeng GTM article with proper section about GTM)
9. When you are done you can go through the next steps of setting up Facebook Pixel tracking.
Add your Facebook pixel to your pages
Get your pixel code
1. Open your pixel page
2. Choose Pixel
3. Click the “Set up” button
4. Choose “Manually Install the Code Yourself”
5. Copy your code 
6. At this point you can remove <noscript>...<noscript> part because for non script users GTM wouldn’t work here so there is no sense to keep it.
Add Facebook Pixel Tracking to all pages
1. Create new TAG (GTM -> Tags -> New)
2. Choose Custom HTML type
3. Paste previously copied code
4. In “Tag firing option” set “Once per page”
5. Right now your new tag should look like this
6. Add Trigger for that TAG
7. Click on trigger section and add new one
8. Choose predefined “All pages” trigger
9. Save it and refresh preview
10. Right now in preview mode your debug panel should appear at the bottom of the page
Setup Facebook Pixel events to each step
During setup of FB events you have to remember to check “Fire a tag before FB - AddPaymentInfo fires” and selecting “FB Pixel”. 
That will let us know about the proper sequencing of executing Custom HTML scripts. You can create conversion tracking for many steps: 
Thanks to GTM, you can setup a few events according to FB documentation
- Add Payment Info
- Complete Registration
- Initiate Checkout
- Purchase
- View Content
Setup “View Content” FB event
That event should be associated with the trigger for “viewEvent” custom Event.
|
Basic |
Advanced (using variables for Dynamic Product Ads) |
|
<script> fbq('track', 'ViewContent', { }); </script> |
<script> fbq('track', 'ViewContent', { content_name: {{eventTitle}}, content_ids: [{{eventId}}], content_type: 'product', value: {{eventPrice}}, currency: {{eventCurrency}}, referrer: document.referrer, userAgent: navigator.userAgent, language: navigator.language }); </script> |
Setup “Initiate Checkout” FB event
That event should be associated with the trigger for “buyButtonClick” custom Event.
|
Basic |
Advanced (using variables for Dynamic Product Ads) |
|
<script> fbq('track', 'InitiateCheckout', { }); </script> |
<script> fbq('track', 'InitiateCheckout', { content_name: {{eventTitle}}, content_ids: [{{eventId}}], content_type: 'product', value: {{eventPrice}}, currency: {{eventCurrency}}, referrer: document.referrer, userAgent: navigator.userAgent, language: navigator.language }); </script> |
Setup “'Complete Registration'” FB event
That event should be associated with the trigger for “registrationComplete” custom Event.
|
Basic |
Advanced (using variables for Dynamic Product Ads) |
|
<script> fbq('track', 'CompleteRegistration', { }); </script> |
<script> fbq('track', 'CompleteRegistration', { content_name: {{eventTitle}}, value: {{eventPrice}}, currency: {{eventCurrency}} }); </script> |
Setup “'Add Payment Info'” FB event
That event should be associated with the trigger for “paymentInfoSubmit” custom Event.
|
Basic |
Advanced (using variables for Dynamic Product Ads) |
|
<script> fbq('track', 'AddPaymentInfo', { }); </script> |
<script> fbq('track', 'AddPaymentInfo', { content_name: {{eventTitle}}, content_ids: [{{eventId}}], content_type: 'product', value: {{eventPrice}}, currency: {{eventCurrency}}, referrer: document.referrer, userAgent: navigator.userAgent, language: navigator.language }); </script> |
Setup “'Purchase'” FB event
That event should be associated with the trigger for “purchaseComplete” custom Event.
|
Basic |
Advanced (using variables for Dynamic Product Ads) |
|
<script> fbq('track', 'Purchase', { }); </script> |
<script> fbq('track', 'Purchase', { content_name: {{eventTitle}}, content_ids: [{{eventId}}], content_type: 'product', value: {{eventPrice}}, currency: {{eventCurrency}}, referrer: document.referrer, userAgent: navigator.userAgent, language: navigator.language }); </script> |
- For any further questions, please contact the Cleeng Customer Success Team