Purchase and Initiate checkout events not firing on FB Pixel

[JeromeLisek]

Hi everyone,

We are having a problem with our Facebook pixel not firing on Purchase and Initiate checkout events.

We ve tried a bunch of things (found on this forum) and got in touch with a Meta expert and they are unable to fix it. They are basically saying it is a Shopify issue.

Last solution would be to add code manually on the purchase page but can't find the page in the code sections.

Can anyone help on this ?  Here is the store address : www.utileetordinaire.com

Thank you so much for your help !

Jerome

[magecomp]

Hello @JeromeLisek 

1. Make sure that you have entered the correct pixel ID in your Shopify settings and that the code is placed correctly on your website. You can find your pixel ID in your Facebook Business Manager. To place the code, follow the instructions in the Shopify help center.
2. Google Tag Manager can help you troubleshoot issues with your Facebook pixel. To use Google Tag Manager, you'll need to create a new tag and select the "Facebook Pixel" tag type. You'll then need to enter your pixel ID and configure the tag settings.
3. Contact Shopify support. If you've tried all of the above and you're still having problems, you can contact Shopify support for help.

To add code manually on the purchase page, you can use the Shopify Liquid code editor. To do this, follow these steps:

1. Go to Online Store > Themes > Edit Code.
2. Select the Liquid tab.
3. In the Custom Liquid section, add the following code:

{% if page_type == 'checkout_complete' %}
  <!-- Your Facebook pixel code goes here -->
{% endif %}

Save your changes and preview your store to make sure the code is working correctly.

[JeromeLisek]

Hi,

Thank you for your response ! 

My Pixel was installed correctly from the Facebook & Instagram app on Shopify and fires for all other events including the Addtocart one. We reviewed everything with the Meta expert and ran out of solutions (we even stated with a fresh Pixel).

I installed tag manager but not sure how it works. 😞

Regarding modifying the code, I can't the "Liquid tab" you are talking about. What I have is folders on the left including models, sections, extracts, etc ... In each of them I have different sections including the extension ".liquid" .

I only found a custom.js page but not sure it is the one and where to paste the code ... 

[Paul119]

Hi there, do you know how to set up Facebook pixel on GTM to track purchase events?

[hashcode_io]

@magecomp  This Solution was outdated. I also tested in multiple stores this solution is not working.

[saim007]

@JeromeLisek Go to Settings > Checkout > Order status page > now insert your FB purchase/standard event tracking or conversion tracking code.

[JeromeLisek]

Hi ! Thank you !

Can I paste this ? 

{% if page_type == 'checkout_complete' %}
  <!-- Your Facebook pixel code goes here -->
{% endif %}

[saim007]

No, your purchase event tracking code have to paste. your code was something like this

<script>    fbq('track', 'Purchase', {currency: "USD", value: 30.00});
  </script>

[JeromeLisek]

Oh, Ok, well I had something similar before but without the <script>  part on both ends.

It never worked unfortunately 😞

[Paul119]

Hi, have you solved your issue yet?

[xiddixaid]

Not a proper solution... will not work on iOS devices. and also you need to turn off tracking from Facebook & Instagram Shopify App. Just wait for shopify until they fixed it and its been almost one month Shopify did not give any solution

[xiddixaid]

You can not modify and place any code on checkout page unless you are on Shopify Plus Plan. But you can do this on thank you page.
Go to settings
Checkout
Find there "Additional scripts"

Place your Custom Facebook Pixel Code there.

[Paul119]

Yeah, I want to add code to the "additional scripts" to track purchase events. But I don't have the custom facebook pixel code. Do you have it?

[xiddixaid]

Yes, we did on our site but you need to turn off  the Facebook & Instagram App first to work it properly and also note that I will not work on iOS devices. As I have mentioned above it not the proper solution, the proper solution is to go with official Facebook App and unfortunately it is not working properly (tracking conversions 60%-70%) because of an issue shopify facing.

[Paul119]

Okay. Thank you for your help. I can't use facebook and Instagram app on my store due to I don't have Shopify payment.

[PaulC01]

Hi there, Shopify will deprecate the Order status page additional scripts. Do you know how to add a tracking code on the customer event?

[xiddixaid]

https://shopify.dev/docs/api/web-pixels-api

[xiddixaid]

This is the facebook custom code.

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

<script>
fbq('track', 'Purchase', {currency: "{{ currency }}", value: {{ total_price | money_without_currency }} });
</script>

just add it to "Additional Scripts"

[Paul119]

The code works well.👍 May I know what is the Facebook pixel code you added to "theme.liquid" file?

[xiddixaid]

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

[Paul119]

Hi there, I already added the same code in the theme liquid file, but can't track the "add to cart" events. Does it need to add the "add to cart" code to other files?

[xiddixaid]

Create an add to card event from facebook it will provide a code and invoke it that code on "Add to cart" button click.

Remember, do not forget to include lineitems in the facebook code.

[Paul119]

It was done. Thank you so much! I have another question about the Facebook catalog missed ID. Do you know how to add Microdata Tags to the store?

[xiddixaid]

did you try shopify webpixel extension?

[Anil_learner]

I am trying to integrate facebook pixel through webpixel extension. but I can't use it. because extension is sandboxed environment so how to use window and document (DOM elements). please guide me.

[xiddixaid]

event.context

[falcepatic]

the solution is just on you business manager

[hashcode_io]

@JeromeLisek  here my suggestion many of the merchant  are actively using the  Meta Official app here link  you can try this.

[PaulC01]

Hi there, my store can't use Meta Official app, do you know how to add facebook pixel on the customer events? or how to add facebook pixel to GTM?