Facebook Pixel Issue - Not Firing on Add to Cart Button

[Tudi]

Hey there,

I run www.oacoac.ro and using the Supply theme. I have installed the FB pixel via the automatic integration, so I haven't tweaked anything regarding the script on the code.

My issue is that the ATC event specifically, misfires from the theme's main ATC button:

 
I also have a secondary ATC button, from the app Sticky Cart by Uplinkly that currently pops up at the bottom of the user's screen when he or she scrolls for over 30% of the page. It's the one at the bottom in this pic:

This one does fire the ATC event correctly - I'm assuming as soon as I installed the app, it did a takeover of the main ATC functionality and Shopify assigns the pixel firing code to it, rather than the main ATC button from the theme. 

Is there a way I can have both buttons firing properly? Do I need to manually add the ATC event code on the main button and if so, where? 😄

Thanks in advance for your help!

Tudor

[Mark_JVC]

Hey there, 

not tested but you could try to bind the custom fbq event to the button (easiest method): 

To add this code go to -> Online Store -> Themes -> the theme dropdown "Actions" -> Edit Code 

find your product-template.liquid under sections and add this snippet to the bottom before the opening {% schema %} tag:

<script>
  window.addEventListener('load',function(){
    // bind the event to the button using the element id
    jQuery('#addToCart-product-template').click(function(){
      // if the pixel is not installed don't fire the beacon
      if(typeof fbq === 'undefined') {
        console.log("Facebook Pixel not set!");
      } else {
        // fire the custom event
        // more infos here: https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking/#custom-events
        fbq('trackCustom','ATC_Pur');
      }
    })
  })
  </script>

You could also add it to the add to cart function in JS but the one above is the easiest solution for your problem. 

Cheers,

[Tudi]

Hey Pacman, thanks for the reply! I think your solution is close to what I'm looking for, but I was wondering if I can add the same (standard) ATC event in Facebook to both buttons. I believe what you're suggesting is having another custom event for one ATC button and the standard event for the sticky ATC button? 

[Mark_JVC]

Ok i see - so you said the normal fbq add to cart event fires on the dynamic sticky button which comes from an app. 

So you don't need to change anything there, the only thing to change is the event fired then - i think the standard event is: 

fbq('track', 'AddToCart');

Just replace this with the custom event in my code.

[Tudi]

It didn't work unfortunately. I added the script right before the schema tag, but the pixel helper wouldn't recognize any pixel at all. 

Is there a way to add the fbq('track', AddToCart') firing on click directly on the template's main ATC button? Thanks!

[Mark_JVC]

Yes, if you are sure that facebook pixel is installed then you can add this directly to the button (not the best solution but it should do the job):

Still like before in the product-template.liquid file find the button using search "addToCart-product-template" - it should appear like this:

    <button type="submit" name="add" id="addToCart-product-template" class="btn btn--wide btn--add-to-cart" style="cursor: pointer;">
    <span class="icon icon-cart"></span>
    <span id="addToCartText-product-template">Adauga in cos</span>
    </button>

Then before the " type="submit" part add this litte piece (only add this code - don't copy the result):

onclick="fbq('track', 'AddToCart');"

So it should look like this (don't copy paste this):

<button onclick="fbq('track', 'AddToCart');" type="submit" name="add" id="addToCart-product-template" class="btn btn--wide btn--add-to-cart" style="cursor: pointer;">
  <span class="icon icon-cart"></span>
  <span id="addToCartText-product-template">Adauga in cos</span>
</button>

[DogsBrand]

Hello,

I have that problem too. My pixel is not firing the AddToCart Event. In my facebook ads manager i have 1 add to cart and 10 initiate checkouts which is impossible because customers first go through the cart page before they go to the checkout page.

Please help!

[Mark_JVC]

Hello there, 

please provide more details:

- Do you use a custom add to cart button (generated by an app) 

- Do you have the Shopify Express Checkout Buttons active on the product page? 

- Can you provide a demo link or link to your store? 

Greetings, 

[DogsBrand]

No, i don't use shopify express checkout buttons.
My pixel is working on other pages except the cart page.
Here is a link to my store: https://dogsbrand.com/

[Mark_JVC]

Hello there, 

just to clarify - in your first post you wrote the "Add to Cart Event" is not firing. In your last post you say the pixel is not working on the cart page. You probably still mean the same - that the "Add to Cart Event" is not firing. 

So i took a quick look and from what i can see the event gets detected but it sends this to facebook:

https://www.facebook.com/tr/?id=491143278204497&ev=SubscribedButtonClick&dl=https%3A%2F%2Fdogsbrand.com%2Fproducts%2Fturbo-roller%25E2%2584%25A2-best-pet-hair-remover-2020%3Fvariant%3D31359438782529&rl=https%3A%2F%2Fdogsbrand.com%2Fcart&if=false&ts=1582899318515&cd%5BbuttonFeatures%5D=%7B%22classList%22%3A%22btn%20product-form__cart-submit%22%2C%22destination%22%3A%22https%3A%2F%2Fdogsbrand.com%2Fcart%2Fadd%22%2C%22id%22%3A%22%22%2C%22imageUrl%22%3A%22%22%2C%22innerText%22%3A%22ADD%20TO%20CART%22%2C%22numChildButtons%22%3A0%2C%22tag%22%3A%22button%22%2C%22name%22%3A%22add%22%2C%22value%22%3A%22%22%7D&cd%5BbuttonText%5D=ADD%20TO%20CART&cd%5BformFeatures%5D=%5B%7B%22id%22%3A%22%22%2C%22name%22%3A%22form_type%22%2C%22tag%22%3A%22input%22%2C%22inputType%22%3A%22hidden%22%7D%2C%7B%22id%22%3A%22%22%2C%22name%22%3A%22utf8%22%2C%22tag%22%3A%22input%22%2C%22inputType%22%3A%22hidden%22%7D%2C%7B%22id%22%3A%22ProductSelect-product-template%22%2C%22name%22%3A%22id%22%2C%22tag%22%3A%22select%22%7D%2C%7B%22id%22%3A%22Quantity-product-template%22%2C%22name%22%3A%22quantity%22%2C%22tag%22%3A%22input%22%2C%22inputType%22%3A%22number%22%7D%5D&cd%5BpageFeatures%5D=%7B%22title%22%3A%22TURBO%20Roller%E2%84%A2%20-%20Best%20Pet%20Hair%20Remover%202020%5Cn%E2%80%93%20DogsBrand%22%7D&cd%5Bparameters%5D=%5B%5D&sw=1920&sh=1080&v=2.9.15&r=stable&a=plshopify1.2&ec=3&o=30&fbp=fb.1.1582898273810.1694803711&it=1582899283754&coo=false&es=automatic&tm=3&rqm=GET&dt=k3wz0gstsnel70lunugxxlnkox2xja2r

Can you confirm that you track "SubsribedButtonClick" Events for another form? 

As you can see in my screenshot the event gets fired. Also i cannot say if its maybe an app interfering or something else. What i can say tho is that worst case - you can still setup an inline custom event when the button is clicked. 

You can read more about this topic here: https://www.facebook.com/business/help/153210695223635?id=1205376682832142

 

If you want for example to manually trigger the event you could use something like this:

<button type="submit" name="add" onclick="fbq('track', 'AddToCart');" class="btn product-form__cart-submit" data-add-to-cart="">
    <span data-add-to-cart-text="">Add to cart</span>
</button>

you can see this one line of code: 

onclick="fbq('track', 'AddToCart');"

This is just a quick solution - and i still recommend to fix the original problem or maybe your dev can take a deeper look into that. 

Hope it helps. 

[nurumma86]

Your add to cart sometimes fire only that why you face this problem .If need any help about fb pixel .talk to me .or you can go here 

[nurumma86]

I can fix shopify this type huge issue .If anyone need any pixel help just click here 

[Scrowp]

Hi there,

I know this thread is a bit old, but here is the solution for Shopify merchants using Scrowp or Dawn theme.

https://scrowp.com/community/marketing-advertisement/add-to-cart-event-on-facebook-pixel-aint-firing