Firing the Facebook Conversion Pixel

Question

I\'m still pretty new to Javascript, but I was wondering what would be the best way to fire the Facebook conversion pixel (below) without actually loading a \"confirmation\"/\"T

Answer 1

Facebook has updated their pixels, so I created my own custom function to call that will dynamically put the parameters together to submit to Facebook.

Step 1. On every page, make sure you've initialised your pixel in the head element of the page.

Step 2. Add this custom function I created (it's a bit verbose as it is the first draft, so I'm sure there are ways to optimise it for your benefit).

triggerFacebookPixel: function(type, price, product_id, product_name, product_category, num_items) {
    //See https://developers.facebook.com/docs/ads-for-websites/pixel-events/v2.8#events for documentation
    //type = "ViewContent"|"AddToCart"|"Search"|"AddToWishlist"|"InitiateCheckout"|"AddPaymentInfo"|"Purchase"|"Lead"|"CompleteRegistration"
    //product_id = Numeric Product ID. String or Integer accepted for single product events, or an array of integers for multiple products.
    //price = Decimal/Float number of individual product's price or total price paid in conversion, or the user's status for 'CompleteRegistration'
    //product_name = Optional. String of individual product's name or string of search query
    //product_category = Optional. String of product category, hierarchy's accepted. E.g. "Clothing > Shirts > Men's > T-Shirts"
    //num_items = Optional. Total number of products.
    var data = {
        value: typeof(price) == 'string' ? parseFloat(price) : price,
        currency: 'USD'
    }
    switch (type) {
        case 'Search':
            data.content_ids = product_id;
            data.search_string = product_name;
            if (product_category !== undefined && product_category != '') {
                data.content_category = product_category;
            }
            break;
        case 'Lead':
            data.content_name = product_name;
            data.content_category = product_category;
            break;
        case 'CompleteRegistration':
            data.status = product_id;
            data.content_name = product_name;
            break;
        default:
            //Product Specific Calls
            //ViewContent|AddToCart|AddToWishlist|InitiateCheckout|AddPaymentInfo|Purchase
            if (num_items == 1) {
                data.content_ids = [typeof(product_id) == 'string' ? parseInt(product_id) : product_id];
                data.content_category = product_category;
                data.content_name = product_name;
            } else {
                data.content_ids = product_id;
            }
            //"num_items" is only a parameter used in these two types
            if (type == 'InitiateCheckout' || type == 'Purchase') {
                data.num_items = num_items
            }
            //"content_type" is only a parameter used in these three types
            if (type == 'Purchase' || type == 'AddToCart' || type == 'ViewContent') {
                data.content_type = 'product';
            }
            break;
    }
    fbq('track', type, data);
}

Step 3. Call that function with the appropriate parameters.

For your thank you pop-up after a purchase, the pixel is fired differently if the user purchases 1 item as opposed to multiple items. Basically, Facebook accepts parameters for product names and categories if it's just one product, but doesn't accept those parameters if it's multiple products.

For the following examples, here is some sample product data of a user purchasing 1 item:

• Product Name: "My Super Awesome T-Shirt"
• Product ID: 182
• Product Category: "Clothing > Shirts > T-Shirts"
• Total amount user paid (including shipping/handling & tax): $10.84

And here's the function you'd call on the confirmation:

triggerFacebookPixel('Purchase', 10.84, 182, 'My Super Awesome T-Shirt', 'Clothing > Shirts > T-Shirts', 1);

When a user purchases multiple items, the pixel handles it differently, excluding the product names and categories and only sending their ID's. So let's pretend our user purchased these two items:

• Product ID's: 182 and 164 (the shirt and something else)
• Total amount user paid (including shipping/handling & tax): $24.75

This is how you'd use the function:

triggerFacebookPixel('Purchase', 24.75, [182, 164], '', '', 2);

For other standard events as defined by Facebook regarding products, you can use this same function for "ViewContent", "AddToCart", "AddToWishlist", "InitiateCheckout", and "AddPaymentInfo". Just change "Purchase" to any of those key words in your call.

The other events aren't necessarily related to products: "Lead", "Search", and "Complete Registration". You can still use this function for those key words like this.

Example: user searched for "blue shirts":

triggerFacebookPixel('Search', 0, [], 'blue shirts');

If you want to pass a product category in the user search function, you can pass that as a string at the end. I can't think of a use-case scenario where you'd know what category the user is searching for. Unless you used this in the event that the product appears in the search results and the user clicked on it from the search page. That might be what this function is actually for but the documentation isn't quite clear on that. If that's the case for you, then simply change the 0 and empty array to the actual values (price and product ID, respectively) of the product that was clicked on from the search results page, and add its category as a string as the last parameter after the search string.

Example: user submitted a form that signed them up to your newsletter:

triggerFacebookPixel('CompleteRegistration', 0, 'Signed Up', 'Newsletter');

Facebook's documentation states that "CompleteRegistration" should be used when a registration form is completed, e.g. complete subscription/signup for a service. The "Signed Up" string is the "status" parameter and the "Newsletter" string is the "content_name" parameter.

Example: user submitted a form that signed them up for a free 30-day trial of some service you offer (so they are now a lead), where the name of the service is "Free 30-Day Trial Service" and it's in the sub-category "Free Trials" under the category "My Services":

triggerFacebookPixel('Lead', 0, 'Free 30-Day Trial Service', 'My Services > Free Trials');

Facebook's documentation states that "Lead" is when a sign up is completed, e.g. click on pricing, signup for trial. I assumed that the name of the service is the parameter "content_name" and the category of the service is the "content_category" parameter.