Facebook Pixel Widget > Card Form: Fire a custom event when Start button is clicked

Hello,

i am trying to add a custom event on button (on the form) through fb.

Unfortunately when i embed you form to my site and start the procedure with fb, fb doesn't see the form and it doesn't let me click on the button to add the custom event (pixel), i send you a short video. If i do this procedure instead with your jotform link (without embedding it) it works, fb sees it.

How can i fix this?

please i need help ASAP,

thanks

video

Even if i do this on your jotform button the pixel event will not fire when a user will go through my domain, it will work only if i use your domain link https://form.jotform.com/wheywellnessmarketing/diegoraffa to fire that pixel, which i cannot do, because i have to run with with fb ads with my own domain https://wheywellness.it/jot-quiz/

This explanation below that you sent me works with your direct link form but not with an embedded form on my site:

Go to your Event Manager List: https://www.facebook.com/events_manager2/list.

Select the correct Data Sources.

Click Add Events > Choose From The Pixel as shown below:

Enter the URL of your form, and click the Open Website button.

On the next page, you can set up to Track buttons or Track the URL (to set up tracking conditions):

If you click the Track New Button, it will allow you to choose the form elements that have a "button" selector.

If you click the Track a URL option, it will allow you to choose a specific event to track:

Next, in the Settings tab, we recommend setting up your Traffic Permissions:

Hi,

thank you for reaching out to us. I can see the Facebook Pixel widget on your form. Firstly, please make sure that you have selected the correct events for your purpose:

Then, you can test your event by following the guide at the bottom of this guide: https://www.jotform.com/help/1072-how-to-track-form-submissions-with-facebook-pixel

Please let us know if the issue persists and we will look further into it.

I am not using that because you don't let me add a custom event on a button. For example i want to put an event when someone starts the quiz form, it is not possible with that widget

Hi,

thank you for clearing this up. Please give us some time to look into this and we will get back to you as soon as possible.

thanks

@wheywellnessmarketing

I think the reason why FB Pixel couldn't read the embedded form elements is that it is loaded in an iframe which is technically a separate document. Is there any problem with using the default script embed code? If not, please re-embed your form using the default embed code of your card form, see if FB pixel will be able to read the button elements on the form.

Here's how:

If this doesn't work, I'm afraid you'll have to consider using the direct link of the form in order for the FB pixel to work.

We are out of any possible options but we'll try to dig further and see if we could find a workaround. We'll keep you posted once we found one.

i tried default script embed code and it doesn't work either

Please try to fix this ASAP with your developer because it is a bug and i cannot track custom event on the form with fb ads with the event set up tool.

I even bought the bronze plan.

Greetings,

We apologize for the inconvenience.

Please allow me some time to look into this and I'll get back to you via this ticket with an update.

Thank you.

@wheywellnessmarketing

I apologize for the delayed response. Just to clarify, there's no bug with your embedded form or your FB Pixel. The function you're looking for is just not currently supported. FB Pixel Event Setup Tool isn't designed to access iframe contents where your form elements are loaded so that's the reason why you can't select the start button of your embedded card form when you run the Pixel's Event Setup Tool. This however works on the standalone version of the form because you're accessing the form URL directly, not embedded.

Anyway, you may want to consider this workaround for now.

You can track custom events on page load by embedding FB Pixel directly into your form using the FB Pixel IMG code.

<img src="https://www.facebook.com/tr?id=PIXELID&amp;ev=EventName" height="1" width="1" style="display:none"/>

Just replace the PIXELID with your actual FB Pixel ID and EventName with your custom event name.

You can also add the event object properties as parameters in the URL. Example:

<img src="https://www.facebook.com/tr?id=PIXELID&amp;ev=ViewContent&cd[content_name]=Sandal&cd[content_category]=Shoes&cd[content_type]=product&cd[content_ids]=1234&cd[value]=0.50&cd[currency]=USD" height="1" width="1" style="display:none"/>

To embed this IMG code into your form, use the Paragraph tool. Example:

If you have any questions, let us know.

Thanks.

Yes i have tried and it is not working, check if i have done it correctly,

In theory the event should fire after they click on the button 'Inizia il quiz' but it doesn't do it.

i changed the pixel event to "iniziatecheckout'.

as you can see the event fired even BEFORE starting the quiz (button).

how do i fix this? 

it has to fire AFTER they click on the quiz button

Unfortunately, the workaround I shared is fired on page load, not a click of any button because like I've said it is not currently supported by our FB pixel widget.

For now, I can only escalate this as a feature request to our developers. Once this is implemented in the future, we'll inform you here.

The image you have inserted is for the developer? because that is what should do already :D

Yes, that's right. I added that image based on what I've understood on what you're trying to achieve. I have also added this to the ticket description so our developer would quickly understand what the feature request is all about by just looking at the image. :)

Anyway, this is already added to our feature request list. This may not be likely added soon but once we have an update, we'll inform you here.

Thanks for your patience and understanding.