Download Link

Please download module from CommerceGuys marketplace.

 

Implementation Tutorial video by Commerce Guys

1. Install And Configure Nosto Module

Please refer to the Drupal documentation regarding adding and enabling the module on your site by installing it from Commerce Guys Marketplace.

The Nosto module adds the following upon installation:

  •  21 new Drupal blocks
  • A “Top Sellers” page with corresponding menu item

Before the Nosto module is enabled for use you need to configure it and enable the newly created blocks on the correct pages by defining positioning and display settings for them as well as enabling the Top Sellers menu item.

This manual describes how the Nosto module and default recommendation setup is enabled on your Drupal Commerce Kickstarter site. For advanced Nosto settings and Nosto admin panel, please refer to Nosto technical documentation.

2. General Features: Functionality Of Nosto Module

The Nosto module for Drupal Commerce adds the following features by default for your ecom site:

2.1 Front page:

A recommendation that suggests items that a customer has recently viewed, but not bought. Recommendation welcomes returning visitor immediately on a home page, which is by far the most common point of entry. Being personal, includes great individual relevancy and a personal touch.

Alongside with the latter, mainly intended for new visitors, Nosto adds a top list of most popular products, that inspire visitors and give them a clear overview of the store’s selection and what is currently hot in the store

2.2 Category page

On category pages, Nosto features a category specific top list by views (scoring mode can also be set as most sold) to present what is currently trending in that specific category.

Category pages are also the part of the journey where customer might return multiple times during a visit while looking something new. Therefore a recommendation that suggests related products to past browsing history is displayed there.

2.3 Product page

For cross- and upselling purposes, Nosto features three different kind of recommendations on product pages.

2.4 Cart page

Again on the cart page, Nosto features cross- and upselling recommendation, but also a recommendation that suggests products from the past browsing history because customers don’t necessarily use front page as a point of entry for the site.

2.5 Search page

On a search page Nosto displays a list of products customers have gone on to view, following the same search query. The element saves users time trawling through search results, reduces the likelihood of leaving the store and low conversion from erroneous search results and displays far more relevant results based on actual user behaviour as opposed to manually inputting every keyword imaginable for a given product.

Due to a fact that search can return zero results, Nosto also features a recommendation that suggests related products to past browsing history.

2.6 Navigation (header, footer, frames)

As navigational elements, Nosto features a simple browsing history reducing the need of back and forth browsing along with recommendation that suggest items related to browsing history.

Nosto customizes landing pages by displaying products what other customers have viewed and bought in a store after executing an explicit external search or clicking an ad in specific media. The recommendation element also automatically hides itself if similar activities e.g. sources of traffic and referrer data are not found from Nosto’s end.

For inspiration, preferably positioned at the bottom of the page, Nosto displays items that are most sold, changing the products based on the category being browsed.

 

3. Module Configuration

The configuration section for Nosto in the Drupal Commerce admin panel can be found by going to:

Site Settings -> Modules -> From the list choose: Nosto Tagging -> Configure

View: Drupal Commerce Module listing

The configuration page holds account and server details as well as site specific settings for the Nosto tagging process.The server address is pre-filled as connect.nosto.com. Leave this as-is. The account name is the unique account name of your Nosto account, created when your Nosto account was added. If you do not have one yet, please request one from www.nostocom or support@nosto.com

4. Product tagging settings

 

The tagging settings define how the module can access the data from your site, required for Nosto to function properly.

View: Nosto Tagging Settings

 Content type used for products

  • This is the content type field that holds the commerce product reference.
  • The available options are all of entity “node” and type “commerce_product_reference”.
  • Without this the module cannot tag products at all.

Product variation image field

  • This is the product variation field that holds the product images.
  • The available options are all of entity “commerce_product” and type “image”.
  • If you are not using product variations for your product images, but instead include them at the display level, i.e. through a content type, then you leave this setting empty and configure the one below.
  • If you are using Commerce Kickstart -> choose Product variation image field
  • Without this the module cannot include image urls in the product tagging.

Product content type image field

  • This is the content type field that holds the product images.
  • The available options are all of entity “node” and type “image”.
  • If you are not using a content type for including your product images, but instead use product variations, then you leave this setting empty and configure the one above.
  • Without this the module cannot include image urls in the product tagging.

Product category field

  • This is the content type field that holds the taxonomy reference used forproduct categories.
  • The available options are all of entity “node” and type “taxonomy_term_reference”.
  • Without this the module cannot include category data in the product tagging.

 Product brand field

  • This is the content type field that holds the taxonomy reference used for product brands.
  • The available options are all of entity “node” and type “taxonomy_term_reference”.
  • Without this the module cannot include brand data in the product tagging.

Category tagging settings

→ Category vocabulary

  • This is the vocabulary used for product categories.
  • The options are all vocabularies defined for the installation.
  • Without this the module cannot tag categories at all.

5. Drupal Blocks For Nosto Elements

Access block settings from: Site Settings -> Blocks

View of block settings in Drupal Commerce

There are two types of blocks created automatically by the module:

  • Tagging blocks
  • Element blocks

All block names are prefixed with “Nosto Tagging” in order to be easy to find in the block listing in your site backend.

You will need to edit each block individually to place them on the correct pages explicit to your Drupal installation.

6. Nosto Tagging Block Elements

Tagging blocks are used to hold meta-data about products, categories, orders, shopping cart and customers on your site. These should be placed on the correct pages in order for the Nosto to be able to function properly.

The region for a block is defined from a drop-down menu where from a general block list, but block explicit settings are defined for every element under Operations -> configure settings.

View how to access Tagging specific settings

Tagging blocks do not hold any visual elements, so it is not relevant where on the page (in which Drupal specific region) they are placed, but they need to be placed (or Drupal specifically shown) on correct page types, where the specific meta-data is featured. Block title can also be left as empty. For instance, Nosto Tagging: tag: product -element needs to be placed on all pages that feature product details in order that Nosto can collect the data whenever such a page i.e. product is browsed.

View of tagging specific settings in Drupal Commerce.

Nosto Tagging: tag: product

  • This block contains product information and should be placed on all product pages. This can be done by restricting the visibility to specific content types used for your products or pages by the url path.
  • The module assumes that the product page is a node.

Nosto Tagging: tag: category

  • This block contains product category information and should be placed on all category pages. If your category taxonomies are displayed with Views, then you can restrict the visibility based on the page url path for the used Views. If you are using the Drupal default taxonomy display, then you can use “taxonomy/term/*” as the page url path.
  • For Commerce Kickstart the block should be listed at least under pages: ‘collection/*’.
  • The module assumes that the category is a taxonomy term.
  • If using Views, the taxonomy term id must be present in the url.

Nosto Tagging: tag: order

  • This block contains order information and should be placed on the checkout complete page. If you are using the Drupal Commerce default, then you can restrict visibility on the “checkout/*/complete” url path.

Nosto Tagging: tag: cart

  • This block contains shopping cart information and should be placed on all pages of the site. This is done buy simply assigning the block a region that exists on all pages. The block will not be added if there are no items in the cart.

Nosto Tagging: tag: customer

  • This block contains information about the logged in customer and should be placed on all pages of the site. This isdone buy simply assigning the block a region that exists on all pages.

7. Nosto Element: Block Elements

Element blocks are used as placeholders for the product recommendations coming from the Nosto marketing automation service. Element blocks will feature visual elements visible for visitors browsing the site.

Technically the blocks contain only an Html div element, which will load the visible recommendation when the page itself is loaded.

Whilst no visual content delivered from Drupal it is important,that the elements are positioned into proper positions in Drupal Regions as they will get populated with content by Nosto. The visible content and the layout are defined in the Nosto backend (https://my.nosto.com/) and by default feature a general layout and recommendation settings for a great initial recommendation setup. For advanced Nosto settings and how to edit and create your own layout and recommendation, please refer Nosto technical documentation.

The blocks also have an option in the settings called “Nosto ID” accessible from Element configuration. This ID will be the ID of the div element when rendered. The values are pre-filled but can be amended if needed. Note that the IDs are also used as the identifier in the Nosto admin panel, so they need to match in both of the systems.

View from Drupal Nosto Block Settings for Nosto Tagging: element: product page 1 block

Similar view to latter in Nosto admin panel

The titles are by default in English and can be altered from the Nosto admin panel under each recommendation slot

Default recommendation slot

Default design for recommendation can be altered on the fly from the Nosto backend, under each recommendation slot that define the content for Drupal Nosto Block Element. Design setting is defined by templates, listed in Recommendation templates.

View from Nosto admin panel under recommendation slots

Nosto Tagging: element: front page 1

  • This block should be placed on front page.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items that are most sold in a store.

Nosto Tagging: element: front page 2

  • This block should be placed on front page.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items that a customer has viewed during previous visit or visits, affording more weight for products viewed multiple times or added into the shopping cart

Nosto Tagging: element: product page 1

  • This block should be placed at the bottom of all product pages. You can do this by restricting the visibility to specific content types used for your products and adjusting the block weight property.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items related to the product currently viewed

Nosto Tagging: element: product page 2

  • This block should be placed below the above block on all product pages. You can do this by restricting the visibility to specific content types used for your products and adjusting the block weight property.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items related to the product currently viewed, but from other categories

Nosto Tagging: element: product page 3

  • This block should be placed below the above block on all product pages. You can do this by restricting the visibility to specific content types used for your products and adjusting the block weight property.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends the most popular items from the same category by number of views

Nosto Tagging: element: category page 1

  • This block should be placed at the top of all category pages. You can do this by restricting the visibility based on the page url path adjusting the block weight property. If you are using Views for the category pages, you may need to add the block through the View to get it below the page header. This can be done in different ways, but overriding the view template file and printing the block to a specific place would be a common way of doing it.
  • For Commerce Kickstart the block should be listed at least under pages: ‘collection/*’.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends the most popular items from the same category by number of views

Nosto Tagging: element: category page 2

  • This block should be placed at the bottom of all category pages. You can do this by restricting the visibility based on the page url path adjusting the block weight property.
  • For Commerce Kickstart the block should be listed at least under pages: ‘collection/*’.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items related to customer browsing history

Nosto Tagging: element: search page 1

  • This block should be placed at the top of all search result pages. You can do this by restricting the visibility based on the page url path adjusting the block weight property. If you are using Views for the search pages, you may need to add the block through the View to get it below the page header. This can be done in different ways, but overriding the view template file and printing the block to a specific place would be a common way of doing it.
  • By default the recommendation is designed for Region: Breadcrumb.
  • By default the element recommends items related to what other customers have gone on viewing and buying after using the same search term

Nosto Tagging: element: cart page 1

  • This block should be placed at the bottom of the shopping cart page. You can do this by restricting the visibility to specific page url path and adjusting the block weight property.
  • For Commerce Kickstart the block should be listed at least under pages: ‘cart’.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items that have been bought together with the items in the shopping cart

Nosto Tagging: element: cart page 2

  • This block should be placed below the above block of the shopping cart page. You can do this by restricting the visibility to specific page url path and adjusting the block weight property.
  • For Commerce Kickstart the block should be listed at least under pages: ‘cart’.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items that a customer has viewed during previous visit or visits, affording more weight for products viewed multiple times or added into the shopping cart

Nosto Tagging: element: cart page 3

  • This block should be placed below the above block of the shopping cart page. You can do this by restricting the visibility to specific page url path and adjusting the block weight property.
  • For Commerce Kickstart the block should be listed at least under pages: ‘cart’.
  • By default the recommendation is designed for Region: Content.
  • By default the element recommends items that a customer has viewed during previous visit or visits

Nosto Tagging: element: page top

  • This block should be placed at the top of all pages of the site. This is done buy simply assigning the block a region that exists on all pages.
  • By default the recommendation is designed for Region: Breadcrumb.
  • By default the element recommends items that other customers viewed who arrived from the same source: search engine search or paid ad.

Nosto Tagging: element: page footer

  • This block should be placed at the bottom of all pages of the site. This is
  • done buy simply assigning the block a region that exists on all pages.
  • By default the recommendation is designed for Region: Footer first.
  • By default the element displays items that a visitor has browsed during the current visit

Nosto Tagging: element: left column

  • This block should be placed in the left sidebar of all pages of the site, if your layout includes sidebars. This is done buy simply assigning the block a region.
  • By default Commerce Kickstart layout does not show content in sidebars. Enable these if you are using sidebars.
  • By default the recommendation is designed for Region: Sidebar first.
  • By default the element displays items that a visitor has browsed during the current visit 

Nosto Tagging: element: right column

  • This block should be placed in the right sidebar of all pages of the site, if your layout includes sidebars. This is done buy simply assigning the block a region.
  • By default Commerce Kickstart layout does not show content in sidebars. Enable these if you are using sidebars.
  • By default the recommendation is designed for Region: Sidebar Third.
  • By default the element recommends items related to items browsed during the current visit

 

8. Top Sellers

A “Top Sellers” page and a corresponding menu item are created by the Nosto module. The page features the Nosto element displaying the top selling products in the store. The menu item needs to be enabled and placed under the appropriate menu by the site administrator. The menu item can be found in Drupal’s menu tree from:

Site Settings / Structure / Menus / Navigation – list links -> Find ‘Top Sellers’ and click edit

-> Choose ‘Enabled’ and set to correct place by choosing the location from Parent Link-dropdown menu and adjusting the weight

Did this answer your question?