Nosto Tagging Guide

Follow our step-by-step guide to implement Nosto correctly on your website and to increase your sales. A few simple steps and you are ready to go!

Check your tags

To check that your Nosto tagging has been implemented correcly, you can active a debug mode for Nosto on your site. Calling your online store with an additional request parameter ?nostodebug=true will enable the debug mode and you should see a css-window displaying information sent to Nosto. Calling the site with the request parameter ?nostodebug=false will turn off the debug mode.


Add the embed script

This enables Nosto to receive information about your Site's usage. Replace [accountID] from code below with your account ID and place the code in <head> section of your site HTML. You can find your account ID on your Account tab.

Recommended embed script
Old embed script (deprecated)
Worried about your pages slowing down?

Don't worry, Nosto uses asynchronous script loading which means that it will not prevent your page from displaying itself. We also load the script to a separate window object to make sure we don't interrupt your page's normal operation.


Tag your product pages

This enables Nosto to show product information in Nosto elements. Add the following tagging into your online store's product pages.

Product tagging needs to present in the HTML markup of the product page. In practice this means that the tagging cannot be added through browser side JavaScript (e.g. Tag Managers).

Below is an example how the markup for a product should look like on a product page, after tagging is applied properly and the page is loaded.

HTML Example
What is sent to Nosto
Markup details

      

When a page is loaded Nosto will get the following event information

Someone viewed product:
Property Expected Type Description
url URL Complete URL of the item. Must start with http:// or https://. You can omit this property if your product page already contains a <link rel="canonical" /> tag.
product_id Text The product item identifier, ie. itemcode. It should identify to the sold product, but not necessarily some specific variant of the product. Must be unique in your site.
name Text The name of the item.
image_url URL URL of an image of the item. Preferred image width 100-300px. Max. 500px.
price Number or Text Current selling price of the item.
price_currency_code Text Price currency (in 3-letter ISO 4217 format).
availability InStock, OutOfStock, or Discontinued The availability of this item: InStock, OutOfStock, Discontinued. OutOfStock and Discontinued products are hidden from recommendations.
category Text The name of a category to which this product belongs. You can use slashes to informally indicate a category hierarchy. You can repeat the element if the product belongs to multiple categories (see example)
description Text A short description of the item.
list_price Number or Text The item's list price, e.g. initial price. If list price is larger than current selling price, Nosto will consider the product to be discounted.
brand Text The brand of the item.
tag1 Text Marks a value for tag1. The span element can be repeated to add multiple values, maximum of 5 values for tag1 are supported. Tags can be used to filter products in top lists. In this example the first category is used for target gender.
tag2 Text Marks a value for tag2.
tag3 Text Marks a value for tag3.
review_count Positive integer number Number of reviews collected for product.
rating_value Decimal number Product rating. Value between 0.0 and 5.0.
alternate_image_url URL Alternative Image URLs for product - Can e.g. be used to switch between images in the recommendation on mouse hover.
google_category Text The category of your item based on the Google product taxonomy.
nosto_sku Span element Span element contains information of the sku.
nosto_sku -> id Text Id of the sku.
nosto_sku -> name Text Name of the sku.
nosto_sku -> price Number or Text Current selling price of the sku item.
nosto_sku -> list_price Number or Text The sku's list price, e.g. initial price. If list price is larger than current selling price, Nosto will consider the product to be discounted.
nosto_sku -> url URL Complete URL of the sku. The sku should be selected on the product page when user open this url. Must start with http:// or https://.
nosto_sku -> image_url URL URL of an image of the sku. Preferred image width 100-300px. Max. 500px.
nosto_sku -> availability InStock, OutOfStock, or Discontinued The availability of this sku item: InStock, OutOfStock, Discontinued. OutOfStock and Discontinued products are hidden from recommendations.
nosto_sku -> custom_fields Span element Span element contains custom fields.

Tag the shopping cart content

This enables Nosto to recommend products based on the user's shopping cart and to notice abandoned carts. Add the following tagging to your shopping cart segment. Preferably to the small shopping cart that is visible on each page load or, if that's not possible, add to tags to the shopping cart page.

HTML Example
What is sent to Nosto
Markup details

              

When the page is loaded Nosto will get the following event information

User has following items in their shopping cart:
Property Expected Type Description
product_id Text The item's product identifier, same value as Product's product_id.
nameTextThe name of the item.
quantityNumberNumber of items
unit_priceNumber or TextThe user's price for the product (UnitPrice).
price_currency_codeTextThe currency (in 3-letter ISO 4217 format) of the user's price.
restore_linkURLURL to return to this shopping cart. For example from abandoned cart emails.

Tag the customer information

This enables Nosto to send automatic triggered emails to your customers. Whenever the user has logged in, or user information is otherwise available, add the following tagging.

HTML Example
What is sent to Nosto
Markup details

          

When the page is loaded Nosto will get the following information

The current user information is:
Property Expected Type Description
emailEmailThe user's email address.
marketing_permissionMarketing permissionMarketing permission from customer that allows nosto to send email to the customer on behalf of the merchant
first_nameTextGiven name. In the U.S., the first name of a Person.
last_nameTextFamily name. In the U.S., the last name of an Person.
customer_referenceUUID/GUID/HashSecret customer reference known to the service only after authentication. Must be difficult to guess for customer and length less than 50 characters. Typically something like an UUID.

Mark order content

This enables Nosto to show recommendations based on purchase behavior. Add the following tagging to the page that is shown to the customer after their purchase has been confirmed.

HTML Example
What is sent to Nosto
Markup details

              

When the page is loaded Nosto will get the following information

The customer purchased:
Property Expected Type Description
orderNumber Text or Number The customer's order number
buyer div The buyer's information, it should contain same properties as described in "Tag the customer information".
items div Items the customer purchased, it should contain similar LineItems as described in "Mark shopping cart content".

Tag category pages

This enables Nosto to show recommendations for the customer's currently viewed category. Add the following tagging to your category pages.

HTML Example

            

Tag page types

This enables Nosto to provide correct types of content (e.g. recommendations or pop-ups) depending on the type of section the customer is browsing. Add this tag to every page that fall into the categories listed below.

HTML Example
Page Types

        
Value Description
front Front Page
category Category Page
product Product Detail Page
cart Shopping Cart Page
order Order Confirmation Page
search Search Result Page
notfound "Not Found" Error Page

Add Nosto elements to your site

Nosto elements are included to your site via div-elements. Each div-element marks a location in your site where Nosto displays content, i.e. recommendations. The example below contains 12 different Nosto elements that should be placed to different pages in your site.

Following is our recommended initial set-up of on-site elements, based on our experiences working with different sites and stores. If you want, you can name elements as you like. However, each element-id needs to have a matching recommendation slot defined in Nosto's backend in order to function properly.