Fit Finder relies on various elements of a shop’s website, which means the integration can be impacted by any changes made to these dependencies. Changes to a shop’s infrastructure or design can be expected over time but might cause Fit Finder to no longer load correctly.
Therefore Fit Finder integrations are built in a way to prevent these outages, resulting from changes to the dependency elements.
Best practice to ensure a stable integration, we recommend to work with data objects on the PDP (Product Detail Page) and OCP (Order Confirmation Page). Fit Analytics will prepare these objects and they will contain only the necessary information Fit Finder requires. The shop’s technical resources will be responsible for implementing these objects to the PDP and OCP.
The Fit Finder data objects* will ensure a robust integration. Fit Analytics provides custom data objects for all new integrations.
- It’s important to note that the pdp data object should always update with the correct values/data whenever a color or a product changes on the pdp.
- The objects should be placed directly on the page and not via tag manager (e.g. Google Tag Manager), since the properties, e.g. color change or navigating to another PDP should update the object.
Product Detail Page (PDP) Object
fitAnalyticsData = {
shopLanguage: "xx", // ISO 639-1, e.g. 'en'
shopCountry: "XX", // ISO 3166-1, e.g. 'GB'
mainImageLink: "xxxxx", // URL to thumbnail to be displayed within the widget
userId: "xxxxx", // user ID (if logged), not email
currentItemSubgroupId: "xxxx", // current color-level ID
allItemSubgroupIds: ["xxx", "xxx", "xxx", "etc."], // all color-level IDs on the page
shopSessionId: "xxxx", // shop session id: a first-party client generated session ID (can be a cookie) [we use it to track the purchase & keep our data persistent] session ID (can be a cookie)
// [we use it to track the purchase & keep our data persistent]
experimentFunnel: "xxxx", // in case of external A/B test
sizes: [
{ value: "42", isAvailable: true },
{ value: "44", isAvailable: false },
{ value: "46", isAvailable: false },
],
// helper functions or paths to functions (relative to window) to
// select DOM elements or execute operations.
operations: {
/
@returns the HTML element of the add-to-cart button
/
getAddToCartBtn: function () {},
/
@returns the HTML element of the size chart button
/
getSizeChartLink: function () {},
/
This function should add the given size to cart for the given product id
@param {string} productId
@param {string} size
/
addToCart: function (productId, size) {},
/
Select the given size for the given product id
@param {string} productId
@param {string} size
/
selectSize: function (productId, size) {},
/
@returns {string} the currently selected size
/
getCurrentSize: function () {},
/
This is required for implementing the Multiple-Sizes-Alert (MSA) feature
@returns {Promise|Object|Array} all current cart items
/
getCartItems: function () {},
// ...
},
}
Order Confirmation Page (OCP) Object
fitAnalyticsData = {
orderId: "xxxxxx",
shopLanguage: "xx", // ISO 639-1, e.g. 'en'
shopCountry: "XX", // ISO 3166-1, e.g. 'GB'
currency: "XXX", // ISO 4217, e.g. 'EUR'
userId: "xxxx", // user ID (if logged), not email (MUST have same value as from the PDP for the same user)
shopSessionId: "xxxx", // shop session id: a first-party client generated session ID (can be a cookie) [MUST have same value as from the PDP for the same session]
products: [
{
// purchased product nr 1
size: "xx",
itemId: "xxxxxxxxx", // size-level ID
itemSubgroupId: "xxxxxxx", // color-level ID
price: "XX", // per item
quantity: "x", // number of purchased items
gtin: "xxxxxxxxxxxxx", // EAN/GTIN/UTIN
},
{
// purchased product nr 2
size: "xx",
itemId: "xxxxxxxxx",
itemSubgroupId: "xxxxxxx",
price: "XX",
quantity: "x",
gtin: "xxxxxxxxxxxxx",
},
//... the same per each purchased product
],
}
Objects Elements Details
| Element |
Description |
| currentItemSubGroupId |
The current item sub group ID identifies the article, on a color level basis, and tells Fit Finder for which garment it should load the fit prediction. It is the most important parameter, upon which all others depend.
That serial describes each color variant within a single product style of a garment.
(we can mention that our widget was built in a way that it needs and relies on a color-level-id) |
| mainThumbnail |
For the main thumbnail an absolute URL to a product image thumbnail needs to be provided.
Thumbnail image dimensions should be at least 300 x 300 pixels for optimal appearance. |
| sizes |
Is an array of objects, which refer to the available sizes on the PDP. Each size object should have two properties: the size value and the value of the availability. The sizes should be passed in the identical format as seen on PDP and feed. Sending a different size code or format can not be used. |
| shopCountry & shopLanguage |
The combination of shop country and language is referred to as locale.
The language parameter, allows the Fit Finder button and the widget content to initialize in that shop language. If not stated otherwise, the fallback language is English.
The shop country also indicates, whether that locale includes Fit Finder support or not.
|
| userID |
Is a unique ID (hashed) for logged in users and doesn’t depend on the session. It should be consistent and has the same value as on the OCP.
It should be null/empty in case of guest users.
|
| shopsessionID** |
Shop session ID is a term used internally by Fit Analytics but in essence describes the shop session (cookie).
It is used to track the hosting shop’s session and the user’s journey between PDP and OCP
|
Shop Session ID
Due to updated security policies on iOS devices, it is often not possible for Fit Finder scripts to interact with 3rd party cookies, such as connect.sid. This is a growing issue, as our data shows that more users are viewing Fit Finder on iOS devices. Lack of session ID’s lead to issues tracking the user journey between PDP and OCP.
A solution for this problem is to retrieve a first party (generated shop side) session ID. In the integration object, it’s called shop session ID. The primary location for such an ID is a first party cookie, native to the shop’s site, though any identifier may be used as long as it adheres to these criteria:
- It should be unique per visitor and preserved between visits from the same browser for the duration of their session.
- Its value must stay the same when the visitor logs in or out.
- It needs to be accessible on both PDP and OCP and it must have the same value for a single visitor on both pages
- It should be safe from misuse in case. For example it shouldn't be possible to impersonate and/or personally identify the visitor in any way with just this identifier.
- It could be theoretically derived from the shop's internal session ID, however then it should be definitely protected (e.g. hashed with a secure hash function like SHA256), to prevent abuse as described.
- It must be readable by JavaScript. This means cookies with the httpOnly flag are not suited for this purpose.
You can check this PDF doc for more information concerning Data objects.
