How onsite recommendations work
The rules for the recommendation, and its HTML template, live in the platform. JavaScript added to your website then injects the HTML and products when the page loads. This means you can change the recommendation, or its template, without making a website code change.
The script on your page needs to include the ID of the recommendation to insert. This is included in the embedding scripts.
You may need a developer to help you with this.
Types of onsite recommendation
These non-predictive recommendations have embedding options for your website:
Best sellers
Most viewed
Trending
Custom category
Also bought
Each of these recommendations is suitable for your homepage or category hub pages.
Example uses of Onsite recommendations
Homepage:
Trending products | Best selling women's products | Popular products under $50
For a hub page with female-focused products:
Best selling women's snowboards | Trending women's accessories | Women's snowboots under $50
Product page (using also bought):
Customers who bought this also bought
View and edit the embedding code
The embedding code provided by us is complete. For developers who want to simplify it, the notes provided below will be helpful.
To find your embedding code:
Go to Content > Products > Recommendations.
Find the Product recommendation you want to embed, then select Onsite.
The embedding code opens in Edit website template side panel.
Use the embedding code
To access the scripts, select Get template scripts. You'll then be able to set the number of products to show and copy and paste the script onto your website.
new dd.ProductRecommendations.SnippetCreator('dd-product-recommendations-container', 'https://dmtrk.net', '4P8Z', '4K', 3).createSnippets();
The targeted HTML element (by ID) is the first variable. In the above example, it's set to the default HTML element provided by our templates: dd-product-recommendations-container.
The platform's site is then set (and shouldn't be changed): https://dmtrk.net.
The following variables - '4P8Z', '4K' - identify the account and then the recommendation to be embedded. The recommendation ID could be set dynamically by your website.
The final variable sets the number of products to show, in this case 3.
Customise the template
The Edit website template side panel contains two areas:
Edit website template, where you design and style your recommendation block.
Template scripts, where you grab the code for your website.
Structure
You don't embed the actual HTML code on your website; this lives in the platform. Instead, you customise the HTML and embed the JavaScript code to inject the HTML. Products are then loaded dynamically into the template based on your recommendation filters.
Default HTML/CSS
The default block uses Bootstrap HTML and CSS. The stylesheets for the layout are included in the JavaScript code. You should adjust or replace this as you wish to match your website.
Product fields
You can insert product fields anywhere in your product block template. To add a product field:
Go to the Edit website template side panel.
Select INSERT PRODUCT FIELD.
Select the field you want to add.
Performance and caching
In order to ensure high performance, onsite product recommendations make use of our caching. This should ensure that your site is never slowed down by recommendations loading. It may, however, mean that rapid changes to your recommendation logic or template are not seen immediately.