How to add Facebook Pixel Events in FoxyCart v1.1

My Social Media Specialist has asked me to add the following, and I have no idea how to do that. I have already added the main block of code that Facebook gives to define the pixel ID.

on the page that appears after people click the button add to cart
fbq('track', 'AddToCart');

on the page that appears when the click checkout
fbq('track', 'InitiateCheckout');

on the page that shows up after people complete their purchase
bq('track', 'Purchase', {value: '0.00', currency: 'USD'});
Tagged:
Comments
  • fc_romanfc_roman Member, FoxyCart Team
    @jasonhunter,
    • fbq('track', 'AddToCart'); would appear in your cart template, though the results might be more reliable if you fired this event on your side whenever the Add to Cart is clicked or submitted, or upon FC.client.on('cart-submit.done').
    • fbq('track', 'InitiateCheckout'); - in the checkout template
    • fbq('track', 'Purchase', {value: '{{ total_item_price|money_format }}', currency: 'USD'}); - in the receipt template, wrapped in the {% if first_receipt_display %} … {% endif %} clause. You would want to select "FoxyCart Standard with Twig" to be able to make use of this markup.
    You would also need the rest of the pixel code in each of these locations.
  • fc_adamfc_adam FoxyCart Team
    edited November 2016
    @jasonhunter,

    So for this - you'd be working with the "cart", "checkout" and "receipt" templates in your store's FoxyCart administration. You mentioned that you'd already added the main block of code - if you've already added it to the FoxyCart templates, it may be replaced by what I'm showing here. In each instance, paste the code right before the closing </head> tag in the template, and update the pixel ID to be the correct one in the init call and the image src:

    Cart:
    <!-- Facebook Pixel Code -->
    <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','//connect.facebook.net/en_US/fbevents.js');

    fbq('init', '1234');
    fbq('track', "PageView");
    fbq('track', 'AddToCart');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=1234&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    Checkout:
    <!-- Facebook Pixel Code -->
    <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','//connect.facebook.net/en_US/fbevents.js');

    fbq('init', '1234');
    fbq('track', "PageView");
    fbq('track', 'InitiateCheckout');
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=1234&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    Receipt:
    ^^receipt_only_begin^^
    <!-- Facebook Pixel Code -->
    <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','//connect.facebook.net/en_US/fbevents.js');

    fbq('init', '1234');
    fbq('track', "PageView");
    fbq('track', 'Purchase', {value: '{{ order_total|replace({'$': '', ',': ''}) }}', currency: 'USD'});
    </script>
    <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=1234&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
    ^^receipt_only_end^^
  • I used the above receipt code on my receipt template and now the template shows the

    ^^receipt_only_begin^^
    ^^receipt_only_end^^

    text on the screen when the customer views the receipt.
    Why is that?
    I've taken those lines out for now. Will the code still work?
  • fc_marijafc_marija FoxyCart Team
    edited August 31
    Hi @carvertech

    If you're working with version 2.0, that code that you removed is related to our older versions, so it was just displaying as text on your receipt. No harm to remove it. If you can share the domain (feel free to whisper it) we can double-check that for you.

    Also, for the 2.0 version, you can place the code in one place, the Foxy template configuration page in your administration instead of the individual cart, checkout, and receipt. Here's a link to that page in the admin: https://admin.foxycart.com/admin.php?ThisAction=TemplateConfig

    Here's the link to our wiki docs for version 2.0: https://wiki.foxycart.com/integration/facebook/conversion_tracking

    Hope that helps.
  • Thanks. I've updated the pixel integration for cart 2.0.
    The site is: www.dianejameshome.com
    Would definitely appreciate a quick review to see if it's configured correctly.

    In addition, the marketing guys want to add other values to the AddToCart and InitiateCheckout events.
    Specifically, I think for AddToCart then want productID and price.
    How would I pull those values into the pixel code?

    Thank you!
  • fc_marijafc_marija FoxyCart Team
    @carvertech Looks like you've placed it in the correct location and removed the old code from the cart, checkout, and receipt.

    As far as adding other values to the AddToCart and InitiateCheckout events, I'm not sure how you would pass the data exactly, perhaps this article would give you that info: https://developers.facebook.com/docs/facebook-pixel/pixel-with-ads/conversion-tracking

    I can tell you that to get the price from an item in the cart, you'd loop through the items in the cart and get the "price" product option to pass to the functions. Here's a twig example:

    {% for item in items %}
    {{ item.price }}
    {% endfor %}

    If the product ID is a custom product option, you'll need to loop through the options within the items loop and get the product ID. If you're referring to, say, the product code, you can get that at the same level as the price.

    Hope that helps.
  • fc_adamfc_adam FoxyCart Team
    @carvertech,

    To expand on Marija's reply there - I'm guessing you want to be able to track each product as it is added to the cart with the AddToCart event.

    To achieve that - you would need to take a different approach for the add to cart than what is done here. With the integration from the wiki - it's just tracking the AddToCart event whenever the cart is loaded. This means it's may not technically have been an add to cart - it could also be a view cart.

    What you'd want to do is remove the AddToCart event tracking from the snippet from the wiki - and instead add some custom code to your own website to track it. Assuming all of your add to carts are just single products (ie: you don't have any that add multiple products at the same time), the following should add in product details to the AddToCart event:
    <script>
    FC.client.on("cart-submit.done", function(params) {
    if (typeof fbq != 'undefined') {
    var details = {};
    if (params.hasOwnProperty("data") && params.data.hasOwnProperty("name")) {
    details["content_name"] = params.data.name.replace(/\+/g, " ");
    details["value"] = params.data.price;
    details["currency"] = "USD";
    details["content_type"] = "product";
    if (params.data.hasOwnProperty("code")) {
    details["content_ids"] = [params.data.code];
    }
    }
    fbq('track', 'AddToCart', details);
    }
    });
    </script>
    To confirm - you'll add that code to your own website - and not to the FoxyCart cart, checkout, receipt or configuration. You'll also want to ensure you remove the existing AddToCart event tracking from the script you got from the wiki.
Sign In or Register to comment.