Testing Experiences

Before publishing an experience, it’s crucial to ensure it behaves and appears exactly as intended across various scenarios. Marfeel Experiences provide two primary methods for testing: the Embedded Preview within the editing interface and Live Testing.

Embedded Preview

The editing screen for any visual experience includes a fully interactive Embedded Preview. This tool simulates the experience on any URL and allows you to toggle between mobile and desktop views.

Preview URL dropdown

Navigate to any page within your account to simulate how the experience will appear on that specific URL.

Refresh button

While the preview automatically refreshes with every change, you can manually trigger an update using this button if needed.

Options

The three-dot menu to the right of the URL dropdown offers the following options:

Mobile vs Desktop

Switch between mobile and desktop simulations. Note that Card format previews are limited to mobile views.

JSON

Display the raw JSON response from the experience, which is useful for debugging or working with Recommender API experiences.

Disable Triggers

If you’re editing an experience with triggers and focusing solely on visual adjustments, this option bypasses the triggers, allowing the experience to load immediately—as if no triggers were set.
Remember to test the full experience including triggers as well to ensure the overall behavior is as intended.

Open in Browser

Opens a live debug preview in a new tab. This is helpful when the embedded preview has limitations (e.g., it doesn’t render ads) or when you need to share the preview URL with colleagues.

HTML render endpoint

Opens a new tab showing the fully rendered experience by itself.

JSON endpoint

Opens a new tab showing the raw JSON response, ideal for API-based use cases like recommenders.

AMP endpoint

Displays a popup with an example of how the experience should be implemented on an AMP page. Note that the provided code is a guideline and not meant to be used verbatim.

RSS endpoint

Opens a new tab showing the experience’s raw response in RSS format, useful for API-driven recommenders.

Target icon and breadcrumbs bar

The breadcrumbs bar shows the HTML element hierarchy leading to the selected item, which defaults to the experience container. You can select other elements by clicking on the breadcrumbs or activating Highlight mode using the Target Icon.

Once an element is selected, a dialog appears at its bottom-right corner, offering options to generate an optimized CSS Selector for Inline experiences or an HTML Layout for Recommender using Marfeel Copilot.

Highlighted experience

When the experience loads successfully, the preview screen scrolls it into view and highlights it with a surrounding container for clarity.

Live Testing

To simulate an experience in a real-world environment, append the #mrfexp={EXPERIENCE_ID} parameter to any URL with the Marfeel SDK. This allows you to test the experience on your phone or in a browser with developer tools. Example URL:

htts://www.yoursite.com/article#mrfexp=FC_pazw_iw3SUmowP0a1AZjQw

You can find the EXPERIENCE_ID in the browser URL while editing an experience:

https://hub.marfeel.com/experiences/IL_1fLmaXLpQb6iQTbdVRa7HQ/edit/format

The #mrfexp parameter supports a comma-separated list of experiences, including Inline, Flowcards, or Tag experiences with pre- and post-targeting. For example:

htts://www.yoursite.com/article#mrfexp=FC_fcS-HlkoJQfCMIPyvLqj-dg,IL_1fLmaXLpQb6iQTbdVRa7HQ

Only the specified experiences will be applied, even if other active experiences meet the targeting conditions.

This parameter is exclusive to WEB and does not function on AMP due to its inherent limitations.

Alternatively, you can use #mrfdebug instead of #mrfexp. The key difference is that it replicates the preview behavior, automatically scrolling to and highlighting the experience.

Troubleshooting

Preview page does not load

The Embedded Preview loads resources through Marfeel’s proxy, using a dedicated User Agent. If this setup cannot be whitelisted on your end, you can disable the proxy and customize the User Agent string in Experiences Settings > Custom User Agent for Preview.

Preview page does not look as when browsing normally

If the preview loads but doesn’t match the normal browsing experience, CORS policies may be the culprit. These policies can prevent the browser from loading resources like CSS, images, or fonts from external domains.

To diagnose this issue, enable developer tools and check for failed requests.

Experience does not appear on the preview

Whenever the experience is not appearing on the screen, it might be due to different reasons.

Trigger not fired

If there is a trigger configured and while the conditions specified haven’t been met, the experience will not be shown. To know whether this is the reason for the experience not appearing, select Disable Triggers using the preview options.

CSS Selector not matching

On Inline experiences, if CSS Selector is not found on the page of the preview, experience will not be inserted. When this happens, a warning will be shown below the CSS Selector field.

Flowcard trying to load non-amp content

Normally when using a Custom URL flowcard experience, its rendering will fail if the URL provided does not point to an AMP-compliant webpage, or does not link to an available AMP-compliant webpage through its amphtml rel link.

Layout rendering failed

Layouts cannot be properly rendered whenever their Mustache logic contains errors. This can happen depending on the content they are being fed. To replicate this error, open the layout edition screen and see whether it renders correctly.

No content available

Especially for recommender. It will fail to render if no recommended articles are returned. To test whether this is the culprit, switch to JSON view through the three-dot options of the preview.

Experience server failed

If none of the above items explain why an experience doesn’t appear, there is probably a server issue. In such cases, contact support to receive help.