In this tutorial, you will learn how to enhance Optimizely CMS with a number of free packages. When undertaking any new project, you will not want to reinvent the wheel. Without knowing what packages and plug-ins are available out of the box, you might spend weeks and months building something, when you could have used a more feature-rich, battle-hardened third-party package instead.
If you want to save yourself from wasting months' worth of development effort, I recommend you carry on reading 🔥🔥🔥
A/B Testing
Within Episerver CMS, you had the ability to perform some basic A/B testing on pages and components. In earlier versions of CMS 12 this A/B testing was not supported, however, as of May 2022 this has changed.
The A/B testing module will not install automatically when you installed Optimizely CMS, however, with a few minutes of effort, you can easily include it within your build, To install the plug-in, install the NuGet package from the Episerver NuGet feed and then add this snippet within Startup.cs:
After enabling the plugin and making a page-level change, within the publishing tab, you will see a new option called A/B test change:
Content Manager
The content manager extension will provide content editors with a new way to interact with content. This package is created by Optimizely Labs, and it gives a more headless CMS view, compared to the traditional CMS page tree creation workflow:
To enable the content manager, install the NuGet plug-in and then add this config within Startup.cs:
Block Enhancements
Block enhancements in my opinion is a must-install package.
To get going with Block enhancements install the NuGet package and then add this config:
On line 6, I've added some additional configurations. This configuration is optional, however, it you want to further customise how this package works, you can do so using the BlockEnhancementsOptions object like this.
Project Enhancements
This plug-in enhances what you can do with projects within Optimizely. If I'm honest this package is handy, however, its not a must-have. You get some useful things like additional icons within the content tree:
Geta.Sitemap
On every build, you will need a Sitemap.xml file to ensure a search engine crawler can correctly index all of your webpages. There is literally no point in re-creating the wheel when implementing this feature. Using a third-party package will save you a lot of development time. The best sitemap plug-in for Optimizely CMS 12 is Geta Sitemap:
To enable the Geta.Sitemap, install the NuGet package and then add this config:
Geta.NotFound Handler
Adding a 404 handler is another standard to-do list item that you will need to act on every build. Geta has also created a pretty kick-ass non-found handler. The configuration for his plug-in is a little bit more in=-depth than the others listed on this page. This is mainly because you need to enable the plug-in, as well as build a 404 page before it will work.
To install the plug-in you will need to install the corresponding NuGet package and then add this config into Startup.cs:
In order to build the 404 page, you can define a routing to load a controller. The example, I'm using above is taken from the packages docs. To create the corresponding 404 page controller, could look like this:
You do not need to build the 404 page as a vanilla MVC controller. You can use an Optimizely controller instead. In fact, if you want to include your websites primary header and footer, it would be better to go down this route. If you want to learn how to set up the routing and the controllers to do this, you can read this tutorial.
LinkItemProperty
Health Check
Grid View
Installing all of these packages will give your editors a greatly improve experience while using Optimizely. All of these packages will make the CMS better, they are all free, and they are all easy to install,. There is no excuse for not making good use of them. Creating a great editor experience is the thing that will make you a coding legend! Happy Coding 🤘
