Adding Facebook Conversion Tracking Pixel To Shopify

Adding Facebook Conversion Tracking Pixel To Shopify

Step 1

Login to your Shopify Admin Panel

Shopify Login Admin

Step 2

Click on Settings (Gear Icon) and choose Checkout

Shopify Checkout

Step 3

Login to Facebook Ads Manager

In the top right corner click on the menu icon > Pixels

Facebook Go To Pixels

Click on the code icon of your active pixel

Facebook Code Icon

Click on Set Up, in the right corner

Facebook Pixel Set Up

From the popup options, choose : Manually install the code yourself

Facebook Install your pixel code

Copy the pixel code in step 2 and place it in a temporarily document, than click on continue

Facebook Copy Pixel Code

Now enable the purchase event and a 1 as conversion value (we will change this later) and set your currency. Now click on done.

Facebook Purchase Event

Now lets assemble the whole code, copy the below code and paste to your pixel conversion tracking you earlier placed in a temporary document.

<script>
  fbq('track', 'Purchase', {
    value: {{ total_price | money_without_currency | remove:',' }},
    currency: '{{ shop.currency }}',
  });
</script>

You should now see something like below (example only), on the first line add {% if first_time_accessed %} and at the end add {% endif %}, this prevents the code from executing more than once to avoid double conversions.

{% if first_time_accessed %}
<!-- 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');
// Insert Your Custom Audience Pixel ID below. 
fbq('init', '<FB_PIXEL_ID>');
fbq('track', 'PageView');
</script>
<!-- Insert Your Custom Audience Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=<FB_PIXEL_ID>&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<script>
  fbq('track', 'Purchase', {
    value: {{ total_price | money_without_currency | remove:',' }},
    currency: '{{ shop.currency }}',
  });
</script>
{% endif %}

Step 4

Now go back to Shopify > Checkout and scroll down until you see Order Processing, at the bottom of this section you will have a field where you can paste the code which is labeled Additional Content and Script. Here you can paste the code you assembled.

Need Help?