Get help with Shoplo products

Facebook pixel


You can install a Facebook pixel in three simple steps:


Adding the code in the head section

The first step is to add the code to the head section.

Go to Settings > Conversion and Tracking > Additional code – ‘Head’ section

Here you can paste the generated code from Facebook. It 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', 'your-pixel-ID'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=twoj-pixel-id&ev=PageView&noscript=1"
/></noscript>

<!– DO NOT MODIFY –>
<!– End Facebook Pixel Code –>

Just right after End of Facebook Code, paste this code:

<script>
$( document ).ready(function() {
if($('body.checkout').length > 0) {
fbq('track', 'InitiateCheckout');
}
});
</script>

 

Remember that your-pixel-ID must be replaced with your own pixel ID. The code generated from Facebook should already include your pixel ID.


Adding the code to the thank you page

Go to Settings > Orders > Scroll down to the ‘Thank you page’ section – Page content

Copy the following code:

<script>
fbq('track', 'AddPaymentInfo');
fbq('track', 'Purchase', {
content_type: 'product',
content_ids: [{/literal}{foreach from=$items item=i name=item_list}"{$i->sku}"{if !$smarty.foreach.item_list.last},{/if}{/foreach}{literal}],
value: {sum},
currency: '{/literal}{$shop->currency}{literal}'
});
</script>

 


Adding the appropriate file to your store’s theme

Go to Layout > click on the three dots > HTML editor

shoplo-html-edit.png

From the left menu select Snippets > Scroll down and click on Add a snippet > Name it Facebook

Click on ‘Save changes’

shoplo-add-snippet.png

Click on the file and paste the following code:

{if $template == 'product'}

{literal}
<script>
fbq('track', 'ViewContent', {
content_type: 'product',
content_ids: ['{/literal}{$product->variants[0]->sku}{literal}'],
value: {/literal}{$product->variants[0]->price|money_without_currency}{literal},
currency: '{/literal}{$shop->currency}{literal}'
});
</script>
{/literal}
{/if}
{if $template == 'cart'}
{literal}
<script>
fbq('track', 'AddToCart', {
content_type: 'product',
content_ids: [{/literal}{foreach from=$cart->items item=i name=item_list}"{$i->variant->sku}"{if !$smarty.foreach.item_list.last},{/if}{/foreach}{literal}],
value: {/literal}{$cart->total_price|money_without_currency}{literal},
currency: '{/literal}{$shop->currency}{literal}'
});
</script>
{/literal}
{/if}

{if isset($smarty.cookies.newsletterSubmit)}
<script>
fbq(‘track’, ‘Lead’);
document.cookie = ‘newsletterSubmit=;expires=Thu, 01 Jan 1970 00:00:01 GMT;’;
</script>
{/if}
<script>
$(document).ready(function() {
$(‘.newsletter-form button[type=”submit”]’).click(function() {
document.cookie = “newsletterSubmit=newsletter”;
});
});

</script>

 

It should look like this after copying it to the new file:

shoplo-facebook-snippet-kod.png

Next, navigate to the top of the list click on Layout > base.tpl and at the end of the Facebook code, before </body> paste the following code:

{snippet file=”facebook”}

shoplo-facebook-snippet-body.png

Click on Save changes.

If you have followed all the steps mentioned above and the code still doesn’t work – please contact our support.

Was this article helpful?

Still can’t find what you’re looking for?

Contact us
Team