Issue with Meta pixel integration

[Not_so_good]

Long story short - according to our specific marketing needs (as we will engage different marketing team with different FB accounts) we need to integrate several meta pixel directly to our store. 

We have conduct our research and it seems that official Meta Pixel App doesn't support several pixel - we could add only one FB account = 1 pixel. 

Other Apps seems to not fit our needs and also they are pretty expensive and charge at least 10$ for additional pixel, but as a result of test the tracking didn't work well. 

We have tried to manually add meta pixel code to theme.liquid using trackSingle function to fire each pixel only for a certain products based on unique product ID, but as a results the tracking was disgusting and unclear (we even didn't understand which campaign gain results and which not). 

Here is the example of our meta pixel code: 

// Initialize the first pixel
    fbq('init', 'first_pixel_id');
    fbq('trackSingle', 'first_pixel_id', 'PageView');
    // Track ViewContent event for first pixel 
    fbq('trackSingle', 'first_pixel_id', 'ViewContent', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 16.99,
      currency: 'USD'
    });
    // Track AddToCart event for first pixel
    fbq('trackSingle', 'first_pixel_id', 'AddToCart', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 16.99,
      currency: 'USD'
    });
    // Track InitiateCheckout event for first pixel 
    fbq('trackSingle', 'first_pixel_id', 'InitiateCheckout', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 16.99,
      currency: 'USD'
    });
    // Track AddPaymentInfo event for first pixel                       
    fbq('trackSingle', 'first_pixel_id', 'AddPaymentInfo', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 16.99,
      currency: 'USD'
    });
  
    // Initialize the second pixel
    fbq('init', 'first_pixel_id');
    fbq('trackSingle', 'first_pixel_id', 'PageView');
    // Track ViewContent event for second pixel
    fbq('trackSingle', 'first_pixel_id', 'ViewContent', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 19.99,
      currency: 'USD'
    });
    // Track AddToCart event for second pixel
    fbq('trackSingle', 'secodn_pixel_id', 'AddToCart', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 19.99,
      currency: 'USD'
    });
    // Track InitiateCheckout event for second pixel 
    fbq('trackSingle', 'secodn_pixel_id', 'InitiateCheckout', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 19.99,
      currency: 'USD'
    });
    // Track AddPaymentInfo event for second pixel 
    fbq('trackSingle', 'secodn_pixel_id', 'AddPaymentInfo', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 19.99,
      currency: 'USD'
    });

   </script>
   <noscript>
   <img height="1" width="1" style="display:none" 
   src="https://www.facebook.com/tr?id=first_pixel_id&ev=PageView&noscript=1" />
   <img height="1" width="1" style="display:none" 
   src="https://www.facebook.com/tr?id=second_pixel_id&ev=PageView&noscript=1" />
   </noscript>
   <!-- End Meta Pixel Code -->

Also we have added additional purchase only pixel tracking on Post Purchase Page (thank_you page)

<!-- 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');
    
    // Initialize the first pixel
    fbq('init', 'first_pixel_id');
   // Track purchase event for the first pixel
   fbq('trackSingle', 'first_pixel_id', 'Purchase', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 16.99,
      currency: 'USD'
});

    // Initialize the second pixel
    fbq('init', 'second_pixel_id')
// Track purchase event for the second pixel
   fbq('trackSingle', 'second_pixel_id', 'Purchase', {
      content_name: 'product_name',
      content_ids: ['product_id'],
      content_type: 'product',
      value: 19.99,
      currency: 'USD'
});
    
   <!-- Purchase NoScript -->
   // Purchase for the first pixel
   <noscript> 
   <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=first_pixel_id&ev=Purchase&cd[content_name]=product_name[content_ids]=product_id[content_type]=product&cd[value]=19.99&cd[currency]=USD" />
   // Purchase for the second pixel 
   <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=second_pixel_id&ev=Purchase&cd[content_name]=product_name[content_ids]=product_id[content_type]=product&cd[value]=19.99&cd[currency]=USD" />
   </noscript>
   <!-- End Meta Pixel Code -->

But it didn't help. As a result we saw unclear tracking which didn't aligned with real store purchases. I've contacted Shopify Support team and they told me that everything seems to be fine for the pixel implementation perspective and redirected me to Meta support which told me that according to Meta Pixel Helper extension - we set up pixel not right and every event is firing within PageView. 

Original Meta Support message: 

So far, our engineers have come up with almost the same answer, namely that after checking the website, they see that there are multiple pixels implemented and that events such as AddPaymentInfo, AddToCart, InitiateCheckout, PageView, and ViewContent are fired on the target PageView, which is considered an incorrect implementation.

Facebook recommends implementing the Pixel Code together in the header of the website, and it is important that the JS code matches the code from the event manager. Incorrect implementation can cause issues with reporting, targeting, or event triggering.

Also, note that if multiple pixels are configured on the same URL, it can cause crossfire between pixels, resulting in a warning. Having multiple pixels on the same page with their own underlying codes and events can lead to crossfire, double fires, and ultimately inaccurate tracking.

They insist that the problem is in the pixel implementation and ask you to contact the website developer to check the pixel implementation and event setup.

After setting up the events correctly and verifying the pixels, the engineering team asks to check the URL and make sure the events are firing properly.

We have tried to add pixel within customer events and custom pixel sandbox, but it works the same as manually added pixel code. Could someone suggest what was done wrong and how to fix the correct tracking issue?

[masoomi-saxena]

You can try to fix this tracking issue with the following tips: 

Put All Pixel Codes in One Place: Make sure all the codes that start and track your pixel activities are in the website's header. This helps keep everything organized and works better.

Fix Errors in Your Codes: You might have used the same pixel ID for different pixels by mistake. Make sure each pixel has its own unique ID in the codes. 

Check if Pixels are Working Right: Use the Meta Pixel Helper, a tool for your browser. It help you check if each event is firing from the correct pixel ID. And in case there are any warnings or errors it will show that as well. 

Make Sure Pixels Don’t Mix Up: To prevent crossfire and double firing, ensure that each pixel is only triggering its intended events. This may require some custom JavaScript to conditionally fire pixels based on specific user actions or page conditions.

Test Everything: After you make these changes, check different parts of your website to make sure everything is tracking correctly. Make sure each pixel is recording the right activities.

Apart from that, as you said, the Meta Pixel app doesn’t support multiple pixels, and other apps are costly, I suggest you try this free app Nabu for Facebook Pixel app. It offers simple 1-click pixel implementation/setup of Meta & Instagram pixels. 

Plus, you, as a Shopify store owner, can install multiple pixels using this app. And there are numerous other benefits, like unlimited server-side tracking, no manual coding required, etc. In case you get stuck somewhere, then you also get 24/7 support from certified support members. 

So, all in all, I feel that it will help you with all your concerns.

Good luck! 

[Not_so_good]

Hi, thank you for response. We have double checked everything. There is no same pixel ID for different pixels by mistake. We have managed to fire each pixel specifically for unique product ID using trackSingle function, but for some reasons FB receive trash data. Originally we have 4 sells and pixels shows 1357 purchases, even if we will sum whole metrics (add-to-cart/checkouts/purchases etc.) we're not gonna get that number.

Considering pixels placement we have placed whole events (except Purchase to theme.liquid) and only purchase we have placed on Post Purchase Page. 

We have tried to run pixel using custom pixel (customer events from Shopify Admin), but we are facing the same issue. Maybe there is some mistakes in the code and we are blind and don't see them. 

Right now we are testing GTM + Meta pixel implementation, I hope we will finally fix the issue, because this is insane - Shopify support told that everything is fine, meta support - didn't provide any help (just send information from developers documentation - where we actually found description about trackSingle etc.). 

[masoomi-saxena]

I see. Is adding the second pixel [in the code] creating the issue? You can even use one pixel for multiple pages. However, in some cases you cannot. Also, I hope the code doesn't have an indentation problem. SOmetimes when there is an indentation error, the code doesn't run.  

Otherwise, if you want to simplify your pixel-tracking operations, I highly suggest using an app called AdNabu's Facebook Pixel app, which is free and completely removes the hassle of adding and removing code from the theme file. It's pretty straightforward. 

[masoomi-saxena]

It also looks like your pixel tracking is currently set up to monitor all pages and events. For more accurate tracking, consider adjusting it so that InitiateCheckout, AddToCart, and AddPaymentInfo are triggered based on specific customer actions rather than being tracked on every page load.

[Techedge]

Long story short, I really don't get why you are trying to achieve this difficult goal without even understanding the basics of pixel tracking. I can clearly see where is you error, but I won't help you because:

1) if you are a marketing specialist (or any other position other than developer) YOU SHOULD REALLY HIRE A SKILLED DEVELOPER;
2) if you are a developer well... good luck, it's a VERY SIMPLE TASK and you are not getting it, my congratulations!

AdNabu's Facebook Pixel could be a solution, or maybe you just have to rethink all your strategy... are you sure you need more than one pixel (i bet not)?

[Sam_Mahmud]

Hello,

Thanks for your query.

Your datalayer not going to work in the theme.liquid. because theme is separate from purchase checkout page.

it is recommend to set up datalayer creating a new snippets in the theme.

Once you set up these 2 datalayer you will get datalayer event in the Google Tag Manager. from there you can trigger the events for particular GTM tag.

furthermore you can all the e-commerce data related to product purchase.

Thanks