Adding FB pixel to Shoify Buy Button

brian_coleman
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
Lisa
Shopify Staff
Shopify Staff
242 3 63

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
gteamgr
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
porridge
New Member
4 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
HighFiveMedia
New Member
1 0 0

Hi Lisa,

 

I already added the Facebook pixel code to the Additional Scripts, but as I was continuing with your instructions to added the Facebook Pixel ID, I did not see Preferences in my Settings. Where else could this be found?

 

Screen Shot 2020-03-31 at 12.45.44 PM.png

0 Likes
yvitaly
New Member
2 0 0

Did you find a solution? I'm trying to do it as well. 

I can't put the code in the checkout add. script because i'm using 7 different pixels in my store... 

Can somebody assists please?

0 Likes
jentaylor
New Member
2 0 0

this is only if you have an online store.   i am also trying to add it to a buy button

0 Likes
jentaylor
New Member
2 0 0

where would you put this?  Before the code starts or at the end?

0 Likes
David255
New Member
1 0 0

Hi Lisa,

I am reading your reply now in 2021. 

Is something changed?

I have a squarespace website with shopify buy buttons. 

Would like to track checkouts/purchases etc.

I connected facebook with shopify and put level maximum for tracking.

Is this sufficient nowadays? Or do you still have to add a code? I can't find any code at facebook.

You said a third party could provide a code. Do you have an example?

Thanks in advance!

Regards

 

0 Likes