For updated information, please see: Default-Product-Tagging in our GitHub
Introduction To Tagging
Tagging contextual details inside Nosto specific tag-fields in standard Html format allows Nosto to read data from the target site. The embed script added before this step looks for Nosto specific tag fields and sends the data stored inside the tags to Nosto’s service, meaning that context or actual data Nosto reads is mapped in the tags.
The technical methodology for tagging is the same on all page types, but the context and tag classes vary, hence please follow syntax strictly. In other words, don’t add your own custom tags as these simply won’t work. Also we suggest to read expected data types and descriptions in tabs!
Product Tagging
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. As a developer, you need to replace the static example values to equivalent e-commerce engine variables which will output the required product detail inside Nosto’s tags.
<!-- Tag your product pages, replace static example values to equivalent database/ecom engine variables -->
<div class="nosto_product" style="display:none">
<span class="url">http://www.example.com/product/CANOE123</span>
<span class="product_id">CANOE123</span>
<span class="name">ACME Foldable Canoe</span>
<span class="image_url">http://www.example.com/product/images/CANOE123.jpg</span>
<span class="price">1269.00</span>
<span class="price_currency_code">EUR</span>
<span class="availability">InStock</span>
<span class="category">/Outdoor/Boats/Canoes</span>
<span class="category">/Sales/Boats</span>
<!-- Optional properties -->
<span class="description">This foldable canoe is easy to travel with.</span>
<span class="list_price">1299.00</span>
<span class="brand">ACME</span>
<span class="tag1">Men</span>
<span class="tag2">Foldable</span>
<span class="tag3">Brown</span>
<span class="tag3">Black</span>
<span class="tag3">Orange</span>
<span class="review_count">20</span>
<span class="rating_value">3.0</span>
<span class="alternate_image_url">http://www.example.com/image1.jpg</span>
<span class="alternate_image_url">http://www.example.com/image2.jpg</span>
</div>General Guidelines
Tagging needs to present in the Html-markup of product pages. In practice this means that the tagging cannot be added through browser side dynamically by using javascript or similar. Tag Managers are neither supported as these are dependent typically of javascripts themselves. In case tagging is applied using scripting, it obviously executes in a debug tool, but when a Nosto crawler access the site, tagging elements will remain empty hence the implementation is erroneous.
Image Sizes
Preferably map an image version which is at least 600px wide, but preferably smaller than 1M in size on average as min size of 600px is a requirement for Instagram ads and other features while image sizes smaller than 1M can be fetched more reliably to huge high-res versions. An optimal image size preferred for ad features is 1080px wide.
Output Examples
Please refer to your e-commerce software’s/platform’s documentation to find your own methods / variables for each required data type. For example:
<span class="product_id">{{ product.id }}</span>
How To Review And Debug
Once you have the tagging in place you can review and validate it by enabling the Nosto debug toolbar in your browser, which will output the data Nosto receives from the page. If a required data field is missing or the format is incorrect, debugger will print you a simple error report. Rest assured, the debug-toolbar will be your best friend while implementing Nosto.
Once product page tagging looks good to you, it is time to tag shopping cart page and mini-shopping cart element.