Adding FB pixel to Shoify Buy Button

New Member
4 0 0

Het Team,

We are selling through Shopify with "Buy-Buttons" on our website (realryder.com).

 

I am trying to add FB pixel tracking code to the buy button, but when I do, it breaks the button.

Below is the button code, with the FB pixel code added (in two places - I indented the snippets so you can find them easily). Can someoe tell me what I am doing wrong?

 

Thanks so much!

Brian

 

<div id='product-component-8051c37c265'></div>

<script type="text/javascript">

/*<![CDATA[*/

 

window.open = function (open) {
return function (url, name, features) {

// Pass through non-shopify URLS
if (url.indexOf("myshopify") < 0) {
return open.call(window, url, name, features);
}
fbq('track', 'AddToCart');
// Use current window
console.log("Redirecting to:", url);
window.location.href = url;
return null;
};
}(window.open);

 

(function () {

var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';

if (window.ShopifyBuy) {

if (window.ShopifyBuy.UI) {

ShopifyBuyInit();

} else {

loadScript();

}

} else {

loadScript();

}

 

function loadScript() {

var script = document.createElement('script');

script.async = true;

script.src = scriptURL;

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);

script.onload = ShopifyBuyInit;

}

 

function ShopifyBuyInit() {

var client = ShopifyBuy.buildClient({

domain: 'realryder-store.myshopify.com',

apiKey: '570dbb2bf2ff7f93de6dac6bd20d4848',

appId: '6',

});

 

ShopifyBuy.UI.onReady(client).then(function (ui) {

ui.createComponent('product', {

id: [11515360330],

node: document.getElementById('product-component-8051c37c265'),

moneyFormat: '%24%7B%7Bamount%7D%7D',

options: {

"product": {

buttonDestination: 'checkout',

"variantId": "all",

"width": "240px",

"contents": {

"img": false,

"imgWithCarousel": false,

"title": false,

"variantTitle": false,

"price": false,

"description": false,

"buttonWithQuantity": false,

"quantity": false

},

"styles": {

"product": {

"text-align": "left",

"@media (min-width: 601px)": {

"max-width": "100%",

"margin-left": "0",

"margin-bottom": "50px"

}

},

"button": {

"background-color": "#000000",

":hover": {

"background-color": "#000000"

},

"font-weight": "normal",

":focus": {

"background-color": "#000000"

}

},

"variantTitle": {

"font-weight": "normal"

},

"title": {

"font-weight": "normal",

"font-size": "26px"

},

"description": {

"font-weight": "normal"

},

"price": {

"font-size": "18px",

"font-weight": "normal"

},

"compareAt": {

"font-size": "15px",

"font-family": "Helvetica Neue, sans-serif",

"font-weight": "normal"

}

}

},

"cart": {

"contents": {

"button": true

},

"styles": {

"button": {

"background-color": "#000000",

":hover": {

"background-color": "#000000"

},

"font-weight": "normal",

":focus": {

"background-color": "#000000"

}

},

"footer": {

"background-color": "#ffffff"

}

}

},

"modalProduct": {

"contents": {

"img": false,

"imgWithCarousel": true,

"variantTitle": false,

"buttonWithQuantity": true,

"button": false,

"quantity": false

},

"styles": {

"product": {

"@media (min-width: 601px)": {

"max-width": "100%",

"margin-left": "0px",

"margin-bottom": "0px"

}

},

"button": {

"background-color": "#000000",

":hover": {

"background-color": "#000000"

},

"font-weight": "normal",

":focus": {

"background-color": "#000000"

}

},

"variantTitle": {

"font-weight": "normal"

},

"title": {

"font-weight": "normal"

},

"description": {

"font-weight": "normal"

},

"price": {

"font-weight": "normal"

},

"compareAt": {

"font-family": "Helvetica Neue, sans-serif",

"font-weight": "normal"

}

}

},

"toggle": {

"styles": {

"toggle": {

"background-color": "#000000",

":hover": {

"background-color": "#000000"

},

"font-weight": "normal",

":focus": {

"background-color": "#000000"

}

}

}

},

"productSet": {

"styles": {

"products": {

"@media (min-width: 601px)": {

"margin-left": "-20px"

}

}

}

}

}

});

});

}

})();

/*]]>*/

</script>

0 Likes
Shopify Staff
Shopify Staff
259 2 42

Hi, Brian!

Lisa here from the Shopify Social Care Team. 

For the Facebook Pixel to Track your conversions from the Buy Button, you would need to install the required code in the additional scripts section. 

You can only access this section of the checkout from your Shopify Admin:

1. Settings  > Checkout > Additional Scripts
2. Paste the code given from Facebook. Visual instructions on how to add the pixel to the checkout here.

Also, ensure you have your Facebook Pixel connected under Settings > Preferences > Add Facebook Pixel ID. Visual instructions on how to do this here.

Please keep in mind since you're just using the Buy Button that tracking is limited. The data from customers browsing on your actual site does not carry over to the Shopify Buy Button. However, you can still track data from anyone checking out on the Buy Button, by installing the pixel on your additional scripts checkout page mentioned above. 

Hope this helps, if you have any further questions feel free to reply! 

- Lisa ?

 


 

Lisa | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
2 0 0

Just use the below code and it will works:

 

<!-- 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', 'XXXXXXXXXXX');
fbq('track', 'Purchase', {
'{{ total_price | money_without_currency }}','currency':'EUR'
});
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

 

Remember to change the XXX with your Pixel ID.

0 Likes
Highlighted
New Member
1 0 0

What you've asked is impossible as you can't change Settings > Preferences > Add Facebook Pixel ID if you don't have an online store?!

0 Likes