Implementation Guide. The essentials

Transcription

1 Implementation Guide The essentials

2 Hello! I am Romain, and I ll be your guide explaining the essential steps of the Nosto implementation! Follow the 7-key steps below and we will get your store live with Nosto in just a couple of hours. Let s get started! mode - 6 7! 3 5 mode - Nosto recommendation slots

3 <script type="text/javascript"> //<![CDATA[ (function(){function a(a){var b,c,d=window.document.createelement("iframe");d.src="javascript:false",(d.frameelement d).style.csstext="width: 0; height: 0; border: 0";var e=window.document.createelement("div");e.style.display="none";var f=window.document.createelement("div");e.appendchild(f),window.document.body.insertbefore(e,window.document.body.firstchild),f.appendchild(d);try{c=d.c ontentwindow.document}catch(g){b=document.domain,d.src="javascript:var d=document.open();d.domain='"+b+"';void(0);",c=d.contentwindow.document}return c.open()._l=function(){b&&(this.domain=b);var c=this.createelement("scr".concat("ipt"));c.src=a,this.body.appendchild(c)},c.write("<bo".concat('dy onload="document._l();">')),c.close(),d}var b="nostojs";window[b]=window[b] function(a){(window[b].q=window[b].q []).push(a)},window[b].l=new Date;var c=function(d,e){if(!document.body)return settimeout(function(){c(d,e)},30);e=e {},window[b].o=e;var f=document.location.protocol,g=[" "connect.nosto.com",e.path "/include/",d].join("");a(g)};window[b].init=c})(); nostojs.init( [accountid] ); //]]> </script> The Javascript embed script enables Nosto to catch the first bits of information. It must be placed in the header of your site html structure. It s an universal script and solely one part must be personalized : the account ID section. It is represented alive by [accountid]. At every page load, the Nosto crawler scans the concerned page and will catch different Nosto related variables. Thanks to this Javascript embed script, Nosto is able to catch in real-time the activity of your site such as the number of active visitors. However, at this stage, Nosto is flying in the dark. The information caught still needs to be structured. We will discover that part in the following section. The embedded Javascript must be placed in the header of your site html structure. It must not be placed neither in the body nor the footer section. Consequently, it will be displayed across your site. Note that you need to remove cornered brackets when adding your account ID. As an example, if your account ID is 12345, it must be added as such : nostojs.init( );

4 Category Product Search Cart Order Confirmation Customer Information Nosto needs to structure and give meaning to the information gathered via the embed script. Browsing and purchase behavior are indeed crucial to Nosto algorithms in order to produce relevant recommendations. To do so, a few lines of code must be placed across the site on every page type. Let s start by having a look at the div tag that needs to be placed in your Category template file : <div class="nosto_category" style="display:none">/winter/accessories/beanies</div> That line of code (DIV element) has to be placed in the template file of your Category s. Consequently, every category page will be tagged with that div tag. In the example above, the value /Winter/Accessories/Beanies is an example. This must be replaced by the corresponding variable of our e-commerce platform. The div tag nosto_category will be also added to Product s but the variable that needs to be sent is slightly different. We will detail it in the following part : of product pages.

5 Category Product Search Cart Order Confirmation Customer Information <div class="nosto_product" style="display:none"> <span class="url"> Product URL <span class="product_id">beanie123</span> <span class="name">red wool beanie</span> <span class="image_url"> <span class="price">30.90</span> Product parent ID Product name Price as displayed in front-end (can be a discounted price for instance) Product image URL. The images are resized by Nosto and used in the recommendation slots in form of thumbnails. <span class="price_currency_code">eur</span> <span class="availability">instock</span> Currency - Example : EUR for euro, GBP for british pound, USD for US Dollar, - 3 letters - ISO4217 Availability of the product - Either InStock, Discontinued or OutOfStock (must be the main availability) <span class="category">/winter/accessories/beanies</span> <span class="category">/sales/accessories</span> <!-- Additional properties --> Categories in which the product is listed <span class="description">it's a beautiful beanie.</span> Product description <span class="list_price">40.90</span> RSVP price - Nosto will then be able to know if one product is discounted for instance <span class="brand">adidas</span> Brand <span class="tag1">men</span> <span class="tag2">red</span> Tag filled according to merchant needs <span class="tag3">sales</span> </div> <span class="date_published"> </span> <div class="nosto_category" style="display:none">/sales/accessories</div> Date when the item has been published on-site Active category (breadcrumb) - Path followed by the user to find the product

6 Category Product Search Cart Order Confirmation Customer Information By default, the Search Query Parameters must be filled in the Nosto interface. When you log in to my.nosto.com, select «Account» and «Parameters». In the example below, the Search Query Parameter is the term «q». This reflects the term after the question mark «?» and before the equal sign «=». q If for some reason, you don t have any Search Query Parameters in place, as an alternative, you can tag the Search with the following div element : <div class="nosto_search_term" style="display:none">[keyword]</div> Exemple : <div class="nosto_search_term" style="display:none">red beanie</div

7 Category Product Search Cart Order Confirmation Customer Information <div class="nosto_cart" style="display:none"> <div class="line_item"> <span class="product_id">beanie123</span> Product parent ID <span class="quantity">1</span> Quantity ordered <span class="name">red wool beanie</span> <span class="unit_price">30.90</span> <span class="price_currency_code">eur</span> </div> <div class="line_item"> <span class="product_id">gloves456</span> <span class="quantity">1</span> <span class="name">blue gloves</span> <span class="unit_price">15.90</span> <span class="price_currency_code">eur</span> </div> Product name Price as displayed in front-end (can be a discounted price for instance) Currency - 3 letters - ISO4217 Same for the additional items in cart Beware - - Every different item included in cart must be listed in a line_item div tag. - - The Product ID returned must be the parent ID (or mother - name differing per platform). The ID must be the same as the ID returned in the Product. This allows Nosto to correctly track when one item is added in basket.

8 Category Product Search Cart Order Confirmation Customer Information <div class="nosto_purchase_order" style="display:none"> <span class="order_number">1445</span> Order ID <div class="buyer"> <span Client address <span class="first_name">john</span> <span class="last_name">doe</span> <div class="purchased_items"> <div class="line_item"> <span class="product_id">beanie123</span> <span class="quantity">1</span> Name Surname <span class="name">red wool beanie</span> <span class="unit_price">30.90</span> <span class="price_currency_code">eur</span> </div> </div> </div> Product ordered info Beware - - The Product ID returned must be the parent ID (or mother - name differing per platform). The ID must be the same as the ID returned in the Product and in the Cart. This allows Nosto to correctly track the conversions. - - If multiple products are ordered, every one of them must be contained in one unique line_item div tag. - - The tags above must be placed in the Order Confirmation. If you use third party payment module such as Paypal, you must redirect your clients to that page once purchase has been completed.

9 Category Product Search Cart Order Confirmation Customer Information <div class="nosto_customer" style="display:none"> <span Client address <span class="first_name">john</span> <span class="last_name">doe</span> <!-- Additional properties --> <span class="birth_date"> </span> </div> Name Surname Date of birth The tags above must be placed on every page type. This information is solely used to personalize the Nosto triggered s : Abandoned Cart, Order Follow-up and the We Miss You campaigns. The info are encrypted and are not use for any other purpose.

10 When you implement Nosto tags, you can use the Nosto Mode (a.k.a Nosto Debug Tool) to make sure everything has been coded accordingly. To activate the Mode, you can add the string?nostodebug=true at the end of your store URL. A console will be displayed (see below) and will display the information sent to Nosto. < > When clicking the grey gear, the console will expand (1) and the information sent via the Nosto div tags will be displayed. If required values are missing, you ll be notified via Nosto pink notifications (2). 1 2

11 Nosto can now analyze and leverage your traffic. Browsing and purchase behavior is tracked for every one of your visitors and clients. However, you can t display any recommendation yet. To do so, you have to insert Nosto placeholders (DIV elements) where you want to display the recommendations. You can create a recommendation slot in your Nosto interface at Simply select the Campaigns tab and the Recommendation Slots category. As an alternative, you can edit one of the existing recommendation slots.

12 When you create a recommendation slot, you must choose where you want to display the slot and the ruleset defining the content of the recommendations. Click the button «Choose» and pick the desired ruleset. Next, you can adjust the settings and allocate a recommendation template to the slot (see section ). If you choose an existing slot, the Nosto algorithms are already pre-set. If you make any change, don t forget to save! Once you are ready, you can save and access the HTML code to place the slot on your site (see below). The Nosto recommendations are loaded through DIV element nosto_element (example below). Beware When you insert the placeholders into your page, no recommendation will be displayed, even if the recommendation slot has been individually enabled. Important By default and for security reasons, when implementing Nosto, the recommendations are entirely hidden to your visitors. You can activate all the recommendations on your website by flipping the switch below ON or by clicking Activate in the on-boarding menu (see last page of this guide).

13 The placeholders being on-site, you have to make sure everything is set up perfectly so that you can turn the recommendations on with serenity. To double check, you can trigger the Nosto Mode (a.k.a Nosto Debug Tool) by adding the string?nostodebug=true at the end of your shop URL. This allows you to polish the design of the slots without even installing Nosto in a stage environment. This is a process 100% secure. The recommendations slots are indeed never displayed your visitors. When your page is loaded with the extension, the recommendation slots will be displayed. If Nosto algorithms haven't collected enough data yet, Nosto mock-ups (similar to tablets) will be displayed. These mock-ups are never displayed to your visitors. If Nosto algorithms have collected enough data, you will then see real products displayed in the recommendation slots.

14 Nosto gives you complete freedom in terms of front-end design. When you create a recommendation slot, you have to choose either one already-designed Nosto template or create one from scratch. 5 generic templates are offered by default. However, you can edit & amend its HTML & CSS properties if needed. The template you have selected will apply to the recommendation slot once you have chosen the targeted page type and via the selected Nosto DIV element. You have access to the templates properties anytime. As an example, you can choose how many products per row you want to display, the color and size of font, color of CTA buttons, This gives you the opportunity to build an entirely integrated recommendation slot that matches your website s style guide.

15 If you have in-house resources, you can directly modify the recommendation templates in the HTML section. This gives you more freedom in terms of custom design and aesthetic. Important When you amend the HTML and CSS properties of one template, it is key to respect Nosto variables. To guide you, you have access to an index listing all the Nosto variables.

16 You now know the essentials to set up Nosto! We advise you to use the Nosto Mode during and after the implementation phase of Nosto. This is indeed a visual way to make sure everything is set up according to your needs. We let you discover the Nosto interface via Once you have installed Nosto and once the Javascript code being placed on-site, you will be guided with the Nosto on-boarding menu. This 3-steps guide invites you to preview and edit the recommendations one last time before activating Nosto and displaying the recommendations to your visitors! < >

17 Rock the show!