React Storefront

Cloud Management: Modes

Modes is a core component of the Moovweb experience delivery platform. Customers can take advantage of Modes to deliver high-quality customized experiences to end users based on multiple criteria. In this section you will learn how to create and use Modes in the Control Center.


What Are Modes?

Modes let you deliver targeted experiences to a specific endpoint based on your own business objectives. Control Center projects can have one or multiple Modes making it easy to experiment and refine the presentation, improving your site’s flexibility and agility. Modes allow you to target experiences to specific audiences, test alternate experiences, and learn from the results to drive more user engagement and further your business objectives.

A default Mode is automatically created for you when you create a Control Center project. The default Mode should ideally contain a default experience that is delivered to any visitor that has not been directed to an alternate Mode. Alternate Modes can be targeted using specific criteria that you specify in the Control Center.

For example, if you are creating end-user experiences that target mobile and tablet devices, you could create an initial setup of Modes for each endpoint.

Basic Workflow for Using Modes in the Moovweb Cloud

A Mode called the default Mode gets created automatically every time you create a Control Center project. The default mode should ideally contain at least a default experience that acts as a catch-all sequence when you have more than one Mode.

To create and use alternate Modes for your Control Center project you should perform the following steps:

  1. Create a new Mode in the Control Center — create the container.
  2. Deploy a Developer Dashboard project to your new Mode — add the custom experience.
  3. Test and validate the custom experience in the Moovweb cloud.
  4. Define Rules to direct live traffic to your Mode — launch live.

Creating a Mode in the Control Center

To create a new Mode for your Control Center project, click the “Create New Mode” button located on the project landing page (Projects Index > projectname).

New Mode

Enter a name for your new Mode. We recommend using a short descriptive name that communicates what experience the Mode delivers, e.g., “Mobile” or “Tablet-Demo”. When you have multiple Modes this will make them easier to manage.

Once you save your new Mode, you will see it listed in the Preview Modes section on the Control Center project landing page.

Optional Settings

Additionally, you can also set the following options when creating or editing a Mode:

  • Restricted access: You can restrict deployment to managers only.
  • Versioning system integration: We offer control versioning system integration so you can access build information directly from the Control Center. Currently we support integration with GitHub out of the box.

What Happens When You Create a Mode?

After creating a Mode it is first available in the system as a Preview Mode. Preview Modes allow you to take advantage of user testing before the experience is launched live. Once you have deployed an experience to a Preview Mode you will have a unique URL (that lives during a single browser session) that you can use to access the experience on a real device, share with your QA teams or even evaluators or stakeholders — safely without having to expose the experience to a larger audience.

The unique URL contains the following elements:

  • m. - the host variable for Control Center projects that are set up to use subdomains.
  • - primary domain of the Control Center project. Notice that all the Modes that correspond to this Control Center project are delivered using the same domain from the Moovweb cloud.
  • moov_=xxxx - query parameter that contains the unique identifier for the Preview Mode.

When you are ready to take your experience live you will need to set your preview Mode into the live state, see the next section.

To learn about deploying experiences to Modes, see the “Moov Deploy” section in the Developer Center.

Taking Experiences Live Using Modes Routing

Using Modes routing you can set up individual rules that are used by the system to direct live traffic data to a specific Mode. Once a rule or a set of rules for a given project is saved into the Moovweb cloud, incoming traffic to the project’s primary domain is evaluated in real time and internally redirected to the appropriate Mode, hence delivering the corresponding end user experience.

Subsequent visits from the same device will automatically access the experience that was previously delivered to provide a consistent and accurate behavior.

You can set up an individual rule based on device type or segment traffic to execute experience testing experiments by directing percentages of traffic to different Modes as part of a single rule.

New Control Center projects don’t have any rules when they are created initially. Once the first successful deploy to the default Mode is completed, then all the traffic is directed to the default Mode. It’s a good practice to always deploy an experience to the default Mode as a catch-all rule.

Setting up a basic Rule

To set up a routing rule, click the “Modes Routing” button at the top of the Modes page for your project (Projects Index > projectname).

Modes Routing

Once on the Modes Routing page you can start by clicking the Add New Rule button and configure the rule as follows:

Add New Rule

  1. Enter a descriptive Rule name
  2. Select a Criteria, such as “Mobile” or “Tablet”. (You can also use “Other” to enter a header name and custom RegEx.)
  3. Leave the Traffic Segment at 100% for now
  4. Select your target Mode
  5. Click “Add Rule”
  6. Click “Save Rules and Go Live”

When you create routing rules they are not propagated live until you click “Save Rules and Go Live” — this allows you to create multiple new rules in one session.

Evaluation of Rules

All incoming traffic is evaluated against the rules defined for that Control Center project. As seen in the interface, evaluation starts from the top down. When an incoming request matches a rule, the specified target Mode in that rule is delivered. If matched, the experience in the default Mode is delivered.

Rules should be arranged by specificity with more specific criteria at the top. If, for example, you create a rule with “Mobile” criteria (to target an all-purpose mobile Mode), and a rule using custom RegEx for iPhone criteria (to target a custom iPhone Mode), iPhone users will not see that rule’s target Mode if the rule is below the Mobile rule. Be sure to carefully review the order of your rules before going live to ensure the intended Modes are delivered.

We do still support the older technique of using variables from our Device Detection script, but going forward Layers and Modes should provide the most robust and versatile approach.