This is a video walk through of how to experiment with discounts in Episerver Commerce using Optimizely Full Stack.
Watch the video here:
This is a video walk through of how to define Optimizely Full Stack tracking events and configure them in the Episerver user interface.
Watch the video here:
Previous posts have described how to integrate Optimizely Full stack and how to set up an experiementation. This post is a video walk through of the posts.
Watch the video here:
Previous posts have described Integrating Optimizely Full Stack with Episerver and Using Optimizely Full Stack in Episerver to experiment with a set of content changes in an Episerver Project. This post extends on this to describe audience definitions in Optimizely Full Stack.
Audience definition in Optimizely Full Stack based on user attributes from Episerver
The previous post described Integrating Optimizely Full Stack with Episerver. This post extends on that post to show how it's possible to use Episerver Projects to define a set of changes for a site (for example a big homepage change) and experiment with that project to see how it affects a metric for example page views and/or orders.
This specific post covers:
- Code required to allow experiments to be run on Episerver Projects
- Configuring the Optimizely REST Api in Episerver admin mode
- Set up events in Optimizely Full Stack and tracking them in Episerver
- Setting up an experiment in Optimizely Full Stack
- Mapping the experiment to a set of project(s)
Code required to allow experiments to be run on Episerver Projects
This is the first in a series of posts to describe how to use Episerver with Optimizely Full Stack targeted at Episerver implementors/developers. It is not intended to be a full depth dive into Optimizely and is intended to be an introductory set of posts on how to use Optimizely Full Stack with Episerver. This specific post covers:
- What is Optimizely Full Stack
- Episerver environment preparation
- Code required to connect Episerver to Optimizely Full Stack
Further posts in the series describe:
- Using Optimizely Full Stack in Episerver to experiment with a set of content changes in an Episerver Project
- Audience definition in Optimizely Full Stack based on user attributes from Episerver
A number of Episerver sites are now using libraries such as React or Vue.js to create Single Page Applications (SPA) or Progressive Web Apps (PWA) using a headless implementation approach. This is in contrast to the traditional ASP.net MVC front ends that many Episerver builds are using today.
So I decided to put this post together to collect some useful resources for working with single page applications (SPA) or progressive web apps (PWA) in Episerver when building headless front ends. Each section contains a list of useful links ordered by the most recent post/update first to help understand how to build out Single Page Application (SPA) or Progressive Web App (PWA) front ends with Episerver. As more resources around SPAs get released I will update them here.
Episerver Single Page Application Reference sites
Episerver supplies some reference sites to demonstrate how to build Single Page Applications in Episerver using the Content Delivery API. Should be noted that both sites support preview, versioning and on page edit for the SPA site in Episerver.
Episerver Foundation Single Page Application
A reference architecture built using React to show how a full headless front end can be built on top of the Episerver Foundation starter site. It is opinionated and convention based to allow existing Episerver developers to get started with a front end build based on React using some familar concepts. Read about it here: https://world.episerver.com/blogs/remko-jantzen/dates/2020/5/introducing-foundation-spa-react/ and here: https://github.com/episerver/Foundation-spa-react. An example of an React SPA component for an Episerver text block can be seen below:
Episerver has a feature called Episerver Projects that allows editors to work and collaborate on a number of changes that are grouped together into projects. This is allows multiple changes to be made to a site that can be previewed and all published at once which is useful for things like campaign launches and site updates. This is a great feature but more than once in the Episerver Forums I have heard of the requirement to revert all changes made in a project.
Thinking about this, an approach could be to create another project to revert the changes made by a project. This allows editors to quickly get back to the state before the project was published. The code to achieve this can be found over at the following Gist: https://gist.github.com/davidknipe/d64f9d9993443fd5443c6a6a9f6dae13 and does the following things:
Episerver has a great capability that allows content to rendered inside content areas called partial views. This allows an alternative rendering of a piece of content when displayed in content areas. Its often used for teaser type capability where editors take something from the tree and drags it onto a content area. However it's not possible to preview what these partial views will look like easily without actually dragging them onto a content area and trying it.
I wanted editors to be able to see what a partial view would look like and also allow them to edit the content behind it using on page edit before publishing some content. This can be done using a preview controller and a display channel to allow switching to a partial view preview (even if it's not the exact use that content channels are meant to be used for!).
Seeing it in action
If you are a Microsoft Teams user and want to work using mutliple windows then this tip is for you.
Sometimes I find I want to do 2 things on Microsoft Teams at the same time. Something like having two chat windows visible at the same time rather than switching between two chats in the Teams UI. However Teams doesn’t support multiple windows at the moment. To get around this you can log into the web version of teams by browsing to https://teams.microsoft.com and clicking the “Use the web app instead” link as shown below:
A new version of Virtual Template System is now available with some UI enhancements. Virtual Template System allows users to view and edit templates in the Episerver UI.
Specifically the enhancements are as follows:
- The revert button is now either green or red. Green indicating that the template is the same as the one on disk, red meaning the template is different so should be reverted with caution
- When saving a template using the "Save" button the confirmation message now disappears as soon as an editor changes it
- The path is now clickable to either edit or view a template depending on whether its virtualised or not
- Now possible to choose to search in file names only, rather than whole file contents
- Minor bug fixes
A quick video can be seen here to show the changes: