Introduction

In this article, you will learn how to implement Nosto accordingly if you have applied a multicurrency policy to your online store. When the implementation is completed, you will be able to display product prices in different currencies to relevant target groups.

Note: if you use a 3rd party exchange rate service to update frequently product price information, you need to follow the advanced multi-currency implementation guide that can be found here.

Before you start

Prior to the multicurrency specific implementation, make sure that the Nosto tagging is correctly in place. The Nosto Tagging Guide can be found here. Once the tagging is correctly applied, data exchange occurs and Nosto tracks behavioral events and updates product catalogue information in real-time.

However, tagging must be slightly extended to achieve a generic multicurrency implementation. Only front-end resources are required and this can be done within just a few HTML tags.

Product page tagging

The Nosto product page tagging must be extended to include information related to the different currencies offered by the online store.

Typically, a primary currency has been set for the online store. For example, a US based retailer could offer Euro and British pound to European customers. US Dollar is the primary currency while Euro and British pound are in this example secondary currencies.

The 1st step is to inform Nosto about the primary currency. An additional span tag must be placed within the product page tagging with a classname variation_id. The tag is a child element of the nosto_product div tag.

The 2nd step refers to the information related to the secondary currency(ies). A child div tag with a classname variation_id must be placed within the Nosto product page tagging. The div tag must encapsulate several child span tags sending information about the identifier of the currency, the price currency code, the price and the list price. There can be multiple secondary currencies. For each secondary currency, you must add a unique variation_id div element encapsulating the relevant information.

Following the example above, the extended version of the product page tagging would have the following structure:

<div class="nosto_product" style="display: none;">
 <span class="url">http://example.com/product/CANOE123</span>
 <span class="product_id">CANOE123</span>
 <span class="name">ACME Foldable Canoe</span>
 <span class="image_url">http://example.com/i/CANOE123.jpg</span>
 <span class="price">59.00</span>
 <span class="price_currency_code">USD</span>
 <span class="availability">InStock</span>
 <span class="category">/Outdoor/Boats/Canoes</span>
 <span class="category">/Sales/Boats</span>
 <span class="description">This foldable canoe is easy to travel with.</span>
 <span class="list_price">99.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="date_published">2011-12-31</span>
 <!-- Variation ID for the primary currency -->
 <span class="variation_id">USD</span>
 <!-- Variation block for a secondary currency -->
 <div class="variation">
  <span class="variation_id">EUR</span>
  <span class="price_currency_code">EUR</span>
  <span class="price">27.00</span>
 <span class="list_price">45.19</span>
  <span class="availability">InStock</span>
 </div>
 <!-- Variation block for a secondary currency -->
 <div class="variation">
  <span class="variation_id">GBP</span>
  <span class="price_currency_code">GBP</span>
  <span class="price">24.00</span>
  <span class="list_price">41.55</span>
  <span class="availability">OutOfStock</span>
 </div>
</div>

Note: The tagging above needs to remain static, regardless of the currency active on-site.

All pages tagging

Once you have extended the product page tagging, a separate and additional nosto_variation div tag must be added to all the pages (including the product page itself). The tag shouldn’t be encapsulated in the nosto_product div tag. The information sent in the tag refers dynamically to the currency active on the user’s browser.

<div class="nosto_variation" style="display: none;">EUR</div>

Admin Panel

When the tagging has been extended, you need to adjust the settings in your admin panel under Settings > Other > Multi-Currency. Toggle the switch on and set the variation ID of the primary currency via the input field:

Note: Make sure the variation ID of the primary currency matches the values sent via the Nosto product page tagging through the variation_id tag and sent via all pages through the nosto_variation tag.

Set up the Price formats according to your primary currency and secondary currencies:

Review

Once you are done with adjusting the settings in your Nosto admin panel, you can review if product information are correctly updated. This can be reviewed under Tools > Products. Select a product and you will be able to see the product information for the secondary currencies at the bottom of the page. One or several dropdown menus will be listed under the product information including the secondary currencies product information:

If you select a secondary currency, you can review the related information:

When you have reviewed your set-up, Nosto updates in real-time product prices for all the currencies and display the appropriate currency to the right target groups of users. You’re all set and ready to go live with our features!

Did this answer your question?