Pages

This guide introduces the Preview Tool and shows you how to use it to preview and debug modifications during development.

If you need to use FProxy or do advanced debugging, use the Frosmo Debugger instead of the Preview Tool.

What is the Preview Tool?

The Preview Tool is a web application that allows you to preview and debug modifications on your site during development. You use the Preview Tool mainly to:

  • Preview how modifications look and behave in different placements on the page.
  • Check whether modifications are correctly rendered on the page, and whether displays, true displays, and clicks are correctly tracked for the modifications.

You can also view detailed information about modifications and placements, and change your visitor settings.

Preview Tool

Figure: Preview Tool

Supported browsers

The following table lists the browsers supported by the Preview Tool.

Table: Browsers supported by the Preview Tool

BrowserVersion
Google ChromeLatest version
Internet Explorer (IE)10 or newer
Microsoft EdgeLatest version
Mozilla FirefoxLatest version
OperaLatest version
SafariLatest version

Launching the Preview Tool

You have the following options for launching the Preview Tool:

The Preview Tool will only launch on a site that uses the Frosmo Platform. You must also be logged in to the Frosmo Control Panel with the site selected. This is needed to authenticate your Frosmo access to the site.

Using a bookmarklet to launch the Preview Tool

To launch the Preview Tool using a bookmarklet:

  1. Open your browser.
  2. Create a new bookmark named "Preview Tool", and enter the following code in the URL field:

    javascript:(function() {
        try {
            if (!frosmo.easy.preview.isEnabled()) {
                frosmo.easy.preview.enable();
            }
        }
        catch (e) {
            alert('Unable to open Frosmo Preview Tool');
        }
    })();
  3. Log in to the Control Panel, and select your site.
  4. On your site, open the page where you want to test modifications.
  5. Select the bookmarklet.

    Using a bookmarklet to launch the Preview Tool

Using a Google Chrome extension to launch the Preview Tool

To launch the Preview Tool using a Google Chrome extension:

  1. Open Chrome.
  2. Install the Frosmo Preview extension from the Chrome Web Store.
  3. Log in to the Control Panel, and select your site.
  4. On your site, open the page where you want to test modifications.
  5. Select the Frosmo Preview extension icon.

    Using a Google Chrome extension to launch the Preview Tool

Using a URL parameter to launch the Preview Tool

To launch the Preview Tool using a URL parameter:

  1. Open your browser.
  2. Log in to the Control Panel, and select your site.
  3. On your site, open the page where you want to test modifications.
  4. Add one of the following strings at the end of the web page URL, and press ENTER to reload the page:

    • If your site supports query string parameters, add ?frosmo_preview_tool=on or, if the URL already has a query string appended to it, add &frosmo_preview_tool=on.
    • If your site does not support query string parameters, add #frosmo_preview_tool=on.

    Using a URL parameter to launch the Preview Tool

    Using a URL parameter to launch the Preview Tool

    Using a URL parameter to launch the Preview Tool

Using the Preview Tool

You can use the Preview Tool to:

Previewing modifications

You can preview how modifications look and behave in different placements on the page.

To preview a modification:

  1. Launch the Preview Tool.
  2. Select Preview.
  3. Define the following settings:

    • Modification: Select the modification you want to preview. To filter modifications, start writing the name or ID of the modification in the field.
    • Variation: Select the variation you want to preview.
    • Placement: Select the placement in which you want to preview the modification. To filter placements, start writing the name or ID of the placement in the field.

      Only placements marked with a green tick are valid for the current page (based on the URL matching rules of the placement).

    Previewing a modification

  4. Click Preview. The selected modification variation is displayed in the selected placement, if it was not already.

    Previewing a modification

Debugging modifications

You can check modification status and view detailed information about modifications and placements.

To debug a modification:

  1. Launch the Preview Tool.
  2. Select Debugging.
  3. In the Modification field, select the modification you want to debug. To filter modifications, start writing the name or ID of the modification in the field.

    Only modifications marked with a green tick are valid for the current page (based on, for example, the modification segments and the URL matching rules of the associated placement).

    Debugging a modification

  4. If you want to find and highlight the modification on the page, click Highlight.

    Debugging a modification

  5. Check whether the modification is correctly rendered on the page, and whether basic events are correctly tracked for the modification. Once the modification meets the requirements for a specific state, the corresponding box changes from red to green.

    • Rendered: Frosmo Core has called the renderer for the modification. The renderer adds the modification to the page DOM. To get rendered does not require that the modification has been in the browser viewport and therefore visible to the visitor.
    • Display: The renderer has triggered a display event for the modification. As a rule, the renderer triggers the display event immediately after rendering a modification, so the modification is rendered and displayed effectively at the same time. The display event does not require that the modification has been in the browser viewport and therefore visible to the visitor.
    • Click: The visitor has clicked a part of the modification for which clicks are tracked, such as a button, link, or any element with the class frosmo-click. Frosmo Core registers the click and triggers a click event for the modification. If the modification has no clickable parts, it cannot get a click.
    • True display: The modification has remained visible and stationary in the browser viewport for at least 3 seconds. In addition, if the modification's width and height are both less than or equal to 300 pixels, the modification must have been fully in the viewport. If the modification's width or height is greater than 300 pixels, at least 75% of the modification must have been in the viewport. Once Frosmo Core registers that the requirements for true display have been met, it triggers a true display event for the modification.

    Debugging a modification

  6. View detailed information about the modification, its placement, and the trigger attached to the placement, if any.

    Debugging a modification

Viewing visitor and site information

You can view detailed information about your visitor status, the site, and the Frosmo variables for the site.

To view visitor and site information:

  1. Launch the Preview Tool.
  2. Select Info.

The following table describes the visitor and site information that you can view in the Info tab.

Table: Visitor and site information

FieldDescription
Visitor information
SegmentsSegments to which you currently belong. Displays the segment IDs.
Target groupsTarget groups to which you currently belong. Displays the target group IDs.
DecileDecile to which you currently belong. You can change your decile. For more information, see Configuring your visitor settings.
Comparison groupEnable or disable the comparison group for the site. For more information, see Configuring your visitor settings.
Test modeActivate or deactivate test mode for the site. For more information, see Configuring your visitor settings.
ConversionsConversions you have completed on the site since your first visit.
Console debugDisplay or hide debugging information for the current origin (combination of protocol, domain, and port). For more information, see Configuring your visitor settings.
Site information
OriginUnique identifier for the site.
Frosmo serverFrosmo server on which the Frosmo scripts used by the site are stored.
Script locationLocation of the Frosmo script tags in the current page's HTML code. The possible values are HEAD and BODY.
Shared contextCheck whether the site uses a shared context. For more information about shared context, see Glossary.
Data layerCheck whether the site uses the data layer. For more information about the data layer, see Frosmo data layer.

Viewing visitor and site information

Figure: Viewing visitor and site information

Configuring your visitor settings

You can configure the following visitor settings for yourself:

  • Console debug (origin-specific)
  • Comparison group (site-specific)
  • Decile (site-specific)
  • Test mode (site-specific)

To configure your visitor settings:

  1. Launch the Preview Tool.
  2. Select Info.
  3. In the Visitor information section, configure the settings:

    • Decile: To change your decile, select a new one. This allows you to view the site as a visitor belonging to another decile. For more information about deciles, see Glossary.
    • Comparison group: To enable the comparison group for the site, click Info setting disabled. To remove yourself from the comparison group and disable the feature, click Info setting enabled.
    • Test mode: To activate test mode for the site, click Info setting disabled. To deactivate test mode, click Info setting enabled. For more information about test mode, see Test mode.
    • Console debug: To display debugging information in the browser console, click Info setting disabled. To hide the information, click Info setting enabled. The information consists of event messages sent by the Frosmo JavaScript library.

    Configuring your visitor settings

  • No labels