QA Overlay Widget User Guide

Streamline Your Experiment Testing with our QA Overlay Widget

This Article Will Help You:

• Introduce to QA overlay widget
• Get an Overview of the Widget
• Know how to Access QA Overlay Widget
• Understand the Interface and Navigation
• Understand different Tabs in the Widget
  • Current View
  • QA Experience
  • Live Logs

The QA Overlay widget is designed to streamline the quality assurance of your experiments within Convert Experiences. It lets you view and manage active, scheduled, or draft experiments in a controlled environment. Below, we'll go over how to use this tool effectively, with step-by-step instructions.

---

Overview of the QA Overlay Widget

Purpose: The QA Overlay Widget lets users:

• Preview experiments across different audiences, devices, and variations.
• Enable/disable experiments and variations for focused testing.
• Track goals and other metrics in real-time to understand their status and triggers.
• Log events, errors, and interactions in a detailed, timestamped log.

Accessing the QA Overlay Widget

Prerequisites

1. Tracking script: Note that the QA overlay widget is not available for users using the legacy tracking script. Kindly update the new tracking script to use this feature.
2. Enable QA Mode: The widget loads on pages containing specific cookies or URL parameters:
   • _convertqa URL parameter (available in preview URL)
   • _convert_qa cookie
3. Convert Chrome Extension: The overlay provides enhanced functionality when the Convert Chrome extension is installed and active.

Steps to Launch the Overlay

1. Create a new Project and experience using the tracking script.
   
   
2. Navigate to any variation associated with any Convert project and click on Preview
3. Ensure the page URL or cookies meet one of the above prerequisites.
4. If using the Chrome extension, ensure it is enabled for the domain. The extension also shows additional information for the QA overlay.
5. Refresh the page if necessary, and the QA Overlay Widget should load automatically.
   
   

Main Interface and Navigation

Upon activation, the widget opens with a Welcome Screen. This screen includes introductory text tailored to your QA session, which varies based on the browser settings, cookies, and Chrome extension status.

1. Introduction Message: The widget displays a welcome message and additional setup instructions.
   • If the Chrome extension is not detected, you’ll see an invitation to install it for added functionality.
   • An optional message advises enabling third-party cookies if features are not fully active.
2. Proceed to Testing Tabs: Click Start to proceed to the main tabs, which include Current View, QA Experience, and Live Log.
   
   

---

Using Each Tab in the QA Overlay Widget

Each tab provides unique features to assist in your QA testing. Here's how to use each one:

1. Current View Tab

This tab shows the experiences, variations, and goals for the current page as a typical visitor would see it. It’s ideal for confirming that experiments are displaying their states correctly.

• Steps:
  • Open the Current View tab to see a list of all experiments and variations currently active on the page.
  • Use Filters at the top to narrow down by experiment status (draft, scheduled, active, etc.).
  • Check the Status Overview at the bottom for indicators like tracking code status, goals triggered, and integration details.

2. QA Experience Tab

The QA Experience tab is the main control center where you can manually select which experiences and variations to test. Here you can combine multiple experiences and variations to simulate complex scenarios.

Steps:

• Open the QA Experience tab and select the experiment you want to test.
• Use the dropdown menu to select multiple experiences and variations, each displaying as a tag. Remove any tag by clicking the “X.”
• Audience Selection: Choose target audiences to simulate varied user types. If a selected audience isn’t compatible with an experience, it will be greyed out.
• Pages: View the associated site areas for each experience to verify coverage.
• Test Goals: Use the dropdown to select and trigger specific goals to see if they register as expected.
  

3. Live Log Tab

The Live Log tab displays real-time logging of events, conversions, and errors related to the experiments running on the page. This is especially helpful for diagnosing issues or understanding user interactions.

Steps:

• Navigate to Live Log to view a detailed log of events.
• Use Filters to highlight specific events (e.g., conversions, console events).
• Play/Pause logging as needed or adjust log speed for faster/slower updates.
• Add processing rules or keyword-based filters to streamline the logs for your analysis.