Skip to content

Instantly share code, notes, and snippets.

@atikju
Created April 24, 2021 10:20
Show Gist options
  • Save atikju/9d930ca5b8a5d74c9d74a9b0d818366b to your computer and use it in GitHub Desktop.
Save atikju/9d930ca5b8a5d74c9d74a9b0d818366b to your computer and use it in GitHub Desktop.
Install Facebook Pixel on Shopify Manually
{% comment %}
Paste these codes in the additional scripts box. Settings > Checkout > Additional Scripts
{% endcomment %}
{% if first_time_accessed %}
{% assign ordered_products = '' %}
{% assign ordered_product_ids = '' %}
{% assign totalItems = line_items.size %}
{% for lineItem in line_items %}
{% if forloop.index < totalItems %}
{% assign lineTitle = lineItem.title | append: ' ,' %}
{% assign linevariantId = lineItem.variant_id | append: ',' %}
{% else %}
{% assign lineTitle = lineItem.title | append: '' %}
{% assign linevariantId = lineItem.variant_id %}
{% endif %}
{% assign ordered_products = ordered_products | append: lineTitle %}
{% assign ordered_product_ids = ordered_product_ids | append: linevariantId %}
{% endfor %}
<!-- Facebook Pixel Code -->
<script>
var fb_pixel_id = 'XXXXXXXX. Replace Yours $########';
!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', fb_pixel_id);
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=140570354627702&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
<script>
fbq('track', 'Purchase', {
content_name: ["{{ ordered_products }}"],
content_ids: [{{ ordered_product_ids }}],
content_type: 'product_group',
value: {{ total_price | money_without_currency | remove:',' }},
currency: '{{ shop.currency }}',
num_items: {{ line_items.size }}
});
</script>
{% endif %}
{% comment %}
Paste these codes right before the body tag closes inside your theme.liquid file.
Make sure your replace your fb pixels code on line 8 of this script. Good Luck!
{% endcomment %}
<!-- Facebook Pixel Code -->
<script>
var fb_pixel_id = 'XXXXXXXX. Replace Yours $########';
!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', fb_pixel_id);
{% if template.name contains 'product' %}
fbq('track', 'ViewContent', {
content_ids: ['{{ product.id }}_{{ product.variants.first.id }}'],
content_type: 'product'
});
{% else %}
fbq('track', 'PageView');
{% endif %}
setTimeout(function(){
fbq('track', 'ViewContent');
}, 1500);
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=140570354627702&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
{% if template contains 'product' %}
<script>
var atcButtonID = "AddToCart";
var atcButton = document.getElementById(atcButtonID);
if(atcButton){
atcButton.addEventListener("click", function(event) {
var cartValue = {{ product.price | money_without_currency }};
var productId = {{ product.selected_or_first_available_variant.id }};
var productType = "{{ product.type }}";
//PASTE AFTER HERE
fbq('track', 'AddToCart',{
content_name: '{{ product.title }}',
content_type: 'Product',
content_category: '{{ product.type }}',
content_ids: ['{{ product.id }}'],
value: cartValue,
currency: 'GBP'
});
});
}
</script>
{% endif %}
{% if template.name contains 'cart' %}
<script>
var atcButtonID = "checkout";
var atcButton = document.getElementById(atcButtonID);
if(atcButton){
var cart_item_ids = [];
$('.cart-product').each(function(){
var variant_idx = $(this).attr('data-varID');
variant_idx = parseInt(variant_idx);
cart_item_ids.push(variant_idx);
});
var cart_items_array = [];
$('.cart-product__title .js-product-title').each(function(){
var variant_idx = $(this).text();
cart_items_array.push(variant_idx);
});
var cart_items_collections_array = [];
$('.cart-product').each(function(){
var collection_idx = $(this).attr('data-collections');
cart_items_collections_array.push(collection_idx);
});
var cart_value = {{cart.total_price | money_without_currency }};
var cart_items_count = {{ cart.item_count }};
atcButton.addEventListener("click", function(event) {
//PASTE AFTER HERE
fbq('track', 'InitiateCheckout', {
content_type: 'product_group',
content_ids: cart_item_ids,
value: cart_value,
num_items: cart_items_count,
content_name: cart_items_array,
currency: 'GBP',
content_category: cart_items_collections_array
});
});
}
</script>
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment