Emarsys fully supports language and currency localizations of your website. Predict also allows international merchants (serving clients from a series of local domains) to run variants of their main website under the same Predict account.
There are five key issues to address when implementing Predict services on localized websites. All these issues are managed by extending the product catalog with localized fields, and by adding the relevant data-collection commands and widget rendering templates.
It is unlikely that all five issues are relevant to you, so pick and choose the ones that are.
Contents:
Prerequisites
Running domain variants from the same Predict account requires the following conditions to be met:
- The catalog of products offered in your local stores should be roughly the same.
- The
item
IDs of the products are consistent across all domains. - The
category
structure of the websites is consistent across all domains. - The
category
JavaScript API command always passes category paths that match those found in the defaultcategory
field of the product catalog. (That is, categories are always passed in the catalog’s default language.) - If you use your own user IDs to identify visitors, make sure there is no overlap across your local domains.
Displaying recommendations in local languages
You may need to add localized catalog fields for all text labels displayed in the recommender widgets.
Example
As an example we will take a website ( store.com) that serves English and Spanish speaking in the USA. The English version of the product titles and category names are already part of your default product catalog, now we add the Spanish fields.
The catalog might look as follows:
item,link,title,available,category,price,title_es,category_es
122,http://store.com/page?id=122,"Digital SLR Camera",true,"Electronics > Cameras > DSLR Cameras",399.00,"Cámara réflex digital","Electrónica > Cámara > Cámara DSLR"
The localized product name field (title_es
) will be referenced in the widget rendering template when displaying a recommender widget for visitors who are looking at the Spanish version of the website:
<script type="text/html" id="spanish-recommender-template"> <![CDATA[ {{ if (SC.page.products.length) { }} <div class="scarab-itemlist"> <div class="scarab-prev"></div> {{ for (var i=0; i < SC.page.products.length; i++) { }} {{ var p = SC.page.products[i]; }} <span data-scarabitem="{{= p.id }}" class="scarab-item"> <a href="{{= p.link }}"> <img src="{{= p.image }}"> {{= p.title_es }} {{= p.price }} </a> </span> {{ } }} <div class="scarab-next"></div> </div> {{ } }} ]]> </script>
The localized category name field (category_es
) will be automatically substituted in HOME and DEPARTMENT widgets when the language
JavaScript API command is called.
Remember that the localized category structure needs to match exactly the category structure and order in the default category
field.
Managing multiple domains
This step is required if your localized website uses different domains or page URLs for language versions.
Example
You have a (bookstore.com) main website for English customers, and Spanish speaking users are redirected to bookstore.es, your Spanish version of the website.
The page URLs pointing to your default website are stored in the link
field of the default product catalog. Now we need to add additional link fields to the catalog to point to the Spanish page of the same product:
item,link,title,available,category,price,title_es,link_es
122,http://store.com/page?id=122,"Digital SLR Camera",true,"Electronics > Cameras > DSLR Cameras",399.00,"Cámara réflex digital",http://store.es/page?id=122
The localized link field will be referenced in the widget rendering template when displaying a recommender widget for visitors who are looking at the Spanish version of the website:
<script type="text/html" id="spanish-recommender-template"> <![CDATA[ {{ if (SC.page.products.length) { }} <div class="scarab-itemlist"> <div class="scarab-prev"></div> {{ for (var i=0; i < SC.page.products.length; i++) { }} {{ var p = SC.page.products[i]; }} <span data-scarabitem="{{= p.id }}" class="scarab-item"> <a href="{{= p.link_es }}"> <img src="{{= p.image }}"> {{= p.title_es }} {{= p.price }} </a> </span> {{ } }} <div class="scarab-next"></div> </div> {{ } }} ]]> </script>
Managing multiple currencies
You may want prices displayed in recommender widgets to be in the local currency.
Local prices and currencies are managed using the same logic as localized text with the added issue that price values reported in data-collection are used to calculate performance Statistics. Therefore you need to make sure that although different prices are displayed on your various local websites, the data-collection scripts report revenues in a single common currency.
To start, you need to add the relevant catalog fields, in our example EUR prices for the Spanish website:
item,link,title,available,category,price,title_es,link_es,price_es
122,http://store.com/page?id=122,"Digital SLR Camera",true,"Electronics > Cameras > DSLR Cameras",399.00,"Cámara réflex digital",http://store.es/page?id=122,339.00
Remember that any price
field should only contain the value itself. Currency signs and value delimiters are controlled by the naming of the catalog field, i.e. the suffix attached to the price_
field. The suffixes should follow the JAVA locale naming conventions.
The localized price field will be referenced in the widget rendering template when displaying a recommender widget for visitors who are looking at the Spanish version of the website:
<script type="text/html" id="spanish-recommender-template"> <![CDATA[ {{ if (SC.page.products.length) { }} <div class="scarab-itemlist"> <div class="scarab-prev"></div> {{ for (var i=0; i < SC.page.products.length; i++) { }} {{ var p = SC.page.products[i]; }} <span data-scarabitem="{{= p.id }}" class="scarab-item"> <a href="{{= p.link_es }}"> <img src="{{= p.image }}"> {{= p.title_es }} {{= p.price_eur }} </a> </span> {{ } }} <div class="scarab-next"></div> </div> {{ } }} ]]> </script>
Test your integration using the Live Events Viewer on your localized sites to test that recommender widgets work as expected. You should also check that the cart
and purchase
events from your localized sites report transaction values in your default currency.
Using availability zones
This step is required if you offer products that are available for purchase in some local versions of your website, but not in others.
Product availability is by default controlled through the available
catalog field. When you have multiple availability zones, you need add a new catalog field for each of your availability zones, including your main site. The default available
field should be set to true
value for all active products, and local availability controlled through the additional availability fields:
item,link,title,available,category,price,title_es,link_es,price_es,available_com,available_es
122,http://store.com/page?id=122,"Digital SLR Camera",true,"Electronics > Cameras > DSLR Cameras",399.00,"Cámara réflex digital",http://store.es/page?id=122,339.00,true,false
When displaying recommender widgets, you need to set the locale of the widget using the availabilityZone
command. The command must be called before the recommend
command.
It is also a good idea to already localize the reference to the rendering template.
<script> ScarabQueue.push(["availabilityZone", "es"]); ScarabQueue.push(["recommend", { logic: "RELATED", containerId: "recommendation-container" templateId: "spanish-recommender-template" }]); </script>
Tracking local recommendations on the Statistics screen
If you use local versions of your website, you are probably interested in seeing recommender performance separately for each of your local websites.
To achieve this, you need to localize the recommender API call itself. This is done by simply adding the locale suffix to the recommender logic name in the recommend
command.
<div id="my-recommendation-container"></div> <script> ScarabQueue.push(["recommend", { logic: "RELATED_es", containerId: "my-recommendation-container", templateId: "spanish-recommender-template" }]); </script>
Now your main site product page recommender will continue to be displayed as RELATED on the Statistics screen, but along it, you will see RELATED_es listed separately.