Integrate Facebook Pixel into SHopify Supply Theme and setup Events Manually

Tourist
18 0 3

I have tried to install the automated way, and I do not know WHERE this automated script comes up inside my store?

How do I install Events manually inside my Supply Shopify Store?

In which files should I put the following code:

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

 

and this code:


  fbq('track', 'Purchase', {value: '0.00', currency:'USD'});
  fbq('track', 'AddToCart'); - cart.liquid
  fbq('track', 'ViewContent'); - product.liquid


Should I put in in theme.liquid, cart.liquid and product.liquid?

 

Please help!

Thanks

 

 

0 Likes
Shopify Staff
Shopify Staff
23 0 1

Hi there, Daniel!

Before diving into the steps behind the manual process, I just wanted to confirm - when mentioning the automated way, have you followed all the steps for adding a Pixel via the Tag Manager process, using the steps seen in this guide here? This is by far the simplest way to get your Pixel running and for almost all purposes will have you set-up and running as intended, without having to worry about any code implementation. It will also track all 9 different forms of events automatically! You can read more on that right over here: Setting up your Pixel in Shopify

It’s also worth mentioning that it can take a couple of hours for a Pixel to show up as active after attaching it. If not seeing this confirmation yet is why you were wanting to approach a manual implementation, know that it is likely just a matter of needing wait a to little bit longer for it to update.

That said, if you are hoping to go through the manual process but aren’t very comfortable with code, you would typically want to look into speaking with a developer. The process is a matter of placing the Pixel code and it’s “Standard Event” variations between the <head> and </head> tag of each page of your website, while modifying the “Standard Event” depending on which page it is (Checkout page, Purchase completed page, Home page, etc.). This can be a bit daunting and time-consuming for those not very well-versed in code, and if the case I’d recommend visiting the Experts Marketplace to outsource the work.

This all being said, I have a suspicion your pixel may be working by the time you read this reply. If you would like to check on the status of this pixel, you can download the Pixel Helper Chrome Extension, which will allow you to check on its status in realtime when browsing the front end of your website.

Hope that clears things up and helps some, Daniel! If issues persist or if you have further questions, please don’t hesitate to reply here, and I’d be happy to help with the rest!

Kind Regards,

Tom | Shopify Employee

0 Likes
Tourist
18 0 3

Hi Tom,

Thank you for that link, it was good.
Yes, the automated process is very easy, but it is not perfect unfortunately. It does not allow me to automatically sync my Products with the Catalog in Facebook.

I tried to understand where the fbq() events are saved in the code, but I could not find it. I understand the standard code base shold be placed in theme.liquid, but I dont see anything inside cart.liquid and product.liquid, etc? So it is very hard for me to understand where the automated process has put those important code snippets. And, if something is not fully automatically working, then I wanted to roll-back the autoamation and do it manually. You understand what I mean!

I had to find another way by using rss feeds through the Flexify App in Shopify, nothing else worked.
After I did it using the Flexify App, I get one error:

"Events

Missing "Purchase" event in KoliBright's Pixel"
this is the only error that shows up after my products have been synced. They are synced correctly.

"

So, naturally I would like to understand where the following code should be placed:

<script>
  fbq('track', 'Purchase');
</script>
 

I do not know that!

And it is not like you say, that you just put the code on a specific page:
"modifying the “Standard Event” depending on which page it is (Checkout page, Purchase completed page, Home page, etc.)."
In that case where? I went through all my Supply theme files, and I can not find anything.

At the same time the "pixel helper" is saying everything is good.
This is very confusing!
Have a look yourself: Kolibright.com

Thanks Tom!

 

 

0 Likes
Tourist
18 0 3

The problem is that there are 2 conflicing guides and tutorials everywhere.

1. Use integrate pixel straight into Shopify Settings. Here is where my Product Catalog can not be synched.

2. Copy and paste the code to theme.liquid and everywhere else. But everywhere else is arbitrary and I have not found any good guide about this.

Whichever method I use, I can not sync my Products with the Product Catalog correclty.

0 Likes
Shopify Staff
Shopify Staff
23 0 1

Hey Daniel!

Let’s take a quick break from trying to implement the code manually :). We don’t want to overcomplicate the process by adding too many tools to the box, nor do we want to mess with the code too much as it could make this process much more difficult than need be.

I suspect your current dilemma is linked to products not yet being fully linked through the Facebook Sales Channel. For full integration, you’ll want to ensure that you’ve imported the products through to Facebook from the “Publishing” section nested within the Facebook tab underneath “Sales Channels” on the left hand side of your Admin. This is the standard process for uploading products over to Facebook from Shopify, and will assist in linking them through to your Pixel. This is also the ideal approach for running advertisement campaigns on Facebook, as in addition to the ads themselves, you can link the products directly upon your Facebook business page for a more streamlined checkout experience.

Once you’ve done this, you’ll want to make sure that your products have been checked off for availability on the Facebook Sales Channel itself - guide here - which will then sync them over and should make them available within your Business Manager as well.

If you find this still does not work, you could enlist in the use of the Facebook Product Feed app by Flexify, as this too is designed around implementing that final step of syncing your products over to Facebook

In regards to where the automatically added Pixel is stored, you would want to look within the `theme.liquid` region of your theme’s code. This is the most overlying of all the code sections, so it’s able to perform all of its intended functions by residing in there since it has additional inputs telling it when and where to fire from that location. If you are not finding it here, it may be due to alterations and other apps you’ve installed recently, so you can try looking through the version history to get a glimpse at it. Overall though this isn’t something you should have to worry about locating.



Lastly, regarding the missing event, have you tried looking for this while performing a full checkout? You can run a test checkout as a means to do this - as an event, this shouldn’t be firing unless an actual purchase occurred. Instructions on this are located right here!

Can you give these a shot and let me know if this resolves things?

Kind Regards,

Tom | Shopify Employee

0 Likes
Tourist
18 0 3

Hi Tom,

Thank you for your reply!
I have checked theme.liquid and rolled back to previous code. See my attachment!

Everything is fine in theme.liquid and there is absolutely no Facebook Pixel code there whatsoever.
What I did and almost works is the following:
I used Flexify App and manually setup a Product Catalog that I linked to my pixel and then connected to the datafeed link provided by the Flexify App. The publishing through Shopify did not work, it only created a Product Catalog that can not be linked to my pixel and is owned by Shopify, so not much I can do with it.

But now, when you go to some of my products the Pixel Helper tells me that are 2 pixels installed, instead of one. And for other products there is only 1 pixel installed. It only shows a blank space for the 2nd pixel, so its a bit inconsistent and a bit irritating. 

I have no Facebook Pixel code anywhere in my code, expect the automated pixel integration through the Online Store > preferences, which we are focused on now, as you said.

Pixel viewer sees 2 pixels for these products:

https://www.kolibright.com/collections/teeth-whitening/products/daily-use-teeth-whitening-scaling-po...

and

https://www.kolibright.com/collections/skin-care-products/products/mask-2-60g-3-74-high-quality-blac...

and

https://www.kolibright.com/collections/skin-care-products/products/mask-2-60g-3-74-high-quality-blac...


Pixel viewer sees 1 pixel for these products:

https://www.kolibright.com/collections/skin-care-products/products/soap-1-4-61-usd-100g-bamboo-charc...

ALSO,

When I go to Facebook > Publishing I get the following error message:
"Your Facebook Shop is being set up

Some features are unavailable while your shop is being set up. This may take a few minutes, please try again shortly.
"

Its been like that for more then few hours.

 

How can we explain this?

Link to my facebook business page, where I am trying to integrate the products correctly with my website: https://www.facebook.com/kolibright/

My website: https://www.kolibright.com/

Please check my websites, and use the pixel helper. I have been struggeling with this for 3 days now, and I need to know how to get it setup correclty.
If you are having bugs on your end, then pleae admit it, so I dont have to waste all this time on fixing something unfixable.
THanks!

 

0 Likes
Shopify Staff
Shopify Staff
23 0 1

I’m sorry to hear this is still giving you some grief! Rest assured, I’m here to help :).

I’ve gone ahead and inspected the product pages you’ve linked, and only one pixel seems to be firing on them all now (Pixel ID: 663900273984338). Perhaps this was something you were able to resolve in between my responses? My alternative guess is that your browser may have been caching a previous set of code from the theme, which has been known to happen for brief intervals between code changes. If you’re wanting to perform a cache flush, you can do so via this guide here. In either case, here’s an example below:



There are no current bugs between us and Pixel, I am happy to report. Rather this looks like an issue of conflict between the manually and automatically placed Pixel codes. Trying to implement both has been known to cause some confusion like this, so it’s best to ensure that no former manually entered Pixel code is left in the Theme. Though it seems you may have already accomplished this based on my findings with the Pixel Helper just now.

In regards to the Facebook Sales Channel, it does take a few hours to initialize contact between Facebook and us, so this is to be expected. Given that it’s been about a day, can you confirm that the channel is now connected as intended?

Can you let me know if there have been any updates on the Facebook end of things? There should be specifically one linked to Shopify, which you can ensure is properly linked by following these steps:

  1. From the Facebook Business Manager, click the hamburger menu icon in the upper left
    (), then select the Pixels section
  2. Next, click Partner Integrations, then Shopify from the list, then Connect Account
  3. Continue through the prompted steps, ensuring the Pixel number is the same as in your Online Store Preferences (Pixel ID: 663900273984338)
  4. Once these steps are completed, products should be available for linking into an ad campaign when going through the ad creation process.

Let me know if you’ve already tried all of these steps - I just felt it best to outline them here just in case something may have been missed. Better safe than sorry after all! From everything I can see on the Shopify end of things, your store looks to be set up properly, so I’m hoping these above steps if anything get you all sorted.  

Can you reply here and confirm all is well once performing these steps? Let’s keep the replies to this one thread, just for the sake of easier conversation :).

Kind Regards,

Tom | Shopify Employee

0 Likes
Tourist
18 0 3

Hi Tom,

If you look in your own screenshot that you sent me, you will see that there is the viewcontent that is not properly working. I doublechecked the pixel connection with Shopify, and it is correct as you can see from my attached screenshot.

BUT, if you use the PIxel Helper and click the "View Content" area you will see that it tells you that the product is NOT correctly connected to the Product Catalog, and that is the automatically created Product Catalog that Shopify is the owner off, which is not working correcly as it supposed to.

I am still back into the assumption that there is a problem on your end, and not on mine.

This happened today in the morning when I was checking my Kolibright.com page together with my Product Catalog. This means that I can not track the viewcontent of my different products.

Please help and involve experts on your side, as this should work perfectly already.

Thanks Tom!

0 Likes
Tourist
18 0 3

Screenshot attached!

0 Likes
Highlighted
New Member
32 0 0

Hi, Daniel!

Coding is always quite complicated Why don’t you give trackify X (facebook pixel app) a try. No technicalities, no coding, Easy pixel integration for as many pixels as you want which can be used to track custom events and parameters based on your goals.

Create catalogs and which automatically syncs with event data on a daily basis which then can be used for Facebook retargeting ads (DPA). Isn’t that quite easy? 

0 Likes