---- dataentry integration ----
type                           : integration # do not change this line
supports-foxycart-version-from : 2.0 # Minimum required FoxyCart version for this to work
supports-foxycart-version-to   :  # Last FoxyCart version that supports this (leave empty if unknown)
systems                        : facebook # the system(s) that the integration is for, separated with commas if more than one
name                           : Facebook Pixel Conversion Tracking # the name of the integration
description                    : Tracking Foxy conversions with the Facebook Pixel # 
tags_tags                      : conversion, tracking, analytics, pixel # tags, separated by commas. don't include the "system" here.
date_dt                        : 2017-07-24 # the date in YYYY-MM-DD format
version                        :  # if you have a version for your code, enter it here
developer_url                  :  # if you'd like a link back to your site, stick it here
----




====== Facebook Pixel Conversion Tracking ======

<WRAP important round>
//**Please note:**//
The code on this page is submitted by members of the FoxyCart community, and may not verified by FoxyCart.com LLC in any way, shape, or form. Please double check the code before installing. If you need help with it please [[https://foxy.io/contact|reach out to us]], but if we cannot offer assistance (due to unfamiliarity with this particular system or language) we apologize in advance.
</WRAP>
===== Installation =====

<WRAP center round important 90%>
As Facebook now requires that you verify all domains that you have the tracking pixel on, you will need to make use of a custom subdomain for your store for the Facebook tracking pixel to work. Configuring a custom SSL subdomain for your store is free, it just needs to be requested, and once configured, add some DNS records to your domain. You can [[v:2.0:custom_domain|see more details on that here]].
</WRAP>


Within your store's FoxyCart administration, go to the "configuration" section and enable the "Add custom header and footer code to your templates" option. Within the text boxes that appear, paste the following code into the "footer" textarea:

<code javascript>
{% if context != "cart" or cart_is_fullpage %}
<!-- Facebook Pixel Code -->
{% set fb_pixel_id = "###########" %}
<script>
	!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
	n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
	n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
	t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
	document,'script','https://connect.facebook.net/en_US/fbevents.js');

        fbq('set', 'autoConfig', false, '{{ fb_pixel_id }}');
	fbq('init', '{{ fb_pixel_id }}');
	fbq('track', "PageView");
	
	if (typeof fbq != 'undefined') {
		{% if context == "cart" %}
			fbq('track', 'AddToCart');
		{% elseif context == "checkout" %}
			fbq('track', 'InitiateCheckout');
		{% elseif first_receipt_display %}
  			var item_contents = [];
  			for (var i = 0; i < FC.json.items.length; i++) {
  				item_contents.push({"id": FC.json.items[i].code, "quantity": FC.json.items[i].quantity, "item_price": FC.json.items[i].price_each});
  			}
			fbq('track', 'Purchase', {value: '{{ total_order }}', currency: '{{ locale_info.int_curr_symbol|trim }}', contents: item_contents, content_type: 'product'});
		{% endif %}
	}
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={{ fb_pixel_id }}&ev=PageView&noscript=1" /></noscript>
<!-- End Facebook Pixel Code -->
{% endif %}
</code>

Within the script, edit the first line to set your Facebook pixel ID ''{% set fb_pixel_id = "###########" %}''. 

The script will automatically include the Facebook Pixel initialisation code on the full page cart, checkout and receipt, but will rely on you including it on your own website for the Sidecart view. It will also track page views on the full page cart, checkout and receipt, as well as tracking ''AddToCart'', ''InitiateCheckout'' and ''Purchase'' events.

On your own website, in order to track the ''AddToCart'' event for Sidecart, add the following code to the footer of your website (this assumes you've placed the Facebook Pixel initialisation code on your website already too):

<code javascript>
<script>
    var FC = FC || { };
    FC.existingOnLoad_pixel = (typeof FC.onLoad == "function") ? FC.onLoad : function() { };

    FC.onLoad = function () {
        FC.existingOnLoad_pixel();
        FC.client.on('cart-submit.done', function (params) {
            if (
                typeof fbq != 'undefined'
                && params.hasOwnProperty('data')
                && FC.client.isActionNeeded(params)
                && (!FC.sidecart || (FC.sidecart
                    && !FC.sidecart.shouldUseFullpageCart()
                    && !FC.sidecart.bypassSidecart(params)
                ))
            ) {
                try {
                    var url = new URL(decodeURI(params.url).replace(/\|\|[\d\w]{64}(\|\|open)?/g, ''));
                    var attribute_list = ['name', 'code', 'price', 'quantity'];
                    var map = new Map();

                    new URLSearchParams(url.search).forEach(function (value, key) {
                        var parts = key.split(':').reverse();
                        var property = parts[0];
                        var id = parts[1];
                        if (['h', '__', 'x'].includes(id) === false && attribute_list.includes(property)) {
                            var object = map.get(id) || { 'quantity': 1 };
                            value = value.split('{')[0];
                            if (['quantity', 'price'].includes(property)) {
                                value = (property == 'quantity') ? parseInt(value) : parseFloat(value);
                            }
                            object[property] = value;
                            map.set(id, object);
                        }
                    });

                    var items = Array.from(map.values());

                    var items_added = items.map(function (item) {
                        if (item.hasOwnProperty('name') && item.hasOwnProperty('price') && item.quantity > 0) {
                            var added = {
                                'name': item.name,
                                'code': item.code || '',
                                'quantity': item.quantity,
                                'price': item.price
                            };
                            return added;
                        }
                    }).filter(function (item) {
                        return item !== undefined;
                    });
                    if (items_added.length > 0) {
                        var event_contents = [];
                        var event_value = 0;
                        for (let i = 0; i < items_added.length; i++) {
                            const item = items_added[i];
                            event_value += item.price * item.quantity;
                            event_contents.push({ 'id': item.code, 'quantity': item.quantity, 'item_price': item.price });
                        }
                        fbq('track', 'AddToCart', { 'content_name': decodeURIComponent(items_added[0].name), 'value': event_value, 'currency': FC.json.locale_info.int_curr_symbol.trim(), 'contents': event_contents, 'content_type': 'product' });
                    }
                } catch (error) {
                    // console.log(error);
                }
            }
        });
    }
</script>
</code>