API-Based Smart Recommender Debugger Console

After you create the API-based Smart Recommender campaign, you can proceed to Insider Debugging Console on the campaign listing page via the Test Integration button.

After you click the Test Integration button, choose the variant to test.  When you reach your website to test your Smart Recommender campaign, click Details and you will see the debugger tab called Smart Recommender API Integration. You can see the required classes and attributes checklist under it. 

Your widget HTML structure must include these items in order to complete the integration;

• Main Container: 'ins-preview-wrapper-{variationId}' class;
• Body Container: 'ins-web-smart-recommender-body' class;
• Product Container: 'ins-web-smart-recommender-box-item' class
• Data Recommended Items: Inside this class; ‘ins-web-smart-recommender-body’, you also need to have; the 'data-recommended-items' attribute;
• The Product IDs in the Data Recommended Items attribute are found: checks that the 'data-recommended-items' class has the correct product IDs and the array is a stringify-attribute.
• Product Box: Checks if 'ins-product-box’, ‘ ins-element-link’, ‘ ins-add-to-cart-wrapper’, and ‘ ins-sr-api' classes are found.
• The Ins Product ID attribute is found: Besides the class; 'ins-product-box', you must have the 'ins-product-id' attribute.
• The Product ID in the Ins Product ID attribute is found: 'ins-product-id' has a correct ID value and it's not empty.
• The Event Collection attribute is found: Besides the class 'ins-product-box', you must have the 'event-collection' attribute.
• The Event Collection attribute is set as True: ‘event-collection’ attribute has been set as true.

Each requirement is indicated by red and green badges whether they are fulfilled or not.