The Nantu QA Tab is a small floating panel that appears on the side of a webpage to help testers and QA engineers monitor and control A/B tests running on the site. It provides an easy way to see which tests are active, what variation you are viewing, and even lets you switch between different versions of a test or turn off tests entirely.

---

How Does It Work? #

1. Automatic Setup:

• The QA tab automatically appears on the right side of your browser screen when the page is loaded.
• It shows the current list of tests running on the page.

1. What You See:

• A list of tests with their test ID (name), the variation you’re currently viewing, and a set of buttons.

1. What You Can Do:

• Switch Variations: Click buttons to quickly switch between different versions of the test (like “v1” or “v2”).
• Turn Off a Test: A button labeled “OFF” allows you to stop seeing the test’s effects.
• Edit Mode: By clicking the “Edit Variations” button, hidden options appear, letting you experiment with variations.

---

Example of Using the QA Tab #

Imagine you’re on an e-commerce website testing two layouts for the product page:

1. One layout shows the “Add to Cart” button at the top of the page.
2. Another layout shows it at the bottom of the page.

With the Nantu QA Tab:

• You can see that a test called “Product Page Button Position” is running.
• The QA tab shows you’re currently viewing “Variation 1” (button at the top).
• If you click the button for “Variation 2,” the page will reload, and now you see the button at the bottom.

---

Example URL to Trigger the QA Tab #

To enable or force specific test variations, the system uses a special URL format. Here’s an example:

https://example.com?nantu_variations=123:v1,456:v2

• 123:v1: Test ID 123 is showing variation “1.”
• 456:v2: Test ID 456 is showing variation “2.”

When you visit this URL:

1. The page will load with these variations applied.
2. The QA Tab will display information about these tests, and you can adjust them further if needed.

---

Why Is It Useful? #

• Quick Testing: See all active tests and make changes on the fly without needing to edit any code.
• Easy Debugging: Switch variations to ensure everything works as expected.
• Flexible Control: Turn tests on or off for QA purposes, ensuring a smooth experience for end users.

The Nantu QA Tab makes managing A/B tests simple, helping testers focus on what matters most—ensuring the website works flawlessly for users.

---

The Nantu QA Tab includes the following elements, which facilitate QA testing and mode configuration for Nantu experiments:

1. Nantu Mode Cookie and Query:
   A variable that checks the values of both the nantu_mode query parameter and the nantu_mode cookie.
2. Nantu Mode OFF:
   A trigger that activates when the nantu_mode query parameter equals “off.”
3. Nantu Mode QA:
   A trigger that activates when the nantu_mode query parameter equals “qa.”
4. Nantu Mode QA Event:
   A trigger that fires on the nantu_qa_mode event. This is an alternative method for enabling QA mode.
5. Nantu Mode QA Query Var:
   A trigger that fires only when the nantu_mode query parameter equals “qa.”
6. Nantu QA Tab:
   A custom HTML tag responsible for rendering the QA tab interface.
7. Nantu Set QA Cookie:
   A tag that sets the nantu_mode cookie to enable QA Mode.
8. nantu_experiment:
   A Data Layer variable containing the experiment name.
9. nantu_mode_cookie:
   A variable that retrieves the value of the nantu_mode cookie.
10. nantu_mode_query_var:
    A variable that retrieves the value of the nantu_mode query parameter.
11. nantu_test_id:
    A Data Layer variable containing the experiment ID.
12. nantu_test_variations:
    A Data Layer variable containing data for all variations in the experiment.
13. nantu_variation:
    A Data Layer variable containing the ID of the selected variation.
14. nantu_variation_name:
    A Data Layer variable containing the name of the selected variation.