Digital marketing & Product merchandising in Episerver Commerce implementation

In my opinion, an e-commerce site is essentially a virtual store where digital marketers drive traffic to, and where merchandisers display products with or without promotions for customers to discover products and add wanted items to the shopping cart then proceed to checkout, make payment to place purchase orders for fulfilment via delivery or collection.

Therefore, in any Episerver Commerce implementation, developers will have to provide the following functions which can be grouped under one of above 7 functional components.

• Digital marketing: functions related to attracting traffic to the website using digital channels such as search engine, advertisement network, affiliate network, social media or email.
• Product merchandising: functions related to displaying products and offers on the website to drive sales.
• Customer: functions for users to register, manage their accounts, view order history as well as functions for customer service department to receive inquiry, chat with customers, view orders or place telephone / mail orders.
• Product discovery: functions for users to
• Find products through navigation or search
• Learn more about products with all the required details including price, product images, video, data sheets
• Compare related products
• See if products are in stock online and/or in store
• Locate store to visit for real feel of products
• Promotion: functions related to stimulate sales through promotions / discounts such as percent off, buy X get Y free, free shipping ...
• Conversion: functions for users to add items to carts, proceed to checkout, make payment to place orders.
• Order fulfilment: functions related to fulfilling orders which is typically done by sending order data to back-end systems and notifying customers when orders have been shipped or ready for collection.

When implementation an ecommerce site using Episerver Commerce, from technical perspectives, developers can always refer to a very comprehensive developer’s guide in Episerver World, and the 2 invaluable books written by Quan Mai: Pro Episerver Commerce and Episerver Commerce recipes. However, I feel that new Episerver Commerce developers, including those with extensive Episerver CMS experience, might still feel a bit lost in their first Episerver Commerce project if they don’t have a solid understanding of e-commerce concepts especially in relation to digital marketing and product merchandising.

Therefore, I decided to write this blog post to discuss the above 2 concepts and link them to Episerver Commerce technical aspects. In other words, this blog post will not deep dive into technical details but trying to connect the dots so that new Episerver Commerce developers can understand digital marketing and product merchandising functional components in the context of Episerver implementation. So if you’re an Episerver developer or tech lead who is relatively new to Episerver Commerce, I hope that this blog post would be useful.

Remark: While an e-commerce site can sell physical products or non-physical products and target consumers or businesses, this blog is about B2C e-commerce site selling physical products in order to make the content more concise and to the point. However, general concepts are still applicable to B2B and non-physical products.

Digital marketing

An e-commerce site is a dead site without traffic, hence in any Episerver Commerce implementation, developers must pay close attention to the requirements for digital marketing which is the driving force for site traffic. However, without proper planning, digital marketing typically comes late into the picture hence requiring rework which can be expensive and might potentially cause some delay or even destabilise the site. Therefore, it is advisable that you should have some sessions with digital marketers to understand their requirements early in the build process.

Firstly, you should understand that the most important tools that any digital marketers would need are Google Tag Manager (GTM) and Google Analytics (GA) to collect site statistics including traffic, user behaviours and conversions. Therefore, it is a must to include GTM code snippet in the master template so that GTM is enabled for all pages. GA tracking code can then be installed via GTM. In addition, GA Enhanced Commerce should be enabled in all Episerver Commerce implementation with necessary data layers for which you can refer to this blog post as a good starting point. Besides, marketers might need additional tools such as Hotjar for heatmapping or Facebook tracking pixel which can also be installed via GTM.

Secondly, please bear in mind that digital marketers use several channels to acquire visitors namely organic search, paid search, online advertisement, social, email, affiliate, referral and of course direct traffic. And as a developer, you must get the followings right for digital marketers to do their jobs effectively.

• Technical SEO: Organic search results in search engines are based on relevance to the search terms and exclude advertisements or organic search is free traffic coming to the e-commerce sites. And SEO (Search Engine Optimization) is the practice of increasing the quantity and quality of traffic to your website through organic search engine results. Hence as a developer, you will need to support digital marketers to achieve their SEO goals including:
• Providing editable robots.txt in Episerver to instruct search engine robots how to crawl & index pages.  
• Generating sitemap to inform search engines about pages on your sites that are available for crawling. This can be done using an existing Nuget package for Episerver.
• Maintaining SEO-friendly URL structure especially by customising product URLs in Episerver via redirection to provide both humans and search engines with an easy-to-understand indication of what the destination page will be about.
• Rendering the pages especially product listing and product detail pages with proper meta tags (titles and descriptions), and heading tags for on-page SEO.
• Using proper schema markup for products, reviews & ratings, pricing, availability and stores to increase product visibility and enhance click-through rates (CTR).
• Social sharing: to produce the best visual display when a product is shared on social media, you must implement Open Graph tags and Twitter cards so that social media networks know how to render rich social snippets for your contents which will boost engagements and drive traffic to the site.
• Product feed generation: product data feed is a file made up of a list of products and attributes of those products organized so that each product can be displayed, advertised or compared. Product feeds are used in various marketing channels on which retailers spend most of their marketing budgets: paid price comparison websites, paid search affiliates, affiliate networks, marketplaces, and social networks. Google product feed is the most widely used product feed format which can be generated using an available Nuget package for Episerver. Digital marketers typically use another product feed management tool to produce feeds in other formats if required.
• Email Direct Marketing: EDM refers to the process of building an email database of customers and/or potential customers and sending them communications or special offers directly. It is a low-cost channel which is used extensively by marketers to build brand loyalty or convert sales. Outgoing emails are typically authored and distributed by Marketing Automation software including Episerver’s very own Episerver Campaign, however, email database is built with newsletter subscription function that you will have to provide on the website for both registered and non-registered users with custom integration or Episerver Forms Marketing Automation Integration connectors available for a number of well-known Marketing Automation software but your client would need to purchase a license for the connector. In addition, you might also need to send product feeds and configure client-side scripts to send user behavioural events such as cart abandonment to trigger context-based EDM.
• Landing page: a landing page is any web page that consumers can land on, but in the digital marketing realm, it’s usually a standalone page, distinct from your homepage or any other page, that serves a single and focused purpose. Therefore, digital marketers will spend significant time and effort to create good landing pages for their campaigns whether to convince users to provide personal info when signing up for some offers or to persuade potential customers to make some purchases. Your job as a developer is to provide a good toolbox for marketers with:
• A number of reusable content blocks such as individual product block, related products block, newsletter subscription, search box …
• A number of custom form controls in customisable look-and-feel Episerver Forms with extended functions for marketers to create forms to collect information.
• A few landing page templates for specific use-cases for quick authoring.
• A very flexible landing page template with one single responsive grid-based content area sandwiched between the site-wide header and footer that can house as many content blocks as editors wish. For that purpose, you can use an available Bootstrap-based content area for Episerver or choose your own responsive framework.

Product merchandising

According to PracticalCommerce, e-commerce merchandising is the art and science of displaying products or offers on a website with the goal of increasing sales. Therefore, when building an e-commerce site, you need to provide all the required tools and functions for merchandisers to do their jobs. However, similar to digital marketing, some merchandising requirements can be overshadowed by more explicit and transactional requirements hence might be introduced later in the build process even after go-live hence you end up seeing some frustrating merchandisers.

Therefore, it’s important to elicit requirements from merchandisers early in your discovery phase to understand what you need to build for them. There are 4 key areas for merchandising namely category, product page, homepage and checkout.

• Homepage merchandising: Homepage is certainly the hub for navigation hence merchandisers want to guide their visitors to find what they want to reduce bounce rate and improve conversions. Homepage merchandising typically involves the provision of hero image content block to display latest offer / promotion and content block for featured brands, featured products, new arrivals, best selling products and seasonal product offerings. In addition, merchandisers usually need a block to display list of products a visitor recently viewed which can be implemented using Episerver cart where you maintain the last 10 or 20 products that a user recently viewed. You should not use a custom table to keep track of all viewed products as the table can become very huge and significantly affect the performance. Some retailer want to show “Recently viewed products” block as part of the site-wide footer.
• Category merchandising: optimizing the presentation of products in the category and sub-category grid pages (product listing page) is the most important technique used by merchandisers to influence a customer's purchase decision in a given buying context. In Episerver Commerce implementation, Episerver Find should be used to retrieve the product list for product listing page and the following functions must be built to enable merchandisers to do their job effectively:
• Filters and facets: sufficient filters and facets should be provided for customers to refine the product list in order to find the wanted items for purchase. These must be done by defining catalog contents with adequate product attributes and use Episerver Find out of the box functions for facets and filters.
• Sort options: various sort options are required such as popularity / best selling, featured (curated), price, name, arrival date and also relevance. Episerver Find provides out-of-the-box sorting functions where you can modify sorting rule to match merchandising requirements. You might need to introduce additional invisible product attributes for sorting purposes. Different customers will have different preferred default sort options which can vary at category levels.
• Spotlight content: some e-commerce sites want to have separate blocks above the product grid to feature certain products such as “best sellers”, “hot new releases” … These can be implemented as content blocks in Episerver where products are retrieved from Episerver Find based on certain criteria or hand-picked by merchandisers.
• Pinned products: merchandisers usually want to pin certain products on top of the list to promote sales which can be implemented either by creating a content area in category node for merchandisers to drag and drop pinned products there or by introducing a “pinned” attribute with ranking in each product.
• Boost and bury: this is the mechanism for merchandisers to boost some products to the top and bury some products at the bottom based on pre-defined rules which can be common across all categories or specific for an individual category. For example, boosting products with excessive stocks and bury products with low stocks. Your job is to elicit these boost and bury rules, add new attributes to products if required as the basis for rule evaluations that can be built into Episerver Find sort option, and provide options for merchandisers to choose which rules to apply.
• External merchandising: finally, some merchandisers might want to use external merchandising service such as Episerver Perform or BloomReach to recommend relevant products based on AI and other personalisation mechanisms. And this is where you will need to understand their APIs for integration into Episerver Commerce.
• Product page merchandising: merchandisers use product detail pages extensively to upsell, cross-sell and recommend products by showing blocks of other products related to the main products typically based on product association relations in Episerver. These relations can be either statically defined in product catalog or dynamically populated by scheduled jobs looking at transaction history or external merchandising tool such as those determine visually similar products through image processing.
• Upsell: Presents newer or better versions of the product being viewed to guide the customer towards the same product but at a higher price point. This may be a newer or deluxe model, a larger size or quantity, or the item as part of a bundle of products.
• Cross-sell: Shows related products which are complementary to the product being viewed. The intent is to surface related products that the customer would be interested in buying in addition to the product being viewed to increase items per order and average order value. Common cross-sell techniques include “customers who bought X also bought” or “frequently bought together” or “Shop this look”
• Product recommendation: show either alternative products for the product being viewed or seemingly randomized products based on what’s trending, what’s new or other merchandising logic. Common product recommendation techniques include “Similar styles”, “You may also like” or “customers who viewed X also viewed”.
• Checkout merchandising: merchandisers also want to place blocks of related products in cart page such as “Items related to your cart”, “Customers also bought” or “Products you might like” which are built based on product association relations in Episerver. In addition, merchandisers also want to place in-line cross-sell or upsell to persuade customers to
• buy add-ons such as extended warranty packages (also use product association relations)
• or to increase quantity / add another product for further discounts or free shipping. There is no out of the box function in Episerver to do this hence you might have to customise Episerver promotion engine.

Conclusion

As discussed above, out of 7 functional components in a typical Episerver Commerce implementation, digital marketing and product merchandising functional components can be overshadowed by explicit transactional ones namely customer, product discovery, promotion, conversion and order fulfilment. Therefore, it is important for developers to pay attentions to digital marketing and product merchandising to ensure business requirements are fully captured and implemented using available Episerver Commerce building blocks.