Pages

You can safely test modifications in your production environment by using test mode.

What is test mode?

Test mode allows you to show modifications only to certain visitors for testing purposes. Using test mode involves:

  1. Enabling test mode for modifications in the Frosmo Control Panel
  2. Activating test mode in the browser

Modifications for which test mode is enabled are visible only to visitors who browse your site in test mode.

In the browser, test mode:

  • Only affects the domain within which the visitor activates it. If your site consists of multiple domains, test mode only affects pages that belong to whatever domain the visitor is in when they activate test mode.
  • Persists across protocols, for example, from HTTP to HTTPS, provided the site uses a shared context. If the site does not use a shared context, test mode only applies to the protocol within which the visitor activates it.
  • Persists across tabs. The visitor can freely open and close tabs for the site, and test mode will remain active, provided the domain remains the same. If a shared context is not used, the protocol must also remain the same.
  • Is automatically deactivated after 30 minutes of inactivity.

Test mode provides a simpler way of testing modifications compared to using dedicated testing segments.

Test mode and workspaces

You don't need to use test mode within a workspace, since workspaces are already separated from production and previewing their content is only accessible through a specific URL. Moreover, unless you specifically want to remove a modification from the production flow for testing purposes, there's no reason to use test mode over a workspace.

However, if you want to use test mode within a workspace, you can do so, as the two features are compatible. Enabling test mode for a workspace modification means that the modification is only visible to visitors who activate both test mode and workspace preview mode when browsing the site.

For more information about workspaces, see Workspaces.

Testing modifications

To test a modification:

  1. Enable test mode for the modification.
  2. Test the modification on your site.
  3. Disable test mode for the modification.

Enabling test mode for the modification

  1. In the Control Panel, create or edit the modification normally.
  2. In the modification settings, select Display Options.
  3. In the Audience section, select Test mode.

    Test mode enabled for a modification

  4. Click Save.
  5. If the modification is deactivated, click Activate at the top of the page.

You have enabled test mode for the modification. Only visitors who browse your site in test mode can now see the modification. (They must still belong to a segment to which the modification is normally shown, if defined.)

Testing the modification on your site

  1. In the browser, open a page that contains the modification.
  2. Activate test mode by adding the following query string to the page URL and pressing ENTER:

    frosmotest=on

    If the URL does not contain an existing query string, add "?" between the URL and the above string. If the URL already contains a query string, add "&" followed by the above string at the end of the existing query. For more information about query strings, see Wikipedia.

    The following figure shows an example of a URL with just the test mode query string included.

    Activating test mode in the browser

    The following figure shows an example of a URL with the test mode query string appended to an existing query string.

    Activating test mode in the browser

    The browser now shows the modification on the site.

    While test mode is active, you will also see all other modifications for which test mode is enabled (and that are shown to segments to which you belong).
  3. Test the modification to make sure it displays and functions correctly.
  4. After you're done, deactivate test mode by adding the following query string to the page URL and pressing ENTER:

    frosmotest=off

    The following figure shows an example of a URL with the query string included.

    Deactivating test mode in the browser

    The browser no longer shows the modification on the site.

You have tested the modification. You can now disable test mode for it.

Disabling test mode for the modification

  1. In the Control Panel, open the modification settings.
  2. If the modification is not ready to go live yet, deactivate it by clicking Deactivate at the top of the page.
  3. Select Display Options.
  4. In the Audience section, deselect Test mode.

    Test mode disabled for a modification

  5. Click Save.

You have disabled test mode for the modification. If activated, any visitor can now see the modification irrespective of whether test mode is enabled or disabled in their browser. (They must still belong to a segment to which the modification is normally shown, if defined.)

Alternative ways of activating and deactivating test mode in the browser

Instead of using the URL query strings to activate and deactivate test mode, you can also use:

Using the Preview Tool

You can use the visitor settings in the Preview Tool to activate and deactivate test mode. For more information, see Testing modifications with the Preview Tool.

Test mode setting in the Preview Tool

Figure: Test mode setting in the Preview Tool

Using the Frosmo Debugger

You can use the visitor settings in the Frosmo Debugger to activate and deactivate test mode. For more information, see Frosmo Debugger.

Test mode setting in the Frosmo Debugger

Figure: Test mode setting in the Frosmo Debugger

Using the browser console

If you know your way around your browser's developer tools, you can manually activate and deactivate test mode by calling the Frosmo Core library from the browser console.

To activate and deactivate test mode from the browser console:

  1. Go to the site.
  2. Open the browser console.
  3. To activate test mode, make the following function call:

    frosmo.easy.states.set(frosmo.easy.STATE_MODE, frosmo.easy.STATE_MODE_TEST, frosmo.easy.STATE_TYPE_SESSION);
  4. To deactivate test mode, make the following function call:

    frosmo.easy.states.remove(frosmo.easy.STATE_MODE);

Activating and deactivating test mode from the browser console

Figure: Activating and deactivating test mode from the browser console

Finding test mode modifications

In the Control Panel, in the modifications list, you can find modifications for which test mode is enabled by:

  • Looking for modifications with the Test mode label

    Modification with the test mode label

  • Filtering the modifications list by Modes > Test mode enabled

    Filter modifications that have test mode enabled

  • No labels