Facebook Pixel - need some help with shopsite instructions

[notvinnie]

Hello All,

I would like a little help with getting the Facebook Pixel to work and also to correctly track AddToCart's.

I have followed Shopsite's most recent instructions on the Facebook Pixel, which seems to have been updated on January 14th.

Hoping someone can help, I have pasted from the Pixel Helper plugin, what the Add To Cart button is currently producing.
It seems to be being picked up as just a custom event rather than an actual Add To Cart.

Within the shopsite instructions, it says to Make sure also that your add to cart form has id="form[-- PRODUCT.RecordNumber --]" as an attribute...

How do I set PRODUCT.RecordNumber as an attribute of the add to cart form?

Many Thanks in advance, for any help you can offer.

formFeatures: Hide
[{"id":"","name":"storeid","tag":"input","inputType":"hidden"},
{"id":"","name":"dbname","tag":"input","inputType":"hidden"},

{"id":"","name":"function","tag":"input","inputType":"hidden"},

{"id":"","name":"itemnum","tag":"input","inputType":"hidden"},{"id":"","name":"3300:finopt:0","tag":"select"},

{"id":"","name":"3300:finoptnum","tag":"input","inputType":"hidden"}]

buttonText: Add to Cart

buttonFeatures: Hide
{"classList":"bb-bigsubmit","destination":"/sb/order.cgi","id":"bb-miaddtxt","imageUrl":"","innerText":"","numChildButtons":0,"tag":"input","name":"","value":"Add to Cart"}

[ShopSite Lauren]

Can you provide a URL to a product page you are working on so I can see how the code is currently set up?

For the form ID, you would need to add this in the template. In the product template (I assume this is for the more information page) within the DEFINE MORE_INFO section, you will want to find the add to cart <form> tag, and add in id. It would look something like the following:

<form id="form[-- PRODUCT.RecordNumber --]" action="[-- SHOPPING_CART_URL Base --]/order.cgi" method="post">

[ShopSite Lauren]

To track Add To Cart clicks, you will need to bind the facebook tracking with the button click. The code should be added to the bottom of the product more information page (the code gets more complicated if you want to track this on category pages with lots of products, so this example is just for more information pages), and would look something similar to the following, replacing "add-to-cart-button-id" with the actual id of your add to cart button.

Code: Select all

<script type="text/javascript">
  var button = document.getElementById('add-to-cart-button-id');
  button.addEventListener(
    'click', 
    function() { 
      fbq('track', 'AddToCart', {
        content_name: '[-- PRODUCT.Name HTML_ENCODE --]', 
        content_ids: ['[-- IF PRODUCT.Sku --][-- PRODUCT.Sku --][-- ELSE --][-- PRODUCT.RecordNumber --][-- END_IF --]'],
        content_type: 'product',
        value: [-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount RAW_NUMBER --][-- ELSE --][-- PRODUCT.Price RAW_NUMBER --][-- END_IF --],
        currency: 'USD' 
      });          
    },
    false
  );
</script>