Product recommendations built using Azure Machine Learning. Automatically recommend items on your product page. Provide recommendations unique to customer and personalize their experience.

Install the module:

• Automatically: in VC Manager go to Configuration -> Modules -> Product recommendations module (preview) -> Install
• Manually: download module zip package from https://github.com/VirtoCommerce/vc-module-product-recommendations/releases. In VC Manager go to Configuration -> Modules -> Advanced -> Upload module package -> Install.

1. Collect data:

• Open Store where you plan to use recommendations
• Open Recommendations widget
• • Export catalog
• • Export usage data
• • • If you doesn't have usage data at this moment, wait until it will be collected or prepare such file from other sources

2. Create Cognitive Services APIs account for Recommendations API at Azure portal in your Azure subscription and obtain a Key

3. Go to Recommendations UI

• Log in to the portal by entering your Key in the Account Key field
• Create a project
• Upload the catalog you got in step #1
• Upload the usage data you got in step #1
• Create a build. Select Build Type as Recommendations

4. Configure settings

• Open store settings. The following settings required:
• • Recommendations API Key. Copy your Key you got in step #2
• • Model ID. Copy Model ID from your project in Recommendations UI
• • Build ID. copy Build ID from a build in your project in Recommendations UI

Based on users activity (collected usage data) Cognitive Service will form top of iterested products. User will see this products as recommended, excluding products that he/she already seen. If there is no usage history for the user, he/she will see nothing.

This recommendations will allow your customer to discover products that are likely to be visited by people that have visited the source item.

Automatically recommend items on your product page that are likely to be consumed together in the same transaction.

1. Snippet configuration

• Open template file where you want to display recommended products (ex. product.liquid)
• Add snipped call with the following code:

{% include 'recommendations', provider: 'Cognitive', type: 'User2Item', product_ids: product.id, modelId: '1c915305-ce4c-4b9c-8c9f-5ffaf8df05ab', take: 5 %}

• • provider key can correspond to the following values:
• • • Cognitive - provide a products from the Azure Machine Learning Service
• • • Association - provide a products from associations lists, configured in Catalog module
• • for the product_ids key we should set the current product id, or comma-separated identifiers in other cases. This is an optional parameter
• • modelId - parameter represent Azure recommendation model identifier (required)
• • buildId - parameter represent Azure recommendation model build identifier (optional)
• • take key indicates the lenght of the result products list we want to receive

2. User events gathering configuration for standard theme

The products recommendations are based on the history of items that were of interest to the user. To improve the result set of the products, you should enable option for background collection of user events statistics. To do this just open settings file settings_data.json and provide new setting entry for desired theme:

"collect_user_events_enabled": true

3. User events gathering configuration for custom themes

There will be a little more configuration steps for custom theme.

• Provide collect_user_events_enabled setting entry in settings file of your theme as discribed in previous step.
• Reference interactor.js library (already included in default theme script bundle).
• Include next script block in the footer template.

window.startRecordInteraction = function()
{
    {% if settings.collect_user_events_enabled %}
    var interactions = new Interactor({
        interactions            : true,
        interactionElements     : ["Click", "AddShopCart", "RemoveShopCart", "RecommendationClick"],
        interactionEvents       : ["mouseup", "touchend"],
        endpoint                : "{{ '/storefrontapi/useractions/eventinfo' | absolute_url }}",
        async                   : true,
        debug                   : false
    });
    {% endif %}
}
window.startRecordInteraction();

• • There are few types of user events we can collect: Click, AddShopCart, RemoveShopCart, RecommendationClick

• To track a users interactions with an element, simply add the event keyword in CSS attribute of the element. Next block of code show how to collect Click events for the products:

<a href="{{ product.url | absolute_url }}" class="product-grid-item Click" interactor-arg="{{ product.id }}">
...

• • Click keyword should be placed in class attribute.
• • Custom attribute interactor-arg contains product id that will be pass to the endpoint with other information.

All user events will be collect locally and pass to the endpoint before user leaves the page.