Firing custom pixel events using the Facebook Pixel App (in Clickfunnels)?

Technical
,
1

Using the Facebook Pixel app through Funnelish makes it super easy to track the basic pixel events you’ll need for a successful ad set (ie. Purchase, Lead, AddToCart, CompleteRegistration, PageView, and ViewContent), but for some edge cases you might want to track certain custom events as well.

In this short tutorial, I’ll be explaining how you can trigger pixel events manually, while still using the Facebook Pixel app to do the heavy lifting for you.

You may find more about setting up the Facebook Pixel app at How To Use Facebook Pixel App With Clickfunnels?

Let’s take “InitiateCheckout” pixel event as an example, even though the Facebook Pixel app does trigger both AddToCarts and Purchases with their purchase values for all orders (including the order bump and the OTOs), it does not trigger the InitiateCheckout event, since it heavily depends on your business logic behind your funnel and in most cases can be replaced by Lead/AddToCart which are triggered whenever an optin takes place at any funnel-step throughout your entire funnel.

Now triggering our custom pixel event can be done through many ways let’s see some of them:

1. Triggering a Facebook Pixel event when the buy button is clicked

Generally, It’s safer to trigger the Facebook pixel events when a button is clicked rather than when a page is visited, as it’s less likely for the pixel event to be triggered multiple times.

The code below will trigger the InitiateCheckout event whenever the BUY button is clicked on any order form (including two-step order forms):

<script>
$('a[href="#submit-form-2step"], a[href="#submit-form"]').on("click", function() {
    ​fbq('track', 'InitiateCheckout');
});
</script>

You may replace the event InitiateCheckout with any other pixel event supported by Facebook including custom events.

2. Triggering a Facebook Pixel event when a page is visited

Even though it’s not recommended due to the fact that whenever your customer refreshes the Clickfunnels’ funnel step the pixel will be fired again (and that’s something the Facebook pixel app prevents on the other events that are fired through the app itself), but you may still fire any pixel event when the page is visited by simply delaying firing the event till the Facebook Pixel app has finished loading. An easy way of doing it would look like this:

<script>
setTimeout(function(){
  ​fbq('track', 'InitiateCheckout');
}, 6000);
​</script>

What the above code does, waits for 6 seconds (6000 milliseconds) before firing the InitiateCheckout event, the waiting period is just to make sure that the Facebook Pixel app is given enough time to load and initialize the pixel before attempting to fire that event.

Again, We don’t really recommend doing the second approach as it means whenever your customer refreshes the funnel step the pixel event will be triggered over and over again.

You may use any of the codes above on any of your Clickfunnels’ funnel steps, just copy it into your funnel step > Settings > Head tracking code box.

Hope that was helpful, feel free to leave any questions or feedback below,
@samlee

1 Like
2

@samlee

The OnClick event does not seems to work when the customer is using paypal. It works when the customer is using stripe.

This is the code we are using, but it does not seem to fire when paypal is the payment option.

  var button = document.getElementById('tmp_button-70655-155-131-170');
  button.addEventListener(
    'click', 
    function() { 
      fbq('track', 'Purchase', {
    content_name: 'upsell1',
    value: 39,
    currency: 'USD',
  });          
    },
    false
  );

Any advice?

Thanks,

Glenn

1 Like
3

Hi @glenncuc,

That’s an interesting one, have you tried using JQuery instead like this:

 $('#tmp_button-70655-155-131-170').on('click', function() { 
      fbq('track', 'Purchase', {
        content_name: 'upsell1',
        value: 39,
        currency: 'USD',
     });
});

I’m not sure if that will solve the problem but it’s worth trying I guess, also It will be better if you can share the page URL or send it to me in a private message to check it.

4

Is there a way to modify this script to use for submitting a hidden webform form perhaps?
The on click script I understand, but how could I modify this?

Wanting to send data from the first step of 2 step order form, into crm but can only be done via a webform. Thanks in advance.