How to provide for digital marketing in Episerver Commerce implementations

In my opinion, an e-commerce site is essentially a virtual store that works in five steps:

• Digital marketers drive traffic to the site
• Merchandisers display products, with or without promotions
• Customers discover products and
• add the items they want to the shopping cart, then proceed to checkout and make the payment to place the purchase orders
• Fulfilment of orders is done 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 the above-mentioned functional components.

• Digital marketing: Functions related to attracting traffic to the website using digital channels such as search engines, advertisement networks, affiliate networks, social media or email/newsletters.
• 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 the customer service department to receive inquiries, 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 etc.
    • Compare related products
    • See if products are in stock online and/or in stores
    • Locate stores to visit for the “real feel” of products

• Promotion: Functions related to stimulating sales through promotions/discounts such as percentage discounts, special offers, free shipping etc.
• Conversion: Functions for users to add items to carts, proceed to checkout and 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 are ready for collection

When implementing an ecommerce site using Episerver Commerce, from a technical perspective, developers can always refer to a very comprehensive developer’s guide in Episerver World and the two 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 two concepts and link them to technical aspects of Episerver Commerce. In other words, this blog post will not deep dive into technical details but try to connect the dots so that new Episerver Commerce developers can understand the functional components of digital marketing and product merchandising in the context of Episerver implementation. So, if you’re an Episerver developer or a tech lead who is relatively new to Episerver Commerce, I hope that this blog post will be useful to you.

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

Digital marketing

An e-commerce site is a dead site without traffic. So, in any Episerver Commerce implementation, developers must pay close attention to the requirements of digital marketing, which is the driving force for site traffic. However, without proper planning, digital marketing considerations are often taken into account late, meaning they require reworks, which can be expensive and might potentially cause some delay or even destabilize the site. Therefore, it is advisable that you 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 marketer needs are Google Tag Manager (GTM) and Google Analytics (GA) to collect site statistics including traffic, user behavior and conversions. Therefore, it is a must to include the GTM code snippet in the master template so that GTM is enabled for all pages. The GA tracking code can then be installed via GTM. In addition, GA Enhanced Commerce should be enabled as part of all Episerver Commerce implementations, with necessary data layers for which you can refer to this blog post as a good starting point. Aside from these, marketers might need additional tools such as Hotjar for heatmapping or a 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 advertisements, social media, email, affiliate networks, referrals and, of course, direct traffic. As a developer, you must get the following 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 – organic search is free traffic coming to the e-commerce sites. SEO (search engine optimization) is the practice of increasing the quantity and quality of traffic to your website through organic search engine results. As a developer, you will need to support digital marketers to achieve their SEO goals by:  
  • • Providing editable robots.txt files in Episerver to instruct search engine robots how to crawl and index pages. 
    •  Generating a 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 an SEO-friendly URL structure, in particular by customizing 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.
    •  Equipping 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 and 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 content, which will boost engagement and drive traffic to the site.
• Product feed generation: A 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 and 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, the email database is built with a 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 tools – just remember that 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 behavior 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 a purchase. Your job as a developer is to provide a good toolbox for marketers with
  • • A number of reusable content blocks such as an individual product block, related products block, newsletter subscription, search box...
    • A number of custom form controls with customizable look and feel in 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, which can lead to them being introduced later in the build process, sometimes even after go-live. That’s why you end up seeing some frustrated merchandisers.

Therefore, it’s important to source requirements from merchandisers early in your discovery phase to understand what you need to build for them. There are four key areas for merchandising: categories, product pages, homepage and checkout.

• Homepage merchandising: The homepage is the hub for navigation, so merchandisers want to guide their visitors from it to find what they want in order to reduce bounce rates and improve conversions. Homepage merchandising typically involves the provision of a hero image content block to display the latest offer/promotion and content blocks for featured brands, featured products, new arrivals, best-selling products and seasonal product offerings. In addition, merchandisers usually need a block to display a list of products a visitor recently viewed, which can be implemented using Episerver’s cart, in which 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 huge and may significantly affect performance. Some retailers also want to show a “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 pages) is the most important technique used by merchandisers to influence a customer's purchase decision. In an Episerver Commerce implementation, Episerver Find should be used to retrieve the product list for the 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 items they want to purchase. This must be done by defining catalog content with adequate product attributes and using Episerver Find’s 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 relevance. Episerver Find provides out-of-the-box sorting functions for which you can modify sorting rules to match your merchandising requirements. You might need to introduce additional invisible product attributes for sorting purposes. Different customers will have different preferred 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” etc. 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. This can be implemented either by creating a content area in the category node for merchandisers to drag and drop pinned products to or by introducing a “pinned” attribute with a ranking for 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, one approach would be boosting products with excessive stocks and burying products with low stocks. Your job as a developer is to elicit these boost and bury rules, add new attributes to products as required as the basis for rule evaluations that can be built into Episerver Find’s sort option, and provide options for merchandisers to choose which rules to apply.
    • External merchandising: Finally, some merchandisers might want to use external merchandising services such as Episerver Perform or BloomReach to recommend relevant products based on AI and other personalization 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 the product catalog or dynamically populated by scheduled jobs looking at transaction history or external merchandising tool such as those which can determine visually similar products by using 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, boasting 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 present 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 Y”, “frequently bought together” or “shop this look”
    • Product recommendation: Shows 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 Y”.

• Checkout merchandising: Merchandisers also want to place blocks of related products on the cart page. Examples include “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 uses product association relations)
    • increase quantity/add another product for further discounts or free shipping. There is no out-of-the-box function in Episerver to do this, so you might have to customize Episerver’s promotion engine.

Conclusion

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