jquery - Facebook Pixel Event ViewContent not firing properly on Product Page Shopify

I'm trying to figure out why my facebook event "ViewContent" is not firing properly. When I visit any product page, I can see the facebook pixel helper load the viewcontent, but after the page is done loading all the scripts it disappears. Upon page refresh it will show the event being fired. Which is weird. It also keeps throwing a duplicate ID in my console whereas I do not have a duplicate ID anywhere else.

My ID is pasted in the online store > preferences > Facebook Pixel

<!-- Additional Scripts -->
   {% if first_time_accessed %}
   <script>
    fbq('trackSingle', 'XXXXXXXXXXXXX48', 'Purchase', {
     content_type: 'product',
     value: '{{ total_price | money_without_currency }}',
     currency: '{{ shop.currency }}'
     });
   </script>
   {%endif%}
<!-- end additional Scripts -->
<!-- code in product.liquid-->
   <!-- FB -->
    <script type="text/javascript">
      $( '#AddToCartForm' ).submit(function() {
        var customVal = $(this).find('#AddToCart').attr('data-price');
        fbq('track', 'AddToCart', {
         content_ids: [{% for item in cart.items %}'{{item.variant_id}}',{% endfor %}],
         content_type: 'product',
         value: customVal,
         currency: 'USD'
         });
       });
   </script>
  <!-- fb -->
Copy code

If you visit the site www.gurunanda.com (https://www.gurunanda.com) and use the facebook pixel helper tool it'll show view content is loading on a product page but disappears after everything is fully loaded. It also shows dual firing of events. Such as addtocart and viewContent (once product page is reloaded).

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.