Jun 8, 2021

Headless CMS Personalization: How it Works

How Headless CMS offers personalization features that help improve user experience and boost conversion rates.

Headless CMS Personalization: How it Works

Consumer expectations for a personalized user experience are growing. In fact, according to research by Segment, 71% of the people surveyed are frustrated when digital experiences feel impersonal.

Customers expect omnichannel experiences that seamlessly connect each device and retain their attention throughout the customer journey. 

Plus, as global entertainment and eCommerce  behemoths like Amazon and Netflix set the bar for user experience higher every day, personalization has become an increasingly important part of the internet.

A headless CMS offers personalization features on agilitycms.com

A headless CMS offers personalization features that help improve user experience and boost conversion rates by giving visitors exactly what they want when they want it.

With these types of personalized interactions, there's no need to create new pages or tweak layouts every time something changes. Instead, you have to personalize specific content fields so they update the content according to the visitor type.

In this blog post, we'll explore how headless CMS personalization works and its benefits to your company. 

Overcoming The Limitations of The Traditional CMS

In a traditional CMS system, all content is managed through the backend interface by an admin. This makes sense because editors are often not tech-savvy enough to use code directly on their websites.  

A traditional CMS —or coupled CMS—  is linked tightly between the front end and the backend.  All content and digital assets are created, managed, and stored on the site’s backend. The back end is also where website design and customization applications are stored. 

Unlike a traditional CMS, a headless CMS is entirely decoupled from the presentation layer/frontend —or the head— and the backend is your content repository, known as the “body.” When you separate your content repository “body” from its presentation layer “head,” it becomes a headless CMS. 

What truly makes a headless CMS better than a traditional CMS is its content-first approach with full APIs to access and display content in any desired way. With this approach, a headless CMS enables you to author your content through the RESTful API and deliver that content wherever you need it.

Legacy CMS platforms lack the API-driven architecture capabilities to connect with other systems seamlessly, which means that if they don’t have native personalization features, leaving you stuck without personalization features. And those traditional CMSs that have personalization features might cost more than a headless or hybrid headless CMS —also called agile CMS—  that can integrate with third-party tools to enable personalized content delivery. 

Benefits of Personalized Content

You risk falling behind the competition if you’re not currently considering personalization within your content strategy. Serving personalized content that matches your target user’s intent can make a huge difference compared to traditional content delivery approaches. 

Let’s talk about some of the business benefits of leveraging the headless architecture to give your content editors the tools to deliver dynamic content. 

Personalized Marketing with Relevant Product Recommendations

If you’ve ever been bombarded with irrelevant product recommendations from a commerce platform, you know how annoying it can be to have a website recommending something you don’t want. Website personalization uses customer data to recommend products that are both fresh and relevant to that type of user, which increases the likelihood of them purchasing something from your store. 

Product recommendations generate business through uplift conversion rates and average order values.

According to Frosmo, compared to an electronics store's control group, the visitors who saw personalized recommendations had a 170% higher conversion rate and 41% higher average order value.

High Converting Web Pages

Personalizing content types and fields enables your marketing team to change parts of your landing pages to suit different audiences. In fact, according to KIBO, 63% of consumers are influenced by personalized recommendations on home and landing pages. Creating a seamless, customized landing page that shows the customer what they are looking for can increase your conversion rate.

Increased Time On-Site

A personalized experience can increase the time your potential customers spend on your site. Users will stick around for longer if the website or app they’re visiting is talking to

them. Plus, content personalization gives users a reason to explore the site and try your products or services because they seem like they’re tailored for them specifically. 

For more advice on web personalization, please read our article: Web Personalization: Its Benefits and Use Cases.

You can create more Personalization Experiences on the same page to target different regions by following the same steps. What's cool about this approach is that your content editors can now add content that will be automatically geo-targeted based on the rules you've set up in Google Optimize.

How To Personalize Website Content With Agility CMS

For this tutorial and demonstration, we will use Google Optimize. With Optimize, you can test your website and customize certain parts of your site to find out what converts best. 

Once you discover what's relevant to your audience and their interests – and what's most likely to help them convert – Optimize can deliver personalized experiences at scale that promote engagement and improve conversions.

Let’s look at how to use Google Optimize and Agility CMS together. 

Personalization Using Google Optimize

Content module in Agility CMS

In this example, we've created a Content Model called Geo Card and added a dropdown field called Region Target with country values for Canada & United States. One of the best things about Google Optimize is using any region value as long as Google supports that region. 

Set Up Your Module

You need to create a Content Module to allow the editor to add these Geo Cards onto a slider.  

Create a new Module with a ‘Title’ field and a nested Linked Content list based on the Geo Card model. This list of content assets should have the content you want to personalize.

Setting up geo cards on agilitycms.com

Don’t forget to set a Linked Content field to show both the Location and the Title field in the listing. That will make it easy for editors to see which location will be targeted for a piece of content.

On the Cards linked to the Content field, click ‘Advanced Settings’ > ‘Choose Visible Columns,’ and drag both the Title and Location (and any other fields you want to see) over to the right side of the section dialogue.

Choosing columns with Agility CMS

You just need to add our new module to a page and put in some example content.

Setup Your Page

We’ve created a page called geo-target to have a place to set this up, but it can be on any page on your site.

I've created items that target both Canada and the United States.

Setting up pages in Agility CMS

Create Google Analytics and Optimize Accounts

To get Google Optimize’s geotargeting tool to work correctly, you need a Google Optimize and a Google Analytics account. If you don’t know how to set up your Google Optimize account, here’s a simple step-by-step guide from Google.

Once you have your Analytics Property and your Optimize Container, you can set up your code. Don’t forget to link it to your Google Analytics property on your Google Optimize Container Settings page, under Measurement.

Now, Add the Google Optimize Script to your website. The generic method for adding to your site is to put this script in the <head> tag, like this

<script src="https://www.googleoptimize.com/optimize.js?id=OPTIMIZE_CONTAINER_ID"></script>

(Replace the OPTIMIZE_CONTAINER_ID with your container id)

Set Up Google Optimize

From your Optimize account, click on Create Experience, add a Name and your page URL, and choose Personalization as the type of experience.

Google optimization with Agility CMS

Create Targeting Rules

Once inside the Personalization tab, click on ‘Start by adding audience target rules.’

Create targeting rule on agilitycms.com

In the Geography screen, set the Country to whatever country you've set up your personalization for.  Note that to personalize the same page differently for multiple countries, you must create various Personalization Experiences. Now click on the ‘add’ button.

Ready To Rumble

At this point, you should be able to preview your content on Optimize. To do so, choose Web Preview. It will run the personalization for us as if we were from the target region.

AI-driven personalized content recommendations

The previous example showed how to create targeting rules manually. For scalable content orchestration, you would want to use AI-driven content recommendations.

According to Mikael Gummerus, the CEO of personalization and recommendation software vendor Frosmo, “AI-driven content recommendations will significantly improve your click-through rates and eventually conversion rates of visitors who saw personalized content. With one customer, we saw five times higher CTR for personalized article recommendations and a 50% uplift on conversion rates compared to the control group.”

So how does that work? Instead of defining targeting rules, you select a recommendation strategy such as “Others also viewed” or “Similar articles.” Then you let the personalization software do the magic of dynamically selecting which content to show to each visitor.

Using content recommendations has many benefits:

  • They save time for the marketing team. Instead of manually selecting what content to show on each slot, the engine takes care of it.
  • All your articles, new and old, have relevant and dynamic content recommendations attached to them. This reduces bounces and increases time spent on the site.
  • Visitors find relevant content quickly and feel that the site serves their information needs.
  • It helps you drive business and reach targets such as lead generation or smooth user experience.

Agility CMS: Driving 20% Revenue Increase Thanks To Personalization

To enhance its operations, Visit Orlando, the official tourism association for Orlando, moved to headless commerce centered around Agility’s agile CMS practices and increased revenue by 20% with the help of geotagging personalization and Agility CMS’ best-of-breed integrations. 

To empower the Visit Orlando content management team and increase ticket sales, Agility CMS developed a custom headless commerce solution with the following components, multi-site, multi-channel content management, eCommerce with online ticket sales, POS ticket sales, and personalization. 

With the help of our hybrid headless CMS, the Visit Orlando team increased their conversion rate by 10% and online revenue by 20%.

If you want to learn more about how personalization can improve your sales, read more here: Case Study: Visit Orlando: 20% increase in revenue with agile headless commerce  

Categories

GuideGuide

Get this eBook to go

Share This

Learning about modern Personalization?

Chat with our experts about building your perfect DXP with Personalization!

Free Consultation

Others also read

Modern DXP Solutions With Agility CMS

Digital tools should be able to communicate easily, especially those that are based in the cloud.  Sadly, this...

Download

How To Choose The Best Headless CMS For Your Brand

When deciding to build a new website, application, or digital experience, many businesses’ first question is: what headless...

Download

Building an Ecommerce Website with Agility CMS

Moving away from traditional, monolithic website design brings speed, agility, and a better customer experience. Learn how to...

Download