Difference between revisions of "Adding the Facebook Pixel to your store"

From Spiffy Stores Knowledge Base

Line 28: Line 28:
 
# Copy the pixel code from Facebook
 
# Copy the pixel code from Facebook
 
# Paste the code in the '''''Additional Content & Scripts''''' section
 
# Paste the code in the '''''Additional Content & Scripts''''' section
# Add the code below right after the line '''''fbq('track', 'PageView');'''''<br><pre>fbq('track', 'Purchase',{value:'{{ total_price | money_without_currency }}',currency: '{{shop.currency}}'});</pre>
+
# Add the code below right after the line '''''fbq('track', 'PageView');'''''<br><pre>fbq('track', 'Purchase',{value:'{{ total_price | money_without_currency }}',currency: '{{shop.currency}}'});</pre><br><br>Your final code should look like this...<br><pre>
 
 
 
 
<br><br>
 
====Example tracking code with order conversion tracking====
 
 
 
<pre>
 
 
<!-- Facebook Pixel Code -->
 
<!-- Facebook Pixel Code -->
 
<script>
 
<script>

Revision as of 09:56, 14 March 2018

The process for adding the Facebook pixel is described below. Facebook provides you with code, and you copy their code and paste it in your Theme.liquid file.

Step 1. Get the code from Facebook

  1. Go to your Pixels tab in Events Manager.
  2. Click Create a Pixel.
  3. Click Create in the box that appears to finish creating your pixel.

Step 2. Add the code to your store

  1. Copy the pixel code from Facebook
  2. In your theme editor, click on the "Theme.liquid" file to edit it.
  3. Paste the code immediately before the </head> tag, and then click the save button.

Step 3. Check that your code's working correctly

  1. Go back to Facebook
  2. Click Send Test Traffic after placing the code on your website to make sure your pixel's working properly. If your status says "Active", your base code has been installed correctly. This can take several minutes to update.

Please note that your store needs to be unlocked to be able to verify, as the "coming soon" page does not include your meta tag. You can unlock your store in the Preferences -> General Settings -> Password protect access to your store section of your store's Toolbox.


Tracking orders

You can add the Facebook Pixel code to track orders in the Preferences -> Checkout & payment -> Additional Content & Scripts section of your store's Toolbox.

  1. Copy the pixel code from Facebook
  2. Paste the code in the Additional Content & Scripts section
  3. Add the code below right after the line fbq('track', 'PageView');
    fbq('track', 'Purchase',{value:'{{ total_price | money_without_currency }}',currency: '{{shop.currency}}'});


    Your final code should look like this...

<!-- 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', '12345678910111213'); 

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

<img height="1" width="1" 

src="https://www.facebook.com/tr?id=12345678910111213&ev=PageView &noscript=1"/> </noscript> <!-- End Facebook Pixel Code -->