Sizing Application API

You will need a placeholder element somewhere on your product page. This is where the Shoefitr button will go.

<div id="entryPoint1" style="visibility: hidden;"></div>

Our sizing application will ensure the placeholder is visible whenever the product in question is recognized and scanned. It should be hidden by default. This prevents confusion when the product is not yet scanned or if other problems occur.

The following script should be embedded at the bottom of your product pages.

<script type="text/javascript">
    var SizeGuideInit = {
        entryPoints: [ 'entryPoint1' ],
        cl_id: "Your Shoefitr ID. We will tell you what to put here.",
        customSku: "Your unique identifier for this style.",
        fTrackEvent: function(sEventName) { /* Your event handler */ }
    };

    (function() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = document.location.protocol +
            '//app.shoefitr.com/SizeGuide' +
            '?cl_id=' + encodeURIComponent(SizeGuideInit.cl_id) +
            '&customSku=' + encodeURIComponent(SizeGuideInit.customSku) +
            '&sid=' + Math.round(new Date().getTime() / 1000);
        (document.getElementsByTagName('head')[0] ||
         document.getElementsByTagName('body')[0]).appendChild(script);
    })();
</script>

SizeGuideInit Object Specification

Property Type Description

entryPoints

array

An array of DOM ids (strings).

When the sizing application initializes, it looks for DOM nodes with the provided ids. It loads the Shoefitr button inside and attaches click events. If the product in question is enabled and scanned, the button is revealed. When a node is clicked, the sizing application opens.

Typically this will be an array containing a single DOM id, corresponding to a single Shoefitr button.

cl_id

number

Identifies your website in the request. We will tell you what to put here.

customSku

string

The unique identifier your organization uses for this style internally.

fTrackEvent

function

Optional. A function that takes one argument, a string, which is the name of the event that just fired. Any return value is ignored. The possible events are:

Event	Description
`"ApplicationOpened"`	The shopper opened the application.
`"RecommendationReceived"`	The shopper received a recommendation.

Purchase Integration API

This section applies to customers who would like to monitor and optimize Shoefitr performance. These customers will be able to track customers who use the sizing application, successfully receive a recommendation, and make a purchase. Tracking this is accomplished with two scripts.

Step 1 - The Shopping Cart

The first script is placed on the page that confirms the contents of a shopper’s order. This is typically the last page the user is shown before the order is completed.

<script type="text/javascript">
    var ShoefitrShoppingCart = {
        cl_id: "Your Shoefitr ID. We will tell you what to put here.",
        orderId: "Your unique order ID.",
        purchases: []
    };

    // For each item in the cart, you need a call like this:
    ShoefitrShoppingCart.purchases.push({
        price: 89.95,
        customSku: "Your unique identifer for this product.",
        size: "9.5 - D - US Men"
    });

    (function() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = document.location.protocol +
            '//app.shoefitr.com/PurchaseTracker/CartRegistration' +
            '?cl_id=' + encodeURIComponent(ShoefitrShoppingCart.cl_id) +
            '&sid=' + Math.round(new Date().getTime() / 1000);
        (document.getElementsByTagName('head')[0] ||
         document.getElementsByTagName('body')[0]).appendChild(script);
    })();
</script>

ShoefitrShoppingCart Object Specification

Property	Type	Description
cl_id	number	Identifies your website in the request. We will tell you what to put here.
orderId	string	Optional. The unique identifier your organization uses for this order internally. If you do not provide this, we will associate the confirmation step with the most recent recorded shopping cart for the shopper in question.

ShoefitrShoppingCart Purchase Object Specification

Property	Type	Description
price	number	The price of the item in USD. Required for CPA customers, optional otherwise.
customSku	string	The same value you provided in the SizeGuideInit object.
size	string	What size did the user purchase? Please provide size, width, and sizing scheme (e.g. Euro, UK) if applicable.

Step 2 - Order Confirmation

The second script is placed on the screen a shopper is taken to after purchasing. This is typically a “Thank you for your purchase” screen.

<script type="text/javascript">
    var ShoefitrShoppingCartConfirmation = {
        cl_id: "Your Shoefitr ID. We will tell you what to put here.",
        orderId: "Your unique order ID."
    };

    (function() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = document.location.protocol +
            '//app.shoefitr.com/PurchaseTracker/CartConfirmation' +
            '?cl_id=' + encodeURIComponent(ShoefitrShoppingCartConfirmation.cl_id) +
            '&sid=' + Math.round(new Date().getTime() / 1000);
        (document.getElementsByTagName('head')[0] ||
         document.getElementsByTagName('body')[0]).appendChild(script);
    })();
</script>

ShoefitrShoppingCartConfirmation Object Specification

Property	Type	Description
cl_id	number	Identifies your website in the request. We will tell you what to put here.
orderId	string	The unique identifier your organization uses for this order internally.