Purchase Tracking Scripts

Purchase tracking enables the ShoeAI algorithm to learn and improve the recommendations it gives. These 2 scripts track the in-cart activity of a shopper and then confirm which items were in the basket the moment the purchase was placed.

1. Purchase Tracking: Cart Script

The Cart Script needs to be implemented on the cart page or ajax cart section summarizing the items which the customer has added to their cart. Every time the cart is updated, the script must be executed again.

You'll need to populate a ShoeSizeShoppingCart variable with the properties of the items in the cart.

var ShoeSizeShoppingCart = {
  shopID: "SHOP_ID",
  purchases: []
};
       

For each shoe in the cart push an object to ShoeSizeShoppingCart.purchases

{
  shoeID: "SHOE_ID",
  size: "SIZE",
  scale: "SCALE",
  quantity: "QUANTITY",
  price: "PRICE"
  currency: "CUR"
}

Load the cart script. 
The script will get ShoeSizeShoppingCart and make an API call to our cart endpoint. 
If the script is loaded before ShoeSizeShoppingCart has been populated with the cart data please call ShoeSizeMe_cart.trackCart() to manually trigger the API call

      <script type="text/javascript">
        // Do not modify
        (function(){
          var script = document.createElement('script');script.type = 'text/javascript';
          script.src = 'https://shoesize.me/plugin/cart.js?'+
            'shopid='+encodeURIComponent(ShoeSizeShoppingCart.shopID) +
            '&sid=' + Math.round(new Date().getTime() / 1000);
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
        })();
      </script>

Here is how to update the Cart dynamically (without page reload): 

When the cart is updated by a user (e.g. new quantity, new item added, etc) you will need to resend the updated information to the ShoeSize.Me API. This is completed in two steps:

1. Update the ShoeSizeShoppingCart.purchases array with the new information.
2. Call ShoeSizeMe_cart.trackCart() to send the request to the API
   
   

Once finished, check if the following requirements below are met:

1. Make sure the shoeID matches with the shoeID (Article ID) you provided in the Product Feed.
2. Make sure to set the size in the correct format, only containing the numeric value. Good examples: "40", "40.5", "40.33", "40 1/3", "40 ⅓", "8.5", "8". Bad examples: "40 EU", "Size 40", "EU 42".
3. Make sure the scale is set correctly: (eu, uk, us, etc).
4. Make sure to set the quantity correct. If having the same item twice in the shopping cart, send one item with quantity "2" instead of two items with quantity "1".
5. Make sure the price is set in the format "100.00" or "100".
6. Make sure the cart script is executed every time a change to the cart is done. A change to the cart is for example:

• Add a shoe
• Remove a shoe
• Change the size
• Change the quantity

7. If there is no order number yet, leave it empty - pass an empty string: "".

How to test if the Cart Script has been set up correctly:

After having the cart script implemented, test if everything was set up correctly by adding one or more shoes to the shopping cart and see if the script is executed.

There should be an AJAX call to shoesize.me/api/others/cart containing all the products in the cart. The response should be {"success" : true}.

If the response is {"success": false} or the server responds with status code 500, check if everything is set up correctly.

2. Purchase Tracking: Confirmed Purchase Script

The Confirmed Purchase Script needs to be implemented on the order confirmation page that is only reachable after the payment was made.

The confirm script needs to be implemented on the order confirmation page that is only reachable after the payment was made. Add this script tag to the body of your HTML replacing the SHOP_ID and ORDER_ID placeholder with the real parameters. 

      <script type="text/javascript">
        var ShoeSizeShoppingCartConfirmation = {
          shopID: "SHOP_ID",
          orderID: "ORDER_ID"
        };

        // Do not modify
        (function() {
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://shoesize.me/plugin/confirm.js?'+
            'shopid='+encodeURIComponent(ShoeSizeShoppingCartConfirmation.shopID)+
            '&sid='+Math.round(new Date().getTime()/1000);
          (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
        })();
      </script>

For Shopify Stores

If your store is on  Shopify then use the following Custom Pixel instead. 
In Shopify Settings, select "Custom Events", then "Add a Custom Pixel", name it ShoeAI and paste the following code making sure to replace the SHOP_ID placeholder with your ShoeAI Shop ID. 

analytics.subscribe('checkout_completed', (event) => {
  const checkout = event.data.checkout;
  ShoeSizeShoppingCartConfirmation = 
    {'shopID':"SHOP_ID",
     'orderID': checkout.order_id
    };
  var script = document.createElement('script');
  script.type = 'text/javascript';  
  script.src = 'https://shoesize.me/plugin/confirm.js?shopid='+ 
  encodeURIComponent(ShoeSizeShoppingCartConfirmation.shopID)+'&sid='+Math.round(new Date().getTime() / 1000);
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script); 

});

Once finished, check if the following requirements are met:

1. The Confirmation Script is executed after the order was paid.
2. If you already sent an order number in the cart script, make sure to provide the same one here.
3. You must provide the same order number in the purchase & return data feeds.

Here is how to test if the Confirmed Purchase Script has been set up correctly:

1. Make sure you implemented the cart tacking script first.
2. Test if everything was set up by executing a test purchase.
3. On the order confirmation page, check the browser's console if there is a call to shoesize.me/api/others/confirm containing the shop id, order number, and the sid.
4. The response should be {"success" : true}.
5. If the response is {"success": false} or the server responds with status code 500, check if everything is set up correctly.