Onsite product recommendations

Summary

You can show product recommendations on your website by embedding our scripts. Depending on your knowledge, you may need a developer to help you with this. 

How it works

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 on your page needs to include the ID of the recommendation to insert. This is included in the embedding scripts.

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 are suitable for your homepage or category hub pages.

Example uses

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

Template customisation

The following breaks down the process of customising a template.

Accessing the template

The template is accessed from the product recommendation list screen. Clicking the HTML icon opens a sidebar with 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. Click Insert product field, select the product field you want from the side panel that slides in, and the placeholder appears at your cursor.

Embedding

The embedding code provided by us is complete. For developers who wish to simplify it, the notes provided below will be helpful.

The scripts can be accessed by clicking Get template scripts. You'll then be able to set the number of products to show and copy/paste the script onto your website.

Using the embedding code

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 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.

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.

Have more questions? Submit a request

Comments

  • Avatar

    Hi, I don't have a HTML-icon from my product recommendation list screen so I can't access the script. Is this not live for customers yet?

  • Avatar

    Hi there, Jimi

    When you go to 'Campaigns' > 'Product recommendations' and then successfully create a recommendation, the HTML icon, under the 'Onsite' column, should appear as this feature is live for users. If for some reason you aren't seeing this, please get in touch with our Support department at https://dotdigital.com/services/support/.

    Hope this has helped :-)