Using a Headless CMS to Personalize eCommerce
Alex Husar, chief technology officer at Onilab with 8+ years of experience in developing PWAs, Magento migration, and Salesforce development. He graduated from the Czech Technical University and obtained a bachelor’s degree in Computer Software Engineering. Alex’s expertise includes both full-stack dev skills and a strong ability to provide project-critical guidance to the whole team.
Editor's Note: This is a guest blog post from our friends at Onilab.
Consumers receive dozens of marketing messages, and only the most relevant and catchy ones remain in their memory. How do you win their attention? The answer is personalization.
Digital solutions can help you personalize the content to each customer. For example, you can leverage email automation and push notifications. Or you can employ AI to offer products based on buyers’ activities.
The good news is that developers create more ways to simplify personalization for businesses. One of them is headless commerce architecture. What does this notion entail, and how does headless CMS participate in personalization? That’s what I’m talking about in this post.
Headless CMS: The Evolution of Traditional CMSs
Headless vs. Monolithic Approach
Let’s define a CMS. It’s an abbreviation standing for a content management system, which is software or an application to publish content on the website. The main purpose of a CMS is to manage a website without writing a hundred lines of code.
Traditional Web CMS
What does it look like in a traditional CMS? You have admin rights to manage content through the backend interface.
They allow you to add images, videos, text, and other media to your website, modify them, or schedule publications. As a result, you can launch any website: eCommerce, blogging, and so on without technical knowledge.
The essence of traditional CMSs is the tight connection between the frontend and the backend. That’s why they are often called coupled CMSs.
They leave content creation, management, and storage to the backend. Besides, the backend stores website design and customization software.
What does a headless approach mean? It relies on the unchaining of the presentation layer (the frontend or the “head”) from the content repository (the backend or the “body”).
The difference lies in the frontend interface. A coupled CMS interface embeds a proprietary user-interface technology (usually a templating engine and/or UI theming layer) that restricts the developers and content creators, dictating to a large extent how any page will look to end-users.
A headless CMSs is about developing content for various touchpoints, such as websites, mobile apps, smartwatches, IoT devices, digital signage, smart TVs, and more. Developers can build new frontends on top of a shared backend, which stores content in its raw form. The backend and the frontend use APIs to transmit queries and content.
A headless CMS may only be one backend service. A “true” headless approach entails splitting the entire backend into various microservices, with the CMS being just one of many.
These other microservices may include eCommerce site search, shopping carts, catalog, and recommendation engines. They don’t affect each other so that you can enjoy advanced flexibility and customization.
Why Headless Is Gaining Popularity
A principal advantage of a headless CMS is that it uses APIs for accessing and rendering content. As a result, APIs (for example, RESTful APIs or GraphQL APIs) distribute your media anywhere you need it.
This benefit is most evident in large online stores that leverage IoT objects to sell their goods. Suppose you have a store on a refrigerator, voice assistant, or TV. There is a new product in stock. You want to quickly display new photos on all touchpoints.
Traditional CMS will require marketing teams to duplicate the image for each presentation form. Because of this, the same asset may appear earlier on the website than, for example, in the mobile application.
A headless CMS allows you to upload one asset to display it on any presentation layer in real-time. It paves the way for omnichannel marketing to provide customers with a seamless experience across multiple channels. This way, you offer frictionless communication and keep the customer data in one place.
Where Can Headless Find Its Place?
Headless CMS solutions allow you to provide a unique customer experience regardless of what sphere or size you represent. It may be online stores, financial services, gaming, travel agencies, airlines, manufacturing companies, logistics businesses, academic paper writing services like TrustMyPaper, etc.
So if you’re selling something online on your website, going headless can do the trick. It will help you prepare your website for the future in various cases:
- to plug in many touchpoints in the future;
- to outpace your competitors with speedier development and content distribution;
- providing visitors with a personalized experience and boosting the chances to convert them.
How to Use a Headless CMS for Building Personalized Experiences
Personalization now determines whether your business will sell. According to some statistics, 90% of clients respond positively to tailored content, and 72% don’t engage with impersonal and uncustomized marketing messages.
Personalized content may include targeting messages for a specific age or gender group, localizing the website for various languages, etc. Let’s take CrafterCMS as an illustration. This decoupled CMS consists of two subsystems, Crafter Engine and Crafter Studio, both of which are API-first headless platforms.
Crafter Engine is the content delivery platform, providing APIs to developers to build a variety of frontend applications across multiple digital channels. Crafter Studio is the content authoring platform to create, test, and edit content with a live preview interface. They are loosely integrated via a content publisher, working together to help the business generate highly tailored digital experiences. Let’s look at their capabilities.
1. Providing Content in the Needed Language
Global enterprises can start personalization by localizing content. CrafterCMS can do the heavy lifting and deliver the translated content to users in the desired language. To do it, enable targeting in CrafterCMS. It will allow the system to understand a visitor’s region and search the repository for localized content.
CrafterCMS analyzes from which country the user accesses the website and chooses the right language. It can also consider the user’s preferences (if known). What if there’s no localized content? The system will revert to the default language.
Crafter Studio can connect with 3rd party language translation services when you produce the content. And this content may be reviewed before going public.
2. Content Targeting Features
CrafterCMS comes with an easy-to-use administrator user interface (UI). The admin panel serves for configuring the content personalization and targeting system. Do you see how intuitive it is in the screenshot below?
Figure 1. Screenshot taken from the official CrafterCMS YouTube channel
You can edit texts, delete images, or set classification principles to specify how the system should target content. As a result, pages, components, search, and services will adapt to a user according to these principles.
Crafter Engine also provides a full development environment for scripting dynamic features on the backend, if needed. It supports the Apache Groovy programming language to define and update the content targeting rules.
The Crafter Engine development environment also provides the TargetIdManager class to configure custom content attributes. Content authors describe the properties, and Crafter Engine tracks the information on the live site. When it receives a request from a particular user type, it dynamically delivers tailored content based on the site visitors’ attributes.
3. Content Tagging to Specify Personalized Elements
Suppose you’re creating new pages, components, or any other content type inside Crafter Studio. You can tag content items with the desired criteria to target them to a certain audience segment. This process looks like ticking boxes or selecting an option from the pull-down menu.
The elements you can personalize include pages, page components, header/footer, and even a navigation menu. Let’s assume you want to target the content based on the visitor’s gender. You’ll need to choose a “guy” or “gal” option for the item. Compare the two screenshots below: the first is what users see without targeting.
Figure 2. Screenshot taken from the official CrafterCMS YouTube channel
And that’s what male visitors will see if you enable the “guy” option. You may notice that the remaining articles are related to “male” topics.
Figure 3. Screenshot taken from the official CrafterCMS YouTube channel
4. DevContentOps as a Way to Merge DevOps and Content Management
DevContentOps is a term originally coined by the CrafterCMS team. It’s about collaboration between content management and DevOps specialists. Creating and optimizing personalized experiences should take into account different aspects of content creation and technical support.
For example, developers need immediate access to content if they have created or tested new content targeting rules. That’s why a close interaction between content, software, and operations teams is a must.
CrafterCMS ensures seamless integration of content production and DevOps processes to remove possible bottlenecks across a wide range of settings and decoupled architecture. As a result, you get rapid application development and content creation.
It’s hard to overestimate the importance of omnichannel experiences. Customers expect an uninterrupted interaction along the customer journey and use various devices and channels before making a purchase.
How do you compete with all the eCommerce giants raising the bar for user experience? Use the power of various solutions to provide personalized content. For example, you may turn to a headless CMS.
This relatively new approach to creating websites and distributing content helps you give clients what they want on the needed channel. As a result, conversions skyrocket, and user experience improves.
From the creator’s point of view, a headless CMS provides more agility to creating and tweaking web pages. All you need to do is personalize certain content fields. They’ll adapt to the audience segment and display the required content on every channel accordingly.
Using Git as a Content Repository
What Is JHipster?
Ensuring Web Accessibility and Compliance with a Headless CMS
Composable Architecture: Let’s Talk ROI
Introducing CrafterCMS v4.0
Modernizing Video Delivery and Content Management at CPAC, A Canadian Nationwide Broadcaster
Building React Apps on a Headless CMS
Building OTT Video Experiences with Headless CMS on AWS
Server Side Rendering: The Missing Component of Headless CMS