Question posted in
You can find the official documentation here.

Ajax Call Function – Fire Facebook Pixel Conditionally & Redirect To Thank You Page – Jquery ajax

I am having difficulty getting this portion of Ajax Call request on my form to work properly. A basic redirect function has been working, however I am trying to update the function to conditionally fire a facebook pixel based on a user input value from a dropdown I have in my form. Here is the relevant html and ajax call function:

Here is the HTML dropdown

 <label for="homeowner">Are you a homeowner?</label>
    <select id="rentorown" name="homeowner" required >
    <option value=""></option>
      <option value="own">Yes, I own my home.</option>
      <option value="rent">No, I rent.</option>
    </select>

Here is the ajax call

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'https://hooks.zapier.com/hooks/catch',
        type:'post',
        data:$('#myForm').serialize(),
        success:function fbpixel(){
         var own = document.getElementById("rentorown").value;   

  if (own ==="own") {
 fbq('track', 'Lead'); 
 window.top.location = "https://www.sampleurl.com/thankyou";
} else {
  fbq('track', 'AddToCart');
  window.top.location = "https://www.sampleurl.com/thankyou";
}

        }
    });
});

The above call function is properly posting the lead submission data to zapier however, the pixel is not conditionally firing and it is not redirecting the page.

Do you have any suggestions on how to properly accomplish the above with an ajax call function?

Thanks!

Tags:

2

Answers


  1. 0

    Remove fbpixel from your code and it should work:

    success: function () {
  // your function code
}
    Login or Signup to reply.
  2. 0

    You could try promisifying the Ajax call like so:

    function afterAjax() {
  return new Promise((resolve, reject) => {
    $('#myForm').submit(function(e){
      e.preventDefault();
      $.ajax({
        url: 'https://hooks.zapier.com/hooks/catch',
        type: 'post',
        data: $('#myForm').serialize(),
        success: function(data) {
          resolve(data)
        },
        error: function(error) {
          reject(error)
        }
    });
}); 


afterAjax().then(data => {

  var own = document.getElementById("rentorown").value;   

  if (own ==="own") {
    fbq('track', 'Lead'); 
    window.top.location = "https://www.sampleurl.com/thankyou";
  } else {
    fbq('track', 'AddToCart');
    window.top.location = "https://www.sampleurl.com/thankyou";
  }

}).catch(error => {
   console.log(error)
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search