# Welcome to AB Tasty documentation

Testing new features, accelerating output, enhancing experiences. It all takes a mindset of optimization. It all takes trial, then better.

{% embed url="<https://www.youtube.com/watch?ab_channel=ABTasty&v=hC0o_XfbUhI>" %}

<a href="https://www.abtasty.com/get-a-demo/" class="button primary">Get a demo</a>  <a href="/spaces/CfnsZtoJlWKJP77AMG0T/pages/TBlpeM2ORq5nOfFzrrRK" class="button secondary">Join our User Community</a>

## Your other resources

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Enhance your workflow with AI-driven features</strong></td><td>Evi, our suite of intelligent tools helps you move faster, make better decisions, and focus on what matters most.</td><td><a href="/files/qNxWPPL353BQH97pAcNU">/files/qNxWPPL353BQH97pAcNU</a></td><td><a href="/spaces/hZIDRsh66I8ikipjy42H/pages/iE7tkiU54rL5H9qImTVH">/spaces/hZIDRsh66I8ikipjy42H/pages/iE7tkiU54rL5H9qImTVH</a></td></tr><tr><td><strong>Developer documentation</strong></td><td>Use AB tasty’s API, SDK, and developer tools to build custom integrations, streamline workflows, and create tailored experimentations.</td><td><a href="/files/cxxVfW97hexn6zrq1O7B">/files/cxxVfW97hexn6zrq1O7B</a></td><td><a href="/spaces/dOXiDeTDDJGZusc7Dwd3/pages/1et4I1OtTWJ8Uj5Eatlg">/spaces/dOXiDeTDDJGZusc7Dwd3/pages/1et4I1OtTWJ8Uj5Eatlg</a></td></tr><tr><td><strong>Discover our widgets</strong></td><td>Elevate your website’s functionality and engagement effortlessly with AB Tasty's widgets.</td><td><a href="/files/n6tTayqCwZIsKs2sG8Eu">/files/n6tTayqCwZIsKs2sG8Eu</a></td><td><a href="https://docs.abtasty.com/help-center">https://docs.abtasty.com/help-center</a></td></tr><tr><td><strong>Release note</strong></td><td>Looking for a page full of features to help you work smarter and faster? This is where you’ll always find what’s new with AB Tasty.</td><td><a href="/files/fLuqSuOdBnRUDalHiWuX">/files/fLuqSuOdBnRUDalHiWuX</a></td><td><a href="https://www.abtasty.com/new-features-2025/">https://www.abtasty.com/new-features-2025/</a></td></tr><tr><td><strong>Statistical Calculator</strong></td><td>Want to achieve statistical reliability quickly?<br>Use our A/B Test Calculator and Minimum Detectable Effect Calculator.</td><td><a href="/files/F0xhJJpPnrw2aX3ND95D">/files/F0xhJJpPnrw2aX3ND95D</a></td><td><a href="https://www.abtasty.com/sample-size-calculator/">https://www.abtasty.com/sample-size-calculator/</a></td></tr><tr><td><strong>Blog</strong></td><td>Explore our articles, e-books, case studies, and webinar replays to maximize your use of AB Tasty.</td><td><a href="/files/6tFSuz96W31GrNk12qgR">/files/6tFSuz96W31GrNk12qgR</a></td><td><a href="https://www.abtasty.com/resources/">https://www.abtasty.com/resources/</a></td></tr></tbody></table>

## Popular articles

{% content-ref url="/pages/mHQ8eOPURg4SyQDO2y7h" %}
[Set up the AB Tasty Tag in 5 Minutes](/account/tag-integration/implement-ab-tasty-tag/set-up-the-ab-tasty-tag-in-5-minutes)
{% endcontent-ref %}

{% content-ref url="/pages/94HMhTKQNhUhd0lUkXr0" %}
[Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step)
{% endcontent-ref %}

{% content-ref url="/pages/NYsELROHY1WRUxuLT44D" %}
[Campaign duplication](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-duplication)
{% endcontent-ref %}

## New articles

{% content-ref url="/pages/p00Pgjlpcx5MyeOQFVIe" %}
[Evi Ideas](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/ideas-copilot)
{% endcontent-ref %}

{% content-ref url="/pages/hPDMFKbdu76ZnJw6uE3R" %}
[Evi Analysis](/reporting-and-performances/reporting/campaign-reporting/analysis-copilot)
{% endcontent-ref %}

{% content-ref url="/pages/wKSxNb5eA1jpvjxBtkJ1" %}
[Import Audience data from any 3rd-party solution (Custom pull)](/integrations/custom-integrations/import-audience-data-from-any-3rd-party-solution-custom-pull)
{% endcontent-ref %}

{% content-ref url="/pages/4FapgxibUFzxe75gBR6s" %}
[Even allocation](/web-experimentation-and-personalization/traffic-allocation/even-allocation)
{% endcontent-ref %}

{% content-ref url="/pages/7ApTifNueVhB0jvhhp9u" %}
[Using Evi Content](/web-experimentation-and-personalization/editors-and-widget/visual-editor/using-the-editor-copilot)
{% endcontent-ref %}

{% content-ref url="/pages/Y45e89efCmPs12A7bZLR" %}
[Chrome extension](/web-experimentation-and-personalization/editors-and-widget/chrome-extension)
{% endcontent-ref %}


# Getting started

Welcome to **AB Tasty Commerce**. Commerce brings catalog management, ranking rules, recommendations, merchandising, and search together in a single app. This page mirrors the in-app **Get started** onboarding so you can go from an empty account to a live, data-driven catalog.

{% hint style="info" %}
**What changed:** Commerce is the successor to the former **Recommendations & Merchandising** and **Search** products. The underlying concepts (strategies, rules, ranking blocks, RECO/MERCH ids) are the same, they are now unified under one **Commerce** app and navigation.
{% endhint %}

### The Getting started checklist

<figure><img src="/files/GeebmkVjyQMr8XOtccAe" alt=""><figcaption></figcaption></figure>

The onboarding screen presents a checklist organized into three groups. Each group shows its own progress (for example, `0/3` or `2/2` completed). Work through them top to bottom.

#### 1. Connect your catalog

Bring your products into Commerce. This group has three steps:

| Step                           | What you do                                                                   |
| ------------------------------ | ----------------------------------------------------------------------------- |
| **Connect catalog source**     | Choose where your product data comes from (see below).                        |
| **Set catalog basics**         | Define the core settings for how your source catalog is imported.             |
| **Import your catalog fields** | Map the product fields you want available for rules, filters, and strategies. |

{% hint style="success" %}
Once your catalog source is connected and the first synchronization completes, your products appear under **Catalog** (the header shows the product count and the last update, for example "Last update: about 8 hours ago from Shopify").
{% endhint %}

#### 2. Unleash algorithmic power

Feed performance data into Commerce so the ranking algorithms can use real metrics such as views, purchases, and revenue:

| Step                                   | What you do                                                                                                 |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| **Connect analytics source**           | Link your analytics tool.                                                                                   |
| **Enrich catalog with analytics data** | Attach behavioral metrics (for example `pageviews_last_30_days`, `revenues_last_30_days`) to your products. |

#### 3. Unleash personalization power

Enable the front-end signals that make recommendations and merchandising personal:

| Step                              | What you do                                                                                       |
| --------------------------------- | ------------------------------------------------------------------------------------------------- |
| **Install JS tag**                | Add the AB Tasty tag to your site so visitor events are collected.                                |
| **Set visitor context variables** | Define the dynamic context (such as page type, category, viewed items) passed to your strategies. |

{% hint style="info" %}
Groups can be completed in any order, but connecting the catalog first is recommended, most other steps build on the products it imports.
{% endhint %}


# Recommendations


# Create a recommentation strategy

A **Recommendation** strategy generates a dynamic product list from user behavior, context, or product relationships, and displays it at a specific location on the customer journey (homepage, category page, product page, and so on).&#x20;

{% hint style="info" %}
**What changed:** Recommendations come from the former **Recommendations & Merchandising** product and keep the same model. The builder has been refreshed, ranking blocks are now grouped into **Basics / Dynamic / Customizable**, and the former drag-and-drop "RANKING BLOCKS" / "CUSTOM RULES" panels are replaced by **New rule** and **Global customization**. Under the hood each strategy still carries a `RECO_ID` for API deployment.
{% endhint %}

## Creating a recommendation <a href="#creating-a-recommendation" id="creating-a-recommendation"></a>

### Create with AI <a href="#create-with-ai" id="create-with-ai"></a>

**Create with AI** lets you describe the strategy in natural language and have Commerce generate it.&#x20;

{% stepper %}
{% step %}

#### Click **Create with AI**

Click **Create with AI** to start the guided flow.
{% endstep %}

{% step %}

#### Enter a description

<figure><img src="/files/9P770UAGlUvYIFnPFzgk" alt=""><figcaption></figcaption></figure>

Enter a description and click **Generate** (the button stays disabled until you type a prompt. The generated strategy opens in the builder, where you can review and refine it.
{% endstep %}
{% endstepper %}

### Guided creation

{% stepper %}
{% step %}

#### **Create recommendation**&#x20;

Click **Create recommendation +** to start the guided flow.
{% endstep %}

{% step %}

#### Choose the location

The location matters because it determines which context variables (such as `categoryId` or `productId`) are available to your rules, and which presets are offered next.

<figure><img src="/files/BiyrVlHEKin7LmdMpKUm" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Pick a starting point

<figure><img src="/files/kDUA8N0B2qhBDAYL5t0w" alt=""><figcaption></figcaption></figure>

The next modal, **Pick a strategy to start from…**, offers:

* **Basics → Empty strategy**: start from scratch.
* **Recommended for \<location>**: placement-aware presets, for example:
  * **Best sellers**: push the products with the best number of sales over the last 7 / 14 / 30 days.
  * **Most consulted products**: the most viewed products over the last 7 / 14 / 30 days.

Picking a preset opens the builder pre-filled with a matching rule; **Empty strategy** opens an empty builder.
{% endstep %}

{% step %}

### Add Rules, Pins, and customizations

<figure><img src="/files/MdgYqvYXN0sQQTnccKM6" alt=""><figcaption></figcaption></figure>

The left **configuration panel** of the **stragey builder** is where you assemble the strategy. An empty strategy prompts you to *"Kick off your strategy by adding a first rule…"* with **New rule +**. The panel is organized into:

* **(Rules)**: one or more ranking blocks, each named **Rule #N**.
* **Pins** → **Pin product(s)**.
* **Global customization** → **New global customization (filter, exclude, sort…)**.
* **Display rules**: **Results maximum** and **Display threshold**.

The right panel, **Your strategy results**, renders a live preview of what the configuration returns
{% endstep %}

{% step %}

### Save and deploy

You can now save and deploy the strategy
{% endstep %}

{% step %}

### Performance reporting

To measure performance, open the **Recommendations Reporting** dashboard.

<figure><img src="/files/vKDNUg11ERbf0ftv4BEC" alt=""><figcaption></figcaption></figure>

Reporting (**Recommendations → Reporting**) tracks exposure and revenue impact, KPIs include "Part of the catalog displayed", "Visitor exposition rate", and "Exposed visitors click rate", with **Compare**, **Filters**, and sections for **Top products**, **Pinned products**, **Top categories**, **Top strategies**, and **Top brands**.
{% endstep %}
{% endstepper %}

## The strategy builder <a href="#ranking-blocks-new-rule" id="ranking-blocks-new-rule"></a>

#### Ranking blocks (New rule) <a href="#ranking-blocks-new-rule" id="ranking-blocks-new-rule"></a>

Click **New rule +** to add a ranking block, the main source of products for the rule. Blocks are grouped:

#### Basics <a href="#basics" id="basics"></a>

| Block                          | What it returns                                      |
| ------------------------------ | ---------------------------------------------------- |
| **Best sellers**               | Products that did the best sales over the last days. |
| **Most consulted products**    | Products most viewed over the last days.             |
| **Repurchase recommendations** | Products the user is likely to buy again.            |

#### Dynamic <a href="#dynamic" id="dynamic"></a>

| Block                                 | What it returns                                                                                                                         |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **Products associated to…**           | Products often bought together with another product.                                                                                    |
| **Products viewed together with…**    | Products often viewed together with another product.                                                                                    |
| **Products semantically similar to…** | Products alike in meaning (an *on-demand* block, when not yet activated it shows **Enable**, which opens the external enablement step). |
| **semantic**                          | A custom semantic rule.                                                                                                                 |

#### Customizable <a href="#customizable" id="customizable"></a>

| Block                      | What it returns                                     |
| -------------------------- | --------------------------------------------------- |
| **Products sorted by…**    | Products sorted by the catalog field you choose.    |
| **Products from variable** | Products supplied by a dynamic contextual variable. |

{% hint style="info" %}
The **Dynamic** blocks are powered by machine-learning algorithms. For how *Products associated to…*, *Products viewed together with…*, and *Products semantically similar to…* are computed (co-occurrence, TF-IDF, semantic similarity), see [Algorithms](https://file+.vscode-resource.vscode-cdn.net/Users/didier/repos/abtasty/commerce/docs/commerce/04-creating-strategies/recommendations/algorithms/). For the runtime inputs used by *Products from variable*, see [Dynamic contextual variables](https://file+.vscode-resource.vscode-cdn.net/Users/didier/repos/abtasty/commerce/docs/commerce/04-creating-strategies/recommendations/dynamic-contextual-variables/).
{% endhint %}

#### Pins <a href="#pins" id="pins"></a>

In the **Pins** section, **Pin product(s)** forces specific products into fixed positions at the top of *this* strategy.

{% hint style="info" %}
A **Pin** boosts products to the top of a single strategy. To promote or demote products *globally across every strategy*, use the dedicated [Boost & Bury](https://file+.vscode-resource.vscode-cdn.net/Users/didier/repos/abtasty/commerce/docs/commerce/03-creating-rules-boost-and-bury/) rules instead.
{% endhint %}

#### Global customization <a href="#global-customization" id="global-customization"></a>

![Global customization options: Filter, Exclude, Diversification, Shuffle, Sort by, Filter if.](https://file+.vscode-resource.vscode-cdn.net/Users/didier/repos/abtasty/commerce/docs/commerce/04-creating-strategies/recommendations/images/custom-rules.png)

The **Global customization** section adds rules that apply across the strategy. Use **New global customization (filter, exclude, sort…)** to add one of:

| Option              | What it does                                          |
| ------------------- | ----------------------------------------------------- |
| **Filter**          | Filter products based on dynamic, personalized rules. |
| **Exclude**         | Exclude specific products from the rule.              |
| **Diversification** | Reorganize products to optimize diversity.            |
| **Shuffle**         | Randomize the order of product results.               |
| **Sort by…**        | Reorganize results by sorting on a field.             |
| **Filter if…**      | Only include some products if a condition is met.     |

#### Display rules <a href="#display-rules" id="display-rules"></a>

| Setting               | Default | What it does                                                   |
| --------------------- | ------- | -------------------------------------------------------------- |
| **Results maximum**   | `12`    | Maximum number of products the strategy returns.               |
| **Display threshold** | `0`     | Minimum number of products required before the block is shown. |


# Repurchase recommendation algorithm


# Integrating & calling the repurchase algorithm

For each product a user has already bought, the algorithm estimates its repurchase cadence and surfaces the product when the user is approaching their next forecasted repurchase date.

{% hint style="info" %}
The API does **not** fetch the user's purchase history for you. It doesn't know the user and reads no purchase database. The caller (site tag, integration, CRM job, client backend) fetches the history upstream and passes it on every request. See Provide the history on every request.
{% endhint %}

### Provide the history on every request

The value of `purchase_history` is an object mapping each product id to a list of ISO 8601 purchase timestamps.

```json
{
  "variables": {
    "purchase_history": {
      "SKU-001": ["2025-01-15T00:00:00", "2025-04-20T00:00:00", "2025-07-10T00:00:00"],
      "SKU-002": ["2025-03-01T00:00:00"]
    }
  }
}
```

**Constraints**

* Type: a dictionary of `{ string : list of strings }`.
* Keys: the product's `id` in the catalog (the same id as in `items`).
* Timestamps: ISO 8601 strings (`datetime.fromisoformat`). Time zones are accepted; a missing time zone is interpreted as UTC.
* **Cap: 50 products.** Beyond that, only the 50 with the most recent last purchase are kept; the rest are dropped and a warning is logged.
* An empty list (`"SKU": []`) and an empty dictionary (`{}`) are valid; they simply produce no recommendations.

{% hint style="warning" %}
Requests carrying a `purchase_history` are inherently per-user, so cache keys are effectively individual. Cache misses are expected and acceptable for this strategy.
{% endhint %}

### What the source returns

The `repurchase` builtin behaves like a catalog source: it returns product rows, filtered to the products that are repurchase-eligible for this user. Each row carries all the usual `items` columns (`id`, `name`, `price`, `img_link`, `absolute_link`, `categories`, engagement metrics, and so on) **plus three computed columns**.

| Column                     | Type           | Meaning                                                                                           |
| -------------------------- | -------------- | ------------------------------------------------------------------------------------------------- |
| `repurchase_frequency`     | FLOAT (days)   | Estimated cadence D actually used: the user's own cadence, or the site-wide average as a fallback |
| `days_since_last_purchase` | INT (days)     | Days elapsed since the user last bought this product                                              |
| `urgency_score`            | FLOAT `[0, 1]` | Peaks at `1.0` at the forecasted repurchase date, tapering to `0` at the window edges             |

By default the preset sorts on `urgency_score DESC` and returns 12 products. You can sort or filter on any column, including the three computed ones.

### Errors and edge cases

#### Validation errors (HTTP 422)

The value of `purchase_history` is validated at the API boundary. A malformed value returns `422` with an explicit message.

| Cause                             | Message                                                                          |
| --------------------------------- | -------------------------------------------------------------------------------- |
| Value is not an object            | `Variable purchase_history must be an ITEMS_HISTORY`                             |
| A key is not a string             | `Variable purchase_history keys must be strings`                                 |
| A product's value is not a list   | `Variable purchase_history[<id>] must be a list`                                 |
| A timestamp is not a string       | `Variable purchase_history[<id>] must contain ISO 8601 strings`                  |
| A timestamp is not valid ISO 8601 | `Variable purchase_history[<id>] contains invalid ISO 8601 timestamp: '<value>'` |

#### Empty or reduced results (no error)

These situations raise no error; they just yield fewer or zero rows, which lets you compose a fallback with `union_all`.

| Situation                                  | Behavior                                                            |
| ------------------------------------------ | ------------------------------------------------------------------- |
| `purchase_history` missing or empty        | Source returns 0 rows. Combine with a `union_all` fallback.         |
| Product bought once, no site-wide average  | Product excluded (cadence not estimable).                           |
| Product in history but absent from catalog | Product excluded (filtered out naturally).                          |
| Product outside the repurchase window      | Product excluded (`urgency_score` = 0).                             |
| No eligible product                        | Empty result set; plan a rule-level fallback.                       |
| Unparseable timestamps for a product       | That product is skipped (warning logged); the others are processed. |

{% hint style="info" %}
Because a missing variable or an empty result returns nothing rather than erroring, wrap the repurchase source in a `union_all` with a fallback strategy so users always get recommendations.
{% endhint %}

#### Structural limitations

* **No `GROUP BY`.** The three computed columns are materialized at request time; an aggregation step drops them. The builtin is not meant to sit behind an aggregation.
* **Not batch-precomputable.** The strategy depends on the per-request, per-user `purchase_history`. A precompute attempt fails explicitly with `VIRTUAL_SOURCE_NOT_PRECACHEABLE` rather than producing a wrong result. Repurchase is a real-time strategy.


# How the repurchase algorithm decides

This article explains **why** the algorithm recommends the products it does. For the practical side (the variable, builtin, preset, input/output contract, and errors), see Integrate & call the repurchase algorithm.

### The core intuition

For each product in a user's purchase history, the algorithm:

1. Estimates **D**, the product's repurchase cadence in days.
2. Computes `days_since_last_purchase`, how long since the user last bought it.
3. Defines a **repurchase window** around D.
4. If the user is inside the window, the product is eligible and gets an urgency score; otherwise it's discarded.

Eligible products are returned sorted by descending urgency. The idea: don't recommend a product right after it was bought (too early), nor indefinitely long after (the need is probably already covered), but around the moment the observed cadence says the user is due to buy again.

### Estimating the cadence D

How D is estimated depends on the user's history **for that specific product**.

#### Two or more purchases: use the user's own cadence

Sort the purchase dates, take the intervals between consecutive purchases, and set D to their mean.

> **Example.** Purchases on Jan 1, Mar 1, May 1 → intervals of 59 and 61 days → **D = 60 days.**

The user's own cadence is used as-is, with no smoothing and no blending with the site-wide average.

#### A single purchase: fall back to the site-wide average

One purchase can't measure an interval, so the algorithm falls back to the product's site-wide average cadence (`avg_repurchase_interval_days`).

* If a site-wide average exists → it becomes D.
* If none exists (nobody has ever repurchased the product) → the product is **excluded**. There is no second fallback.

{% hint style="info" %}
The `repurchase_frequency` column always reflects the value **actually used**: the user's own cadence, or the site-wide average when it's the fallback.
{% endhint %}

### The site-wide average

The site-wide average is the safety net for users who bought a product only once. For each product:

1. Consider purchases over the **trailing 12 months**.
2. Keep only users who bought that product **at least twice** on distinct dates. A one-time buyer says nothing about cadence.
3. For each such user, compute their average cadence (mean of the intervals between their successive purchases).
4. The product's site cadence is the **mean of those per-user cadences**, where every multi-buyer weighs equally regardless of how many times they bought.

Two product-level indicators come out of this:

| Indicator                      | Meaning                                                                                                                    |
| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| `avg_repurchase_interval_days` | Average repurchase cadence across all multi-buyers. Null if no multi-buyer exists → the product can't serve as a fallback. |
| `multi_buyer_count`            | Number of users who bought the product ≥ 2 times (a confidence indicator).                                                 |

These refresh with the catalog; a daily cadence is enough, since the 12-month aggregate barely moves day to day.

### The repurchase window

Around the estimated cadence D, an eligibility window is defined as:

```
[ D − ratio × D ,  D + ratio × D ]
```

With the default `ratio` of **1/3**, the window is `[2/3·D, 4/3·D]`.

{% hint style="warning" %}
The original brief said "±30%", but the implemented default is one third (1/3 ≈ 33.3%). **1/3 is the authoritative value.**
{% endhint %}

A product is eligible only when the user sits inside the window:

```
days_since_last = today − date of last purchase
eligible  ⇔  D × (1 − ratio)  ≤  days_since_last  ≤  D × (1 + ratio)
```

Before the window (too early) → excluded. After it (overdue) → excluded. The `ratio` is configured once per site (`repurchase_window_ratio` in Redis) and is shared by every repurchase rule on that site, so it's **not** a per-rule parameter. Per-rule tuning happens through `where` / `sort` on `days_since_last_purchase` and `urgency_score`.

> **Example.** D = 30 days → window `[20, 40]` days after the last purchase.

### The urgency score

The urgency score is a symmetric triangular peak centered on D: `1.0` exactly at the forecasted date, falling linearly to `0` at the window edges.

```
score
1.0 |          *
    |         / \
    |        /   \
    |       /     \
0.0 |______/       \______
       low      D     high
   (D·(1−ratio))   (D·(1+ratio))
```

The compact form:

```
urgency_score = max( 0 ,  1 − |days_since_last − D| / (D × ratio) )
```

With D = 30 and ratio = 1/3 (window `[20, 40]`):

| Days since last purchase | Urgency score |
| ------------------------ | ------------- |
| 20                       | 0.0           |
| 25                       | 0.5           |
| 30                       | 1.0           |
| 35                       | 0.5           |
| 40                       | 0.0           |

Sorting `urgency_score DESC` therefore surfaces the products for which the user is closest to their repurchase date.

### End-to-end example

Request excerpt:

```json
{
  "variables": {
    "purchase_history": {
      "COFFEE-1KG": ["2026-01-05T08:00:00", "2026-02-04T08:00:00", "2026-03-06T08:00:00"],
      "FILTERS-100": ["2026-02-20T08:00:00"]
    }
  }
}
```

Walkthrough as of **2026-04-02**, default ratio 1/3:

* **COFFEE-1KG**: 3 purchases → intervals of 30 and 31 days → **D ≈ 30.5**. Last purchase 03/06 → `days_since_last ≈ 27`. Window ≈ `[20.3, 40.7]`. 27 is inside → eligible, `urgency_score ≈ 0.65`.
* **FILTERS-100**: 1 purchase → fall back to the site-wide average. If `avg_repurchase_interval_days ≈ 45` → **D = 45**. Last purchase 02/20 → `days_since_last ≈ 41`. Window ≈ `[30, 60]`. 41 is inside → eligible. Had there been no site-wide average, it would be excluded.

The response returns the eligible products with their catalog columns plus `repurchase_frequency`, `days_since_last_purchase`, and `urgency_score`, sorted by `urgency_score DESC` and limited to 12.

{% hint style="info" %}
Reminder: the API doesn't fetch history on its own. The caller supplies `purchase_history` on every request. See Integrate & call the repurchase algorithm for how to wire that up.
{% endhint %}

### Defaults at a glance

| Parameter                  | Default                                 | Configured where                                   |
| -------------------------- | --------------------------------------- | -------------------------------------------------- |
| Input variable             | `purchase_history` (`ITEMS_HISTORY`)    | Declared automatically on analytics unlock         |
| Cap on products in history | 50 (most recent kept)                   | Not configurable                                   |
| Window width `ratio`       | 1/3 (≈ ±33%) → `[2/3·D, 4/3·D]`         | Per site (`repurchase_window_ratio`), not per rule |
| Site-wide average lookback | Trailing 12 months                      | Not configurable                                   |
| Multi-buyer filter         | Users with ≥ 2 purchases of the product | Not configurable                                   |
| Default sort               | `urgency_score DESC`                    | Editable in the rule                               |
| Default volume             | 12                                      | Editable in the rule                               |


# Analyse your recommendation strategy performance

In this tutorial, you will read through the Recommendations Report from top to bottom and draw your first conclusions about how your recommendation strategies are performing.

## Overview

By the end, you will be able to:

* Identify how much revenue your strategies are directly contributing
* Understand how visitors are moving through your recommendation funnel
* Spot which products, categories and strategies are driving the most impact
* Adjust the report to focus on the data that matters most to you

{% hint style="info" %}
The report is populated from real visitor and transaction data. If your strategies were recently activated, give them a few days of data before working through this tutorial.
{% endhint %}

## Analyse your recommendation strategy performance

{% stepper %}
{% step %}

#### Open the report and set the date range

Navigate to **Reporting** from the main navigation.&#x20;

<figure><img src="/files/uzFuUI6BxfG2msUPy88k" alt=""><figcaption></figcaption></figure>

At the top of the page, check the **Last refresh** timestamp to confirm how recent the data is.

Next, look at the date range picker in the top-right corner. It defaults to a 30-day window. For your first read-through, keep the default so you have enough data to see trends clearly.

<figure><img src="/files/5NMW4C4LrRvj6yT3UVqf" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Checking the Direct revenue contribution

The performance overview section sits near the top of the report. The **Direct contribution estimate** banner shows an estimate of how much revenue your recommendation strategies helped generate.

<figure><img src="/files/B5lN4XMOQouRFUrHiMpZ" alt=""><figcaption></figcaption></figure>

Look at the four figures in the banner:

1. **Revenue helped:** the estimated euro value of sales influenced by a recommendation interaction, within your configured attribution window.
2. **% of total revenue:** the portion of your overall revenue generated from those influenced sales.
3. **Transactions helped:** the number of orders that involved a recommendation interaction.
4. **% of total transactions:** the proportion of all orders that included a recommendation interaction.

{% hint style="info" %}
Each figure shows a trend indicator next to it. An upward arrow means performance improved compared to the previous period; a downward arrow means it declined.
{% endhint %}

**Part of the catalog** displayed to the right of the banner indicates the percentage of products from your catalog that appear in at least one recommendation.

<figure><img src="/files/nZNHljEdd6RWjKcD0JAP" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Analyzing visitor engagement with recommendations

Scroll down to the **behavioral analysis** section. Two charts are displayed side by side.

<figure><img src="/files/yf0do7A3kLjMgK39lqjj" alt=""><figcaption></figcaption></figure>

1. **Visitor exposition rate:** shows the percentage of all site visitors who were shown at least one recommendation. The average value appears above the chart, while daily bars and a trend line display how this metric evolves over time.
2. **Exposed visitors click-rate:** shows the percentage of those visitors who clicked on a recommended product after seeing a recommendation.

Interpreting these charts:

* A **high exposition rate** combined with a low click-rate indicates that recommendations are frequently displayed, but the products shown are not compelling enough to generate clicks.
* A **low exposition rate** indicates that your strategies are not reaching enough visitors. Verify that your strategies are deployed on the appropriate pages across both client-side and server-side campaigns.
  {% endstep %}

{% step %}

#### Follow the conversion funnel

<figure><img src="/files/rFSBWzk1qMmkz7SMHBHP" alt=""><figcaption></figcaption></figure>

To the right of the charts, find the **Conversion funnel**. It shows three stages:

1. **Product click**: visitors who clicked a recommended product.
2. **Add to cart**: how many visitors (who clicked on a recommended product), added the product to their cart (shown as a percentage of clicks).
3. **Transaction:** of those who clicked, how many visitors completed a purchase.

Below the funnel, the transaction rate shows the overall purchase rate for visitors exposed to recommendations.

{% hint style="info" %}
A large drop between ***Add to cart*** and ***Transaction*** may indicate friction in your checkout flow. \
\
A large drop between ***Product click*** and ***Add to cart*** may suggest the recommended products are interesting to browse but not compelling enough to purchase
{% endhint %}
{% endstep %}

{% step %}

#### Compare visitor segments in the key indicators table

<figure><img src="/files/rtWZR0DOm9lWARmBjt8Q" alt=""><figcaption></figcaption></figure>

The key indicators table compares three visitor segments:

1. **All visitors**: everyone on your site
2. **Exposed visitors**: those who loaded a page with an active strategy
3. **Engaged visitors**: those who clicked a recommended product

Look at the **Transaction rate**, **Revenue per visitor**, and **Average order value** bar charts below the table.

Engaged visitors should show noticeably higher numbers across all three metrics. This will help demonstrate the value of moving visitors from passive exposure to active engagement.&#x20;

{% hint style="info" %}
If engaged visitors show a much higher revenue per visitor than all visitors, your recommendations are working well once visitors interact with them. If the gap is small, it may suggest that engaged visitors were already high-intent buyers regardless of recommendations.
{% endhint %}
{% endstep %}

{% step %}

#### [Reviewing merchandising insights](#user-content-fn-1)[^1]

In the **Merchandising Insights** section, you will see five tabs for: **Top 25 products**, Pinned products, **Top 25 categories**, **Top 25 brands** and **Top 25 Strategies**.

<figure><img src="/files/DohsxyGsZHUhPG2zGXue" alt=""><figcaption></figcaption></figure>

1. Start with **Top Products**. The table shows each product's displays, click-through rate, add-to-cart rate and revenue contribution.
2. Then click **Top Strategies** to see which individual strategies are driving the most revenue across all your campaign types: Web, Personalization, and Feature Experimentation in a single ranked view.

{% hint style="info" %}
If a product has a high display count but a low click-through rate, it may be overexposed or placed in an irrelevant context.

Click **Export data** to download any table for further analysis.
{% endhint %}
{% endstep %}

{% step %}

#### Filter the report to a specific strategy or device

<figure><img src="/files/T2dOOpluFiOaVCs8QlNu" alt=""><figcaption></figcaption></figure>

Narrow the report to investigate a specific area.

Click **Filter** in the report header. A panel will open with four options:

* **Locations**: filter by where on your site the strategy is placed.
* **Strategies**: select one or more strategies to isolate their performance
* **Product categories**: focus on a specific product category
* **Devices**: compare performance on desktop vs. mobile

{% hint style="info" %}
Try filtering by a single strategy that caught your attention in Step 6. The entire report, all charts and tables, will update to reflect only that strategy's data.

To return to the full view, click **Reset filters** at the top of the filter panel.
{% endhint %}
{% endstep %}

{% step %}

#### Adjust your attributions settings (optional)

If the Direct contribution estimate in Step 2 seemed unexpectedly low or high, review your attribution settings.

Click **Accuracy settings.**

* **Attribution method:** controls how long after a recommendation interaction a transaction is still counted as influenced. The default is 24 hours. If your products have a longer purchase cycle, switching to 7 or 30 days will give a more complete picture.
* **Cookie consent rate:** controls how the platform extrapolates data from consented visitors across your full visitor base. If you know your site's actual cookie consent rate, enter it here for a more accurate estimate.
* After making changes, click **Save changes**.
  {% endstep %}
  {% endstepper %}

[^1]: review top products and strategies


# How to configure your email integration


# How to configure Brevo integration

Integrating Brevo with AB Tasty Recommendation and Merchandising

{% stepper %}
{% step %}

### Connect Brevo

1. In your Brevo account, generate an API Ke&#x79;**: SMTP & API > API Keys**, and copy it

<figure><img src="/files/JAf8frw9c7A3lD9ektLH" alt=""><figcaption></figcaption></figure>

1. In your AB Tasty account, go to **Settings > Integrations > Brevo**.

   <div data-full-width="true"><figure><img src="/files/XNjzw7n9SzyFZFZdVzPJ" alt=""><figcaption></figcaption></figure></div>
2. Paste the API key from Brevo into the API key field and click **Connect Brevo**.

   <figure><img src="/files/lbvTxgb2AeBeK6Ztb2Gb" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}

### Allow AB Tasty IPs on Brevo

To allow AB Tasty to retrieve your Brevo contact attributes, make sure the following IP addresses are in your Acceptlist in your Brevo account or firewall settings:&#x20;

* `130.211.64.215`
* `34.79.119.76`
* `35.240.71.177`

If these IPs are not authorized, the list of contact attributes may appear empty even though the integration is set up correctly.
{% endstep %}

{% step %}

### Deploy a recommendation in your email

Now you can [deploy a recommendation in Brevo](/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/how-to-use-recommendations-in-emails-campaign/how-to-deploy-recommendation-with-brevo). <br>
{% endstep %}
{% endstepper %}

{% hint style="info" %}
For more personalization, you can create repeated variables so your emails feel like real one-to-one conversations. 🔗 [Learn more about Dynamic Content in Brevo](https://editor-beta.brevo.com/editor/newsletters/46#:~:text=Faites%20une%20liste,le%20contenu%20dynamique)
{% endhint %}


# How to configure SFMC integration

This how-to explains how to insert a block of **dynamic product recommendations** into an SFMC (Salesforce Marketing Cloud) email by calling the Reco & Merch API from AB Tasty. This enables showing personalized products in real time, at the moment the email is opened.

{% hint style="info" %}
The SFMC integration is done via **API**. There is currently no dedicated cartridge available.
{% endhint %}

### Prerequisites

* Access to **Content Builder** in SFMC.
* A **Reco & Merch template** already configured on AB Tasty.
* A valid **Bearer Token** provided by AB Tasty.
* Required variables available in your **Data Extension** (e.g. `EmailAddr`, `CodeEAN`).

{% stepper %}
{% step %}

### Connect SFMC to Reco & Merch

1. Go to **Settings > Integrations** in your AB Tasty Reco & Merch interface.
2. Click **Connect SFMC**.
3. A pop-up window will open to authenticate your SFMC account.
4. Once the connection is successful, your workspace will be linked to SFMC.

<figure><img src="/files/QJlAtmgScegkJZhy6FES" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/WkZFuSKkXJgDgvBsQljx" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Deploy a recommendation in your email

Now you can deploy a recommendation in SFMC.&#x20;

{% embed url="<https://docs.abtasty.com/~/revisions/GC5NNyAZNIhN8XxZ5KK5/recommendations-and-merchandising-1/how-tos/deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/how-to-use-recommendations-in-emails-campaign/how-to-deploy-recommendation-with-sfmc>" %}
{% endstep %}
{% endstepper %}

### Notes on SFMC&#x20;

Below are some notes on SFMC

**Performance**

* Every email open triggers a live API call.
* High-volume sends (500k+ subscribers) = high API traffic.
* Ensure AB Tasty API quota is sufficient.

**Fallback**

* If the API fails, the block may be empty.
* Always define a static fallback (e.g. “Top Sellers” block).

**Security**

* The **Bearer Token** is sensitive.
* Rotate it regularly and avoid exposing it in shared snippets.
* For extra safety, use a proxy to hide the token.

**Data Extension alignment**

* Verify all fields (`CodeEAN`, `EmailAddr`) exist for every subscriber.
* If missing, the API call URL will be invalid → “400 Bad Request” errors.

**Rendering**

* Always test in **Preview & Test** with real subscriber profiles.
* Validate rendering across multiple email clients (Gmail, Outlook, Mobile).


# How to A/B test a recommendation strategy - For API clients

This guide is dedicated to people who are implementing Recommendations manually via API and who want to be able to run remotely some A/B tests or personalizations.

#### Requirements

* Recommendations & Merchandising access
* Feature Experimentation & Rollout access

#### Differences with basic R\&M API integration:

* Increased latency versus basic R\&M integration (+30 to 100ms)

#### Overviews

* [Usage overview](https://drive.google.com/file/d/1EaqRtzf6VXWiNoV8lJZCGHxf3SPeOpT3/view?usp=sharing)
* [1st time technical implementation overview](https://drive.google.com/file/d/1ij8c1MXmrMc6n2qXocxaKaBZV94HHLn1/view?usp=sharing)

## Initial configuration

{% stepper %}
{% step %}

### Create a recommendation strategy

Create the strategy of your choice and save it.
{% endstep %}

{% step %}

### Create a FE\&R flag

1. Go to Feature Experimentation > Flags
2. Click on **Create flag**
   1. Name: `Reco_{block_name}`
   2. Type: String
3. Click on **Save**
   {% endstep %}

{% step %}

### Implement your strategy via API (Need a developer)

1. Select [the FE\&R SDK](https://app2.abtasty.com/settings/feature-experimentation/sdk-installation) that best fits you and configure it
2. Fetch FE\&R flags and retrieve the flag `Reco_{block_name}`  which should contains the strategy id that you want to push on your specific recommendation block. <mark style="background-color:blue;">Make sure that visitor id is of type a string</mark>
3. Call the Recommendations API by passing the value of the flag  `Reco_{block_name}`   as the strategy id. <mark style="background-color:blue;">Don't forget to manually provide a fallback hardcoded strategy ID</mark>

```
https://uc-info.eu.abtasty.com/v1/reco/${SITE_ID}/recos/${strategy_id}?variables=${query}&fields=${fields}
```

4. Use the results of the Recommendations API to display your recommendation block
5. Your code is ready to display your current strategy or future A/B tests
   {% endstep %}

{% step %}

### Add FE\&R tracking (Need a developer)

Implement the following trackers:

* `click_on_product`: via an Event tracker ([documentation](https://docs.abtasty.com/server-side/concepts/universal-collect-1#:~:text=%7D%27-,Event,-This%20hit%20type))
* `add_product_to_card`: via an Event tracker ([documentation](https://docs.abtasty.com/server-side/concepts/universal-collect-1#:~:text=%7D%27-,Event,-This%20hit%20type))
* `purchase` : via a Transaction hit tracker ([documentation](https://docs.abtasty.com/server-side/concepts/universal-collect-1#:~:text=%7D%27-,Transaction,-A%20transaction%20hit))

Tracking documentation: [Tracking data with SDKs](https://docs.abtasty.com/server-side/sdks/key-features/tracking-data) or [Tracking with custom API calls](https://docs.abtasty.com/server-side/concepts/universal-collect-1)
{% endstep %}

{% step %}

### Create a FE\&R "Feature toggle" campaign

{% hint style="info" %}
This step is optional. If you don't do it, your default strategy will be the hardcoded strategy. It means that you will have to manually edit your code to deploy the winner of an A/B test.
{% endhint %}

1. Go to Feature Experimentation > Campaigns
2. Click on "Create campaign" > "Feature toggle"
   1. Name: `{block_name} deployment`
   2. Type: Feature toggle
   3. Folder: Pick the folder of your choice
3. Define your scenario
   1. `Reco_{block_name}` = Your recommendation strategy ID
4. Define your goals, we recommend adding the 3 trackers&#x20;
5. Keep default parameters for targeting & delivery strategy
6. Take your campaign live
   {% endstep %}
   {% endstepper %}

## Running an A/B test

{% stepper %}
{% step %}

### Create a variant recommendation strategy

Create the strategy of your choice. You can duplicate your original strategy if you want not to start from scratch.
{% endstep %}

{% step %}

### Create a FE\&R "A/B test" campaign

* Main information:
  * Name: `{block_name} A/B test`
  * Folder: folder of your choice for the campaign
* Variations:
  * Original: Set flag `Reco_{block_name}` to original strategy id
  * Variation: Set flag `Reco_{block_name}` to your variant strategy id
* Goals: Pick the goals you want to track
* Targeting: All users
* Traffic allocation: 50/50
  {% endstep %}

{% step %}

### Turn "A/B test" campaign live & pause "feature toggle" one

* Set campaign `{block_name} A/B test` to "Live" status
* Set campaign `{block_name} deployment` to "Pause" status
  {% endstep %}

{% step %}

### Track your results

Open the report for your campaign `{block_name} deployment` and check your results.
{% endstep %}

{% step %}

### Once your decision is taken, turn "feature toggle" campaign live and stop "A/B test" one

* Set campaign `{block_name} deployment` to "Live" status
* Set campaign `{block_name} A/B test` to "Pause" status
  {% endstep %}

{% step %}

### Update your "Feature toggle" campaign with the ID of your winning strategy

If you want to deploy your winning strategy, edit your deployment campaign `{block_name} deployment` by editing its scenario and setting `Reco_{block_name}` to your new winning strategy ID.
{% endstep %}
{% endstepper %}


# How to A/B test  recommendation strategies using AB Tasty Web Extensions

This guide explains how to test two different recommendation algorithms or strategies on the same placement using AB Tasty for traffic splitting and experiment assignment cookie management.

### Overview

The implementation relies on a clear separation of responsibilities.

#### AB Tasty side:

* Creates the A/B test
* Generates 2 variations: A and B
* Randomly assigns visitors
* Sets an experiment assignment cookie

#### Client or Agency side:

* Reads the cookie set by AB Tasty
* Interprets the assigned variation (A or B)
* Triggers the corresponding call to the Merchandising & Recommendation API

### AB Tasty Implementation

{% stepper %}
{% step %}

#### Create the test

Create an A/B test on the desired scope (product page, homepage, listing page, etc.) with two variations:

* **Variation A**
* **Variation B**

{% hint style="warning" %}
The test does not directly modify the recommendation block. It is only used to split traffic and set an assignment cookie.
{% endhint %}
{% endstep %}

{% step %}

### Set the assignment cookie

For each variation, AB Tasty sets a specific cookie identifying the assigned group.

Example:

* Group A → `ab_test_reco_1 = A`&#x20;
* Group B → `ab_test_reco_1 = B`

The exact cookie name can be adapted to your technical conventions.

This cookie is:

* Stored browser-side
* Accessible through JavaScript
* And allows the website to determine which variation the visitor belongs to
  {% endstep %}
  {% endstepper %}

### Client or agency implementation

{% stepper %}
{% step %}

#### Read the cookie

The website must read the `ab_test_reco_1` cookie.

Example:

```
const variation = getCookie("ab_test_reco_1");
```

{% endstep %}

{% step %}

### Conditional Recommendation & Merchandising API call

Depending on the cookie value:

* If `variation=A` → call Recommendation Strategy A
* If `variation=B` → call Recommendation Strategy B
  {% endstep %}
  {% endstepper %}

### Technical considerations - execution timing

The experiment assignment cookie must be read:

* After the AB Tasty script has been executed
* Before triggering the Merch & Recos API

### Notes

| AB Tasty Side      | Client Side          |
| ------------------ | -------------------- |
| Test creation      | Cookie reading       |
| Traffic allocation | A/B interpretation   |
| Cookie assignment  | Conditional API call |

* AB Tasty manages the experimentation layer
* The website controls which recommendation strategy is called


# How to track performance

## Tracking Setup with Recos Tag

The **AB Tasty Tag** lets you both **display recommendations** and **track interactions automatically** — without writing custom tracking code.\
By enriching your HTML with data attributes, events such as *impressions* and *clicks* are automatically detected, enriched, and pushed into the **dataLayer** for use with **Google Tag Manager (GTM)** and **Google Analytics 4 (GA4)**.

#### Prerequisite :

* **Have AB Tasty tag**. \
  To verify that you have successfully installed it on your website, open your console and type&#x20;

  ```
  recos
  ```

  You should see a global context object if the tag is correctly installed. Else contact your CSM.recos

{% stepper %}
{% step %}

### Enriching Your HTML for Tracking

Once the AB Tasty Tag is installed, enrich your recommendation banners using **data attributes**.\
These attributes allow the tag to detect user interactions and automatically send tracking events to your analytics tool.

### **Enrich your recommendation banner HTML**

Add the following **data attributes** to your HTML elements to make the AB Tasty Tag detects them automatically:

<table><thead><tr><th width="212.8203125">Attribute</th><th>Purpose</th><th width="306.921875">Example</th><th>Required</th></tr></thead><tbody><tr><td><code>data-reco-id="[RECO_ID]"</code></td><td>Identifies the recommendation container</td><td><code>&#x3C;div data-reco-id="abc123"></code></td><td>✅</td></tr><tr><td><code>data-reco-name="[RECO_NAME]"</code></td><td>Name of the recommendation </td><td><code>&#x3C;div data-reco-name='Add to cart">✅</code></td><td>❌</td></tr><tr><td><code>data-reco-click="[ACTION_ID]"</code></td><td>Tracks user interactions (clicks)</td><td><code>&#x3C;a data-reco-click="click_product"></code></td><td>✅</td></tr><tr><td><code>data-item-id="[ITEM_ID]"</code></td><td>Identifies a specific product in the recommendation</td><td><code>&#x3C;div data-item-id="SKU_123"></code></td><td>✅</td></tr></tbody></table>

{% hint style="info" %}
The `RECO_ID` corresponds to the ID found in the list of your Recommendations in Recommendations & Merchandising platform.
{% endhint %}

#### Automatic Event Detection

Once implemented, AB Tasty Tag automatically pushes events to the dataLayer or analytic tools:

* When an element with `data-reco-id` appears in the DOM → **“show”** event
* When an element with `data-reco-click` is clicked → **“click”** event

{% hint style="danger" %}
If your banner is filled asynchronously, add the `data-reco-id` **only after** the content is fully loaded.
{% endhint %}

{% embed url="<https://app.gitbook.com/o/iFKI1JaxSfPoiGt4tT2k/s/6Yw9IRJ6KbbucQPwZUCZ/~/changes/352/recommendations-and-merchandising-1/how-tos/deploy-a-strategy/how-to-deploy-a-recommendation-strategy-on-web/mix-front-end-integration-using-the-tag-and-custom-javascript/recos-analytics-event-format>" %}

### Practical example

```html
<div
  data-reco-debug="true"
  data-reco-id="082ecd63-84ec-4f48-90ce-12271d456020"
>
  <div data-item-id="X23" data-reco-click="go_to_page">
    <button data-reco-click="add_to_cart_item"></button>
  </div>
  <div data-item-id="Y47" data-reco-click="go_to_page">
    <button data-reco-click="add_to_cart_item"></button>
  </div>
</div>
```

**When the banner appears**, the following event is pushed to the dataLayer:

```js
window.dataLayer.push([
  "event",
  "ab_recos_[uuidXX]",
  {
    action_id: "show",
    reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
    item_ids: "[\"X23\",\"Y47\"]",
    debug_mode: true
  }
]);
```

**When a product is clicked:**

```js
window.dataLayer.push([
  "event",
  "ab_recos_[uuidYY]",
  {
    action_id: "go_to_page",
    reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
    item_id: "X23",
    item_ids: "[\"X23\",\"Y47\"]",
    debug_mode: true
  }
]);
```

**When “add to cart” is clicked:**

```js
window.dataLayer.push([
  "event",
  "ab_recos_[uuidZZ]",
  {
    action_id: "add_to_cart_item",
    reco_id: "082ecd63-84ec-4f48-90ce-12271d456020",
    item_id: "X23",
    item_ids: "[\"X23\",\"Y47\"]",
    debug_mode: true
  }
]);
```

{% endstep %}

{% step %}

### Configuring your analytic tools

### For Google Tag Manager (GTM)

Your goal is to configure GTM to send analytics events (GA4) based on AB Tasty Tag events pushed to the dataLayer.

#### Step 1: Create a Trigger

1. Go to **Triggers → New**
2. Create a new trigger:
   * **Name:** `Recos - trigger`
   * **Trigger type:** Custom Event
   * **Event name:** `ab_recos`
   * Check **Use regex matching**
   * Choose **All Custom Events**
3. Save.

#### Step 2: Create the Data Layer Variables

Go to **Variables → User-defined variables → New**, and create the following variables:

| Variable Name | Data Layer Variable | Type                |
| ------------- | ------------------- | ------------------- |
| `action_id`   | `recos.action_id`   | Data Layer Variable |
| `reco_id`     | `recos.reco_id`     | Data Layer Variable |
| `reco_name`   | `recos.reco_name`   | Data Layer Variable |
| `item_id`     | `recos.item_id`     | Data Layer Variable |
| `item_ids`    | `recos.item_ids`    | Data Layer Variable |
| `debug_mode`  | `recos.debug_mode`  | Data Layer Variable |

#### Step 3: Create the GA4 Event Tag

1. Go to **Tags → New**
2. Configure:
   * **Tag name:** `Recos - Event GA4 - recos`
   * **Tag type:** GA4 Event
   * **Measurement ID:** (found in the client’s GA4 → Admin → Data Stream)
   * **Event name:** `ABTastyRecos`
3. Add all six event parameters using the variables created above:

| Event Parameter | Value            |
| --------------- | ---------------- |
| `action_id`     | `{{action_id}}`  |
| `reco_id`       | `{{reco_id}}`    |
| `reco_name`     | `{{reco_name}}`  |
| `item_id`       | `{{item_id}}`    |
| `item_ids`      | `{{item_ids}}`   |
| `debug_mode`    | `{{debug_mode}}` |

4. Select the **Recos - trigger** created earlier.
5. Save your workspace.

You should now have **8 workspace changes**:\
→ 6 variables + 1 trigger + 1 tag.

#### Step 4: Test the Setup

**Connect Tag Assistant**

1. Go to **Tag Assistant** in GTM.
2. Enter the URL of your site.
3. Click **Continue** to launch the preview mode.

**Validate in GA4**

Go to **GA4 → Admin → DebugView** and confirm that the following appear:

* Event: `ab_recos`
* Parameters: `action_id`, `reco_id`, `item_ids`, etc.

**Example**

When a recommendation appears:

* Event: `ab_recos`
* `action_id`: `show`
* `item_ids`: all displayed products
* `reco_id`: ID of the recommendation

When a product card is clicked:

* Event: `ab_recos`
* `action_id`: `go_to_page`
  {% endstep %}

{% step %}

### Retrieving Products from a RECO\_ID

You can also retrieve recommendation data programmatically through the Recos Tag.

#### Example

```javascript
recos.reco(RECO_ID).then(console.log);
```

This returns a JSON list of products:

```json
[
  {
    "id": "id1",
    "title": "title 1",
    "price": 20,
    "strike_price": 40,
    "discount_rate": 50,
    "img_link": "https://image.png",
    "link": "https://link1"
  },
  {
    "id": "id2",
    "title": "title 2",
    "price": 30,
    "strike_price": null,
    "discount_rate": 0,
    "img_link": "https://image.png",
    "link": "https://link2"
  }
]
```

You can also retrieve any variable’s value directly:

```javascript
recos.variable(VARIABLE_NAME).then(console.log);
```

***

**Your tracking setup is now complete.**\
Your recommendation impressions, clicks, and conversions will now flow automatically into your analytics tool through GTM.

#### How to follow performance ?

Once your AB Tasty Tag and analytics integration are live, you can monitor performance directly in the **Reports** section of your AB Tasty dashboard.

**1. Access your performance reports**

* Go to your AB Tasty **Recommendations & Merchandising** dashboard.
* Click **Reports** in the left sidebar.
* Select the **Experience** you want to analyze.

**2. Key metrics available**

| Metric                    | Description                                                                    |
| ------------------------- | ------------------------------------------------------------------------------ |
| **User rate**             | % of visitors interacting with recommendations. Measures visibility and reach. |
| **Weight in revenue**     | % of total revenue driven by users exposed to recommendations.                 |
| **Revenue / user impact** | Average uplift in spend for users who engage with recommendations.             |

**3. Performance over time**

Use the **Evolution** graph to track how impressions, clicks, and revenue evolve.\
You can filter by **date range**, **device**, or **experience** to isolate trends.

**4. Optimization tips**

* Compare multiple experiences to identify high-performing ones.
* Monitor underperforming campaigns to find relevance or display issues.
* Establish a regular review schedule (weekly or monthly).

→ Learn more in [**Analyzing Performance Reports**](/recommendations-and-merchandising/getting-started/recommendations/reporting-recommendation)
{% endstep %}
{% endstepper %}


# Merchandising


# Create a merchandising strategy

A **Merchandising** strategy controls product ordering *within categories and collections* to enforce business priorities, best sellers first, promotions surfaced, slow movers pushed down, without manual back-office sorting. Commerce computes a score per product per strategy and syncs those scores to your CMS or search engine, which reorders the catalog accordingly.

{% hint style="info" %}
**What changed:** Merchandising comes from the former **Recommendations & Merchandising** product. The builder now shares the same shell as Recommendations (**New Rule**, **Pins**, **Global customization**, **Save / Save and deploy**) and adds **Pins for category** for per-category pinning. Under the hood each strategy still carries a `MERCH_ID` used for deployment to the CMS or search engine.
{% endhint %}

### How merchandising works <a href="#how-merchandising-works" id="how-merchandising-works"></a>

Merchandising does not reorder products live on every request. Instead:

1. **Score generation**: Commerce computes a merchandising score per product, per strategy, from the strategy's rules (best sellers, new arrivals, margin, and so on).
2. **API sync**: those scores are transmitted to your CMS or search engine.
3. **Catalog update**: the CMS reorders products using the scores.
4. **Front-end display**: the reordered list is shown to visitors.

{% hint style="warning" %}
**Filters only hide products, they don't change AB Tasty's ranking.** A filter on your website removes products from view, but the underlying score-based ordering is unchanged. If products reorder unexpectedly, check your filter logic first. Because scores are computed and synced (not recalculated on every request), rankings stay stable between syncs.
{% endhint %}

### Creating a merchandising strategy <a href="#creating-a-merchandising-strategy" id="creating-a-merchandising-strategy"></a>

{% stepper %}
{% step %}

#### **Click Create merchandising +**

<figure><img src="/files/Ye3mTZ48qxRxS6fCaoB3" alt=""><figcaption></figcaption></figure>

The **New merchandising strategy → Pick a strategy to start from…** modal opens with a starting point such as **Basics → Empty strategy**.
{% endstep %}

{% step %}

### Build the strategy

<figure><img src="/files/5ZhcWOIa0rxGtrTYL3sn" alt=""><figcaption></figcaption></figure>

The right-hand **Your strategy results** panel previews the ordered products *for a selected category context*. Until you pick a category, or if your configuration returns nothing for it, the panel shows an empty state such as **"0 results returned for \[Category: None]"** / "Your current configuration doesn't return any products for the context you are trying to preview…".&#x20;

Choose a category to see how that category would be ordered.

{% endstep %}

{% step %}

### Save and Deploy

Merchandising uses the two-step **Save** / **Save and deploy** model shared by all strategies. **Save** stores a draft; **Save and deploy** computes the product scores and syncs them to your CMS or search engine so the catalog reorders.
{% endstep %}
{% endstepper %}

Selecting a starting point opens the builder at `/merchandising/new/builder`.

## The Merchandising builder <a href="#the-merchandising-builder" id="the-merchandising-builder"></a>

The header follows the shared pattern, editable strategy name, a **Draft** badge, **Save**, and **Save and deploy**. The configuration panel contains:

#### Default rule <a href="#default-rule" id="default-rule"></a>

A new merchandising strategy opens with a **Default** rule already in place:

> Products sorted by `revenues_last_30_days`, **Unlimited**

This sorts the category by 30-day revenue with no result cap. Add more rules with **New Rule +** to layer additional sources or refinements on top.

#### Pins for category <a href="#pins-for-category" id="pins-for-category"></a>

**Pins for category** lets you pin products *per category*. Choose a category in the **Select…** category selector, then *"Pin product(s) for a specific category"*, the pinned products are forced to the top of that category only. This is what makes merchandising category-aware: different categories can have different pinned products under the same strategy.

#### Pins <a href="#pins" id="pins"></a>

**Pins → Pin product(s)** pins products across the strategy, independent of category.

{% hint style="info" %}
A **Pin** forces products to the top within this strategy. To promote or demote products *globally across all strategies*, use the dedicated [Boost & Bury](https://file+.vscode-resource.vscode-cdn.net/Users/didier/repos/abtasty/commerce/docs/commerce/03-creating-rules-boost-and-bury/) rules instead.
{% endhint %}

#### Global customization <a href="#global-customization" id="global-customization"></a>

**Global customization → New global customization (filter, exclude, sort…)** adds rules that apply across the strategy, **Filter**, **Exclude**, **Diversification**, **Shuffle**, **Sort by…**, or **Filter if…**. (Remember the warning above: filters hide products, they do not change the score-based ranking.)

## The Merchandising list <a href="#the-merchandising-list" id="the-merchandising-list"></a>

<figure><img src="/files/a3XZuHOt3zDZ4psSShyK" alt=""><figcaption></figcaption></figure>

The toolbar offers **Create merchandising +**, **Group By**, **Filters**, **Display settings**, and a search box. The table columns:

| Column                 | Meaning                                                                                     |
| ---------------------- | ------------------------------------------------------------------------------------------- |
| **Merchandising name** | The strategy's name.                                                                        |
| **Status**             | **Deployed**, or **Deployed (Draft Waiting…)** when a live version has saved edits pending. |
| **Categories**         | The categories the strategy covers (for example "11 categories", "sport").                  |
| **% of revenue**       | Share of revenue attributed to the strategy.                                                |
| **CTR**                | Click-through rate.                                                                         |
| **Conv. Rate**         | Conversion rate.                                                                            |
| **Tag(s)**             | Labels applied to the strategy.                                                             |
| **Creator**            | Who created it.                                                                             |
| **Creation**           | Creation date and time.                                                                     |


# How to integrate Merchandising via API

This guide explains how to fetch product strategies from AB Tasty's merchandising API and display them on your website.

### Overview

The Merchandising feature surfaces curated product lists (strategies) configured in the AB Tasty back-office.

Two endpoints are exposed depending on what you already know about the strategy:

* **By category ID** — when your front-end only knows the current category, hit the category endpoint and the API resolves the bound strategy for you.
* **By strategy UUID** — when the UUID is already known (cached, configured, etc.), call the UUID endpoint directly.

Both endpoints return the same payload shape (items, facets, pagination) and accept the same query parameters.

Base URL: `https://uc-info.eu.abtasty.com/v1/reco/v1`

> **`v1` appears twice, and both are required.** The first belongs to the AB Tasty gateway, the second selects version 1 of the Merchandising API.
>
> A URL built with a single `v1` (`https://uc-info.eu.abtasty.com/v1/reco/{site_id}/...`) reaches a deprecated internal endpoint. It answers `200` too, so the mistake produces no error — only wrong results:
>
> `facets` and `filters[]` behave the same on both.

|                          | Single `v1` (deprecated)           | Double `v1` (this guide)             |
| ------------------------ | ---------------------------------- | ------------------------------------ |
| `merch/category_id/{id}` | returns a strategy UUID            | returns products                     |
| `sort[field]`            | silently ignored, results unsorted | applied, or `400 INVALID_SORT_FIELD` |
| `limit` omitted          | returns the **entire** list        | returns 20 items                     |
| `limit=0`                | `422`                              | no limit                             |

***

### Authentication

All requests require a JWT in the `Authorization` header:

```
Authorization: Bearer <token>
```

***

### Endpoints

#### 1. Fetch items by category ID

```
GET /{site_id}/merch/category_id/{category_id}
```

Resolves the merchandising strategy bound to `category_id` and returns its ranked products in a single call.

Use this endpoint when your front-end knows the category it is rendering but not which strategy is deployed on it. The binding lives in the AB Tasty back-office, so merchandisers can change the strategy on a category without a front-end release.

The `category_id` in the path also scopes the products returned — you do **not** need to repeat it in `variables`.

**Path parameters**

| Parameter     | Type    | Description                   |
| ------------- | ------- | ----------------------------- |
| `site_id`     | integer | Your AB Tasty site identifier |
| `category_id` | string  | The category identifier       |

Query parameters, response payload and error codes are identical to the by-UUID endpoint, with one extra error:

| Status | Error code         | Reason                                                        |
| ------ | ------------------ | ------------------------------------------------------------- |
| 400    | `UNKNOWN_CATEGORY` | No strategy is bound to this `category_id` for this `site_id` |

***

#### 2. Fetch items by strategy UUID

```
GET /{site_id}/merch/{merch_id}
```

Returns the ranked list of products for a given strategy, with optional filtering, faceting and pagination. Use this endpoint when the strategy UUID is already known.

> **This endpoint needs the category in `variables`.** A strategy can be deployed on several categories, so its UUID alone does not say which products to rank. Without `variables={"category_id":"…"}` the response is a valid `200` with an **empty** `items` array. See Scoping a strategy to a category.

**Path parameters**

| Parameter  | Type    | Description                        |
| ---------- | ------- | ---------------------------------- |
| `site_id`  | integer | Your AB Tasty site identifier      |
| `merch_id` | string  | UUID of the merchandising strategy |

**Query parameters**

| Parameter       | Type       | Default  | Description                                                                                                                                                               |
| --------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `variables`     | JSON       | —        | JSON object injected into the strategy template. Required in practice on the UUID endpoint — see Scoping a strategy to a category. Ex: `variables={"category_id":"1439"}` |
| `fields`        | JSON array | —        | JSON array of product fields to return. Ex: `["id","title","price"]`. `id` is always included.                                                                            |
| `page`          | integer    | `null`   | Page number (1-indexed). Ignored when `offset` is also provided.                                                                                                          |
| `offset`        | integer    | `0`      | Zero-based item offset. Takes precedence over `page`.                                                                                                                     |
| `limit`         | integer    | **`20`** | Number of items per page. **Defaults to `20` when omitted.** Use `0` for no limit.                                                                                        |
| `facets`        | boolean    | `false`  | Set to `true` to include facet counts in the response.                                                                                                                    |
| `filters[f][]`  | string     | —        | Filter on field `f`. Repeat for multiple values (OR within a field, AND across fields). See filter syntax below.                                                          |
| `sort[f]`       | string     | —        | Override the strategy's ordering. `f` is the field name, value is `asc` or `desc` (case-insensitive). See sort syntax below.                                              |
| `output_format` | string     | `json`   | Response format. Accepted values: `json`, `csv`, `proximis`.                                                                                                              |
| `delimiter`     | string     | `;`      | CSV delimiter (only used when `output_format=csv`). Accepted values: `,`, `;`, `%09`, \`                                                                                  |

These query parameters apply to **both endpoints** (UUID and category).

**Scoping a strategy to a category**

Merchandising strategies rank the products of **one category**. The category is supplied through the `category_id` variable:

```
?variables={"category_id":"1439"}
```

* **Category endpoint** — supplied automatically from the path. Pass `variables` only to override it.
* **UUID endpoint** — you must supply it yourself. A strategy can be deployed on several categories, so the UUID does not imply one.

When the category is missing, the strategy matches no products and the response is a valid `200` with an empty `items` array and `total_items: 0` — not an error. An empty result on the UUID endpoint is almost always a missing `category_id`.

> The variable is named `category_id` by default, but it is configurable per site. If your strategies were set up with a different name, use that one — your AB Tasty contact can confirm which applies to your site.

**Filter syntax**

Filters use PHP-style bracket notation. Two syntaxes are supported depending on the operation needed.

**Combining rules**

* Multiple values on the **same field** → combined with **OR**
* Filters on **different fields** → combined with **AND**
* Field names must match `^[A-Za-z_][A-Za-z0-9_]*$` (letters, digits and underscores only)

***

**Syntax 1 — Equality / IN (empty index `[]`)**

Use `filters[field][]=value` for equality. Repeat the parameter on the same field to produce an `IN` (OR) filter.

| Operation | Query string                                          | Behaviour                        |
| --------- | ----------------------------------------------------- | -------------------------------- |
| Equals    | `filters[available][]=1`                              | `available = 1`                  |
| IN (OR)   | `filters[category][]=shoes&filters[category][]=boots` | `category IN ('shoes', 'boots')` |

***

**Syntax 2 — Comparison operators (indexed entries)**

Use `filters[field][{idx}][operator]` + `filters[field][{idx}][value]` for `>`, `<`, `>=`, `<=` comparisons. Use incrementing indices (`0`, `1`, …) to stack multiple conditions on the same field.

Allowed operators: `=`, `>`, `<`, `>=`, `<=`

| Operation          | Query string                                                                                                                                                               |
| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Greater than       | `filters[price][0][operator]=>&filters[price][0][value]=10`                                                                                                                |
| Less than or equal | `filters[price][0][operator]=<=&filters[price][0][value]=500`                                                                                                              |
| Range (min + max)  | <p><code>filters\[price]\[0]\[operator]=>=\&filters\[price]\[0]\[value]=10</code><br><code>\&filters\[price]\[1]\[operator]=<=\&filters\[price]\[1]\[value]=500</code></p> |

***

**Combined example** — in-stock shoes priced between €10 and €500:

```
filters[available][]=1
&filters[category][]=shoes&filters[category][]=boots
&filters[price][0][operator]=>=&filters[price][0][value]=10
&filters[price][1][operator]=<=&filters[price][1][value]=500
```

**Sort syntax**

The `sort[field]=direction` parameter **replaces the strategy's own ordering** (pins included). The strategy's catalog and your active `filters[...]` still apply.

```
?sort[price]=desc
?sort[created_at]=asc
```

* Only **one** sort field per request.
* Direction is `asc` or `desc`, case-insensitive.
* The field must be flagged **`merch_sortable`** for your site in the AB Tasty back-office (this is a dedicated flag, distinct from the internal `sortable` flag). Requesting an unmarked field returns `400 INVALID_SORT_FIELD`.

**Sort-specific error codes** (all returned as `400 Bad Request`)

| Error code               | Reason                                                 |
| ------------------------ | ------------------------------------------------------ |
| `INVALID_SORT_SYNTAX`    | Malformed `sort[...]` key, or more than one sort entry |
| `INVALID_SORT_FIELD`     | Field is not sortable for this site                    |
| `INVALID_SORT_DIRECTION` | Direction is not `asc` / `desc`                        |
| `SORT_UNSUPPORTED`       | The strategy does not support runtime sorting          |

**Response (JSON)**

```json
{
  "name": "strategy-name",
  "items": [
    {
      "id": "product-123",
      "title": "Running Shoes",
      "price": 89.99
    }
  ],
  "total_items": 248,
  "total_pages": 13,
  "current_page": 1,
  "limit": 20,
  "has_next": true,
  "facets": {
    "category": {
      "shoes": 84,
      "boots": 40
    },
    "available": {
      "1": 248
    }
  }
}
```

**Response fields**

| Field          | Type    | Description                                                         |
| -------------- | ------- | ------------------------------------------------------------------- |
| `name`         | string  | Internal name of the merchandising strategy                         |
| `items`        | array   | Ordered list of products for the requested page                     |
| `total_items`  | integer | Total number of products matching the strategy and active filters   |
| `total_pages`  | integer | Total number of pages given the current `limit`                     |
| `current_page` | integer | Current page number (1-indexed)                                     |
| `limit`        | integer | Number of items per page used for this response                     |
| `has_next`     | boolean | Whether a next page exists                                          |
| `facets`       | object  | Facet counts by field and value. Only populated when `facets=true`. |

**Response statuses**

| Response Status | Message              | Reasons                                                                                   |
| --------------- | -------------------- | ----------------------------------------------------------------------------------------- |
| 200             | OK                   |                                                                                           |
| 400             | Bad Request          | Strategy not found for this `merch_id`; invalid filter field; query execution error       |
| 403             | Forbidden            | Missing token, invalid/expired token, or `site_id` mismatch                               |
| 422             | Unprocessable Entity | `variables` is not valid JSON; `fields` is not a valid JSON list; unknown `output_format` |
| 503             | Service Unavailable  | Request exceeded the 10-second global timeout                                             |

***

### Typical integration flow

Pick one of the two entry points depending on what your front-end has on hand.

**A. You only know the category ID** — single call, the category scopes the products:

```
GET /{site_id}/merch/category_id/1439?fields=["id","title","price"]&limit=20&facets=true
→ items[], facets{}, total_items, total_pages
```

**B. You already have the strategy UUID** — single call, pass the category in `variables`:

```
GET /{site_id}/merch/{uuid}?variables={"category_id":"1439"}&fields=["id","title","price"]&limit=20&facets=true
→ items[], facets{}, total_items, total_pages
```

Query-string values containing JSON or brackets must be URL-encoded.

**Then, for both:**

```
1. Display facets and let the user apply filters
   GET ...&filters[category][]=shoes&filters[available][]=1
   → filtered items[] and updated facets{}

2. Paginate
   GET ...&page=2
   — or —
   GET ...&offset=20&limit=20
```

***

### Notes

* The `id` field is always returned regardless of the `fields` parameter.
* When both `offset` and `page` are provided, `offset` takes precedence.
* **`limit` defaults to `20` when omitted.** Pass `limit=0` to return all matching items with no pagination cap.
* Facet computation adds overhead — only request `facets=true` when you need to render facet counts.
* **Per-field opt-in is required in the AB Tasty back-office:**
  * `filters` and `facets` only accept fields flagged as **`facetable`**.
  * `sort` only accepts fields flagged as **`merch_sortable`** (distinct from the internal `sortable` flag — they are not interchangeable). Requesting a non-opted-in field returns `400`.
* Two situations look similar but are distinct:
  * **No strategy bound to the category** → `400 UNKNOWN_CATEGORY` (never a `200` with an empty payload).
  * **Strategy found but no category supplied** (UUID endpoint without `variables`) → `200` with an empty `items` array.


# How Merchandising Works

Each merchandising strategy creates a **ranked list of products** based on rules and algorithms (bestsellers, new arrivals, margin, etc.).

**Key principles**

* Every strategy has a unique **MERCH\_ID**.
* **Scores** are automatically computed and synchronized via API.
* Your **CMS consumes these scores** to reorder products in its catalog.
* **Filters** on your website only hide products — they **don’t change AB Tasty’s ranking**.

**Data flow overview**

1. **Score generation** – AB Tasty calculates a merchandising score per product and strategy.
2. **API sync** – Scores are sent to your CMS or search engine.
3. **Catalog update** – The CMS reorders products using these scores.
4. **Front-end display** – The ordered list is shown on your website; filters simply hide non-matching items.

**Integration logic**\
Your CMS retrieves scores via API:\
`GET https://api.abtasty.com/reco/<MERCH_ID>` → returns product SKUs with their scores.

The CMS then applies these scores as a **sorting layer**. AB Tasty doesn’t recalculate dynamically, ensuring **stable performance**.

**Sync frequency**

* Scheduled (daily/hourly) or manual


# How to enable Merchandising Reporting

Merchandising reporting lets you track the performance of your strategies (views, clicks, conversions) directly in Google Analytics 4 (GA4).\
To do this, you just need to make sure that Merch events are sent to your website’s DataLayer through the AB Tasty tag.

### Enabling Merchandising reporting

{% stepper %}
{% step %}

#### Check that the AB Tasty tag is installed

If you already have product recommendations running on your site, the tag is already there. There is no need for extra setup.
{% endstep %}

{% step %}

#### Configure analytics in your tag

Your **Technical Support Engineer (TSE)** or internal tech team simply needs to add this key to the `config.json` file of your tag configuration:

<pre class="language-json"><code class="lang-json"><strong>"analytics": {
</strong>  "merchandisingEventsToDataLayer": ["site"]
}
</code></pre>

{% hint style="info" %}
This automatically enables Merchandising events (`show`, `click`, `add_to_cart`, `convert`) to be pushed into your site’s DataLayer exactly like Recommendation events.
{% endhint %}
{% endstep %}

{% step %}

#### Make sure GA4 / GTM is set up

If your Recommendation reporting is already configured, Merch events will be captured the same way once the additional variables **`event_id`** and **`category_id`** are included. Otherwise, your TSE or internal tech team can follow the existing Recos GTM setup (same trigger, variables, and event structure) and add these two variables.
{% endstep %}

{% step %}

#### Test it

Open your site → open the browser console → type `dataLayer`.\
You should see events like:

```
{
  "event": "ab_recos_xxxx",
  "recos": {
    "action_id": "show",
    "reco_id": "xxxx",
    "item_ids": "[\"12345\",\"67890\"]"
  }
}
```

{% hint style="info" %}
If you see them, it means Merch events are being correctly sent to GA4.
{% endhint %}
{% endstep %}
{% endstepper %}

If you want to know more about the **Merchandising strategy reporting** **dashboard** with metrics like views, clicks, conversion rate, and top products, read [Merchandising Reporting](/recommendations-and-merchandising/getting-started/merchandising/merchandising-reporting)

{% hint style="info" %}
**Need help?**

Contact your **Technical Success Engineer (TSE)** to confirm or validate the configuration.
{% endhint %}

### How to setup HTML on your website ?&#x20;

To allow the AB Tasty tag to detect and send Merch events automatically, your merchandising banners must include specific HTML attributes.

If AB Tasty does not manage your frontend (custom site or CMS), your development team must add these attributes directly in the HTML of your merchandising banners.\
Each product container should include these attributes so the AB Tasty tag can detect and send events.

### Required attributes

| Attribute                                                      | Description                                                                                                                                                      | Example                                                        |
| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |
| `data-category-id`                                             | Category identifier                                                                                                                                              | `<div data-category-id="jeans-homme">`                         |
| `data-merch-uuid` *(only mandatory for Merch deployed by API)* | <p>Strategy merch identifier</p><p></p><p>(<em>Both <code>data-merch-uuid</code> and <code>data-category-id</code> need to be on the same HTML element)</em></p> | `<div data-merch-uuid="62f1937c-d021-4911-972e-237b5413386h">` |
| `data-item-id`                                                 | Product identifier                                                                                                                                               | `<div data-item-id="SKU123">`                                  |
| `data-reco-click`                                              | User interaction type                                                                                                                                            | `<button data-reco-click="add_to_cart_item">`                  |
| `data-reco-debug="true"` *(optional)*                          | Enables debug mode in console                                                                                                                                    | `<div data-category-id="jeans-homme" data-reco-debug="true">`  |

### Event Actions available

| Action ID           | When is it triggered                                       |
| ------------------- | ---------------------------------------------------------- |
| `show`              | When the banner appears in the DOM                         |
| `go_to_page`        | When a product in the banner is clicked                    |
| `add_to_cart_item`  | When a user adds one product to cart                       |
| `add_to_cart_items` | When the user adds all recommended products (e.g. bundles) |
| `convert_xxx`       | When a conversion button is clicked                        |

{% hint style="info" %}
The tag automatically sends a `show` event as soon as an element with a `data-category-id` appears in the DOM.\
If you fill it asynchronously, make sure to add this attribute only after the items are rendered, otherwise the event will fire empty.
{% endhint %}

### How to configure GTM / GA4 ?

The configuration is the same as for Recommendations tracking, except that two additional variables must be added: **`event_id` and `category_id`** (see table below).\
If you already have Recommendation analytics events in GA4, you only need to include these two variables.

Otherwise, follow these steps:

{% stepper %}
{% step %}

#### Create a Trigger

* Go to **Triggers > New**
* Type: **Custom Event**
* Event name: `ab_recos.*`
* Check **Use regex matching**
* Apply to **All custom events**
  {% endstep %}

{% step %}

#### Create Data Layer Variables

Create these six variables:

| Variable name | Data Layer variable name |
| ------------- | ------------------------ |
| `reco_id`     | `recos.reco_id`          |
| `event_id`    | `recos.event_id`         |
| `item_ids`    | `recos.item_ids`         |
| `action_id`   | `recos.action_id`        |
| `category_id` | `recos.category_id`      |
| `item_id`     | `recos.item_id`          |

{% hint style="info" %}
You can access them in GTM via the data path `recos.VARIABLE_NAME`.
{% endhint %}
{% endstep %}

{% step %}

#### Create a GA4 Event Tag

1. Go to **Tags > New**
2. Tag type: **Google Analytics: GA4 Event**
3. Event name: `ab_recos`
4. Add your **Measurement ID** (from GA4 Admin > Data Stream)
5. Add the six variables above as **Event Parameters**
6. Trigger: the one created in step 1 (`ab_recos.*`)
   {% endstep %}
   {% endstepper %}

### Example event in the DataLayer

**Show event**

```json
{
  "event": "ab_recos_12345",
  "recos": {
    "category_id": "jeans-homme",
    "action_id": "show",
    "item_ids": "[\"SKU123\",\"SKU456\"]",
    "debug_mode": false
  }
}
```

**Click event**

```json
{
  "event": "ab_recos_67890",
  "recos": {
    "category_id": "jeans-homme",
    "action_id": "go_to_page",
    "item_id": "SKU123",
    "item_ids": "[\"SKU123\",\"SKU456\"]"
  }
}
```

### How to test my reporting tracking ?

1. Open your website
2. Open the **browser console**
3. Type:

   ```js
   console.log(dataLayer)
   ```
4. You should see events like `ab_recos_xxxx` containing `category_id`, `action_id`, and `item_ids`.

{% hint style="info" %}
If these appear → the tracking setup is working.\
You can then see results in GA4 > *DebugView*, and later in AB Tasty *Merch Reporting*.
{% endhint %}

### Notes & Limitations

* Merch Analytics is currently available **only for GA4**.
* Piano Analytics and Matomo are supported for Recommendations only.
* Merch and Reco events share the same event name (`ab_recos.*`) and GTM configuration.
* Activating this does **not interfere** with your existing analytics setup.


# Search


# Search configuration

**Search** delivers intelligent, catalog-aware search experiences that help visitors find exactly what they need. It runs on the same product catalog as Recommendations and Merchandising, and is configured from the **Search** → **Configuration** page in the Commerce left navigation.

This page covers how to configure search relevance and display, how visitor-facing suggestions are built, the query rules that let you fine-tune results, how to launch the front-end **Search widget**, and how to query search directly through the REST APIs.

{% hint style="info" %}
**What changed:** Search is part of AB Tasty Commerce and shares the catalog connected for Recommendations & Merchandising. The back-office configuration described here lives under **Search** → **Configuration**; the runtime search and autocomplete endpoints are served from a dedicated `{identifier}.search.abtasty.com` host.
{% endhint %}

## Configuration

Open **Search** → **Configuration** from the left navigation. A banner at the top reflects catalog freshness:

> **Your search catalog is up to date / Last refresh: about 14 hours ago**

The search index is rebuilt from your catalog on the same synchronization schedule as the rest of Commerce, see Monitoring Commerce deployment health to track refreshes and synchronizations.

<figure><img src="/files/MFmInCZZuGnve0IZSovR" alt=""><figcaption></figcaption></figure>

#### Display: Displayable attributes

The **Display** section controls **Displayable attributes**, *"Define which attributes can be displayed in your search results."* Each attribute is shown as a removable chip; remove a chip to stop returning that field in search results.

The catalog fields available as displayable attributes include:

| Displayable attributes                        |
| --------------------------------------------- |
| `title`, `link`, `price`, `img_link`, `id`    |
| `Brand`, `Category_id`, `Collection`, `Color` |
| `Description`, `Material`, `Sku`, `Vendor`    |

{% hint style="info" %}
Displayable attributes determine which fields are **returned** with each hit (and therefore available to render in the widget or consume via the API). They are independent from which fields are **searched**, that is controlled by the searchable attributes below.
{% endhint %}

#### Ranking parameters: Searchable attributes for ranking

The **Ranking parameters** section controls **Searchable attributes for ranking**, *"Define which attributes will be used for text search as well as their level of priority."*

This is an ordered, draggable priority list. Fields higher in the list carry more weight when matching a query. Each row has drag, up/down, and delete controls, and you add fields with **Add other searchable attributes**.

| Priority | Searchable attribute |
| -------- | -------------------- |
| 1        | `Title`              |
| 2        | `Description`        |
| 3        | `Category_id`        |
| 4        | `Sku`                |
| 5        | `Collection`         |
| …        | …                    |

{% hint style="info" %}
AB Tasty recommends keeping `Title` at the top of the list and only reordering or adding attributes when you have a specific business reason. Changes take effect on the next catalog refresh.
{% endhint %}

#### Synonyms

The **Synonyms** section lets you group related terms so a query for one returns matches for the others (for example, *sneakers* and *trainers*). Use:

* **Add synonym**: define a synonym group manually.
* **Import synonyms**: bulk-import synonym groups.

{% hint style="info" %}
Synonyms are largely unnecessary when **Semantic search** is active (it is on by default), because semantic matching already understands related concepts. Use synonyms for domain-specific terms or brand names that semantic search may not infer.
{% endhint %}

#### Result quality threshold

The **Result quality threshold** sets the minimum match quality a product must reach to appear in results. Raising it returns fewer, more precise hits; lowering it returns more, broader hits. This corresponds to the `rankingScoreThreshold` parameter exposed in the Search API.

#### Semantic search

**Semantic search** is enabled by default. It matches products by meaning rather than exact keywords, so a query like *"warm winter jacket"* can surface relevant coats even when those exact words are not in the product fields. The balance between semantic and keyword matching maps to the `semanticRatio` parameter in the Search API.

### Sortable attributes and default Relevance

Beyond text ranking, you can offer visitors explicit sort options through **Sortable attributes**. The default sort is **Relevance** (the engine's own ranking for the query). You can add further options such as price ascending/descending, release date, ratings, or popularity, depending on which numeric catalog fields you expose.

At runtime, sort options map to the API `sort` directive, for example `price:asc` (see Search API).

### Autocomplete and suggestions

Autocomplete gives visitors *"a fast, intuitive search experience by surfacing relevant search suggestions as they type."* It is powered by a dedicated **Suggestions index** (the autocomplete index), which is rebuilt daily and served by the `/autocomplete` endpoint.

The suggestions index blends two data sources:

| Source                      | What it contributes                                                                                   |
| --------------------------- | ----------------------------------------------------------------------------------------------------- |
| **Past search queries**     | Real queries typed by your visitors over roughly the last **8 weeks**.                                |
| **Catalog-based whitelist** | A verified list of allowed terms extracted from your active product catalog and custom configuration. |

The daily pipeline runs in three stages:

1. **Data collection**: gathers recent searches (8-week window) plus current catalog data.
2. **Whitelist building**: tokenizes catalog attributes, integrates synonyms configured on the catalog index, and normalizes accents, punctuation, and spacing.
3. **Cleaning & merging**: validates queries against the whitelist, standardizes display formatting, and merges grammatical variations such as plurals and singulars.

Suggestions are then ranked by:

* **Popularity**: queries typed by a larger number of unique visitors rank higher.
* **Relevance**: broader terms that match more catalog items are preferred.

{% hint style="info" %}
**Fallback suggestions:** even a brand-new site with no search history gets catalog-derived suggestions, so high-value products and categories remain suggestible from your very first visitor.
{% endhint %}

### Query rules to optimize results

Query rules let you intervene on specific searches to steer relevance and merchandising. Three mechanisms are available:

* **Redirections**: for specific search terms, send visitors straight to a target page (for example, redirect *"gift card"* to your gift-card landing page). You define the search term and a destination URL.
* **Custom strategies**: query-specific ranking modifications built in the **Strategy Builder**: define the query conditions, then set the filtering and ranking parameters that apply when the query matches.
* **Boost & Bury**: product-level rules that promote (Boost) or demote (Bury) products across searches, at Major / Moderate / Minor strength. These are the same rules used elsewhere in Commerce, see Creating rules: boost and bury.

{% hint style="info" %}
Boost & Bury affects product visibility across all searches; Custom strategies are scoped to the queries they match; Redirections bypass the results page entirely for the matched term.
{% endhint %}


# Launching your first Search campaign using Search widget

This tutorial guides you through creating and deploying your first AB Tasty search campaign. You will learn how to set up the search widget, configure its display options, customize translations and styling, and launch it on your website.

\
The final section of this guide also introduces additional configuration options that allow you to further customize the widget after your campaign is live.

### Prerequisites

Before you begin, ensure you have:

* Completed the search configuration process (see "Getting started with AB Tasty search")
* Access to AB Tasty Web Experimentation & Personalization platform
* Editor or administrator permissions to create campaigns
* The CSS selector or location of your website's current search bar element
* Translation requirements for your target audience (if applicable)

### Steps

{% stepper %}
{% step %}

#### Create an AB test campaign

Navigate to the AB Tasty Web Experimentation & Personalization platform and create a new campaign:

1. Log in to your AB Tasty account
2. Access the Web Experimentation & Personalization section
3. Click **Create campaign**
4. Select **AB test** as the campaign type
5. Configure basic campaign settings (name, URL targeting, audience)
6. Proceed to the visual editor
   {% endstep %}

{% step %}

#### Add the search widget

In the visual editor, add the search widget to your campaign:

1. Locate and click the **Add widget** button in the visual editor toolbar
2. Browse or search the widget library
3. Select the **Search** widget
4. The widget is now added to your campaign and ready for configuration
   {% endstep %}

{% step %}

#### Configure the widget layout

Define how and where the search widget displays on your website:

1. In the visual editor, click **Active changes**
2. Locate the blocks related to the Search widget
3. Click **Edit** on the layout configuration block
4. Choose your display mode:
   * **Modal**: Search results appear in an overlay window
   * **Free placement**: The widget is  anchored to a selected element on the site. Use this option when an existing search bar serves as the entry point

{% hint style="info" %}
Depending on the site's architecture, the search bar or search element may differ on the mobile version. In this case, you must implement two separate widgets: one for desktop and one for mobile
{% endhint %}

{% hint style="warning" %}
It is recommended to use the parent element if an "input" is selected when picking the element.
{% endhint %}

![](/files/mayG4Nk6Yjuuz3H5ATp3)

Once the widget has been added to your campaign, you can configure how it appears and behaves on your website.

The Search Widget configuration panel allows you to control both the display and functionality of the widget.&#x20;

Settings are organized into three sections:

1. **Layout:** defines how and where the widget appears on the page
2. **Content**: controls search behavior and available features
3. **Style**: allows you to customize the visual appearance of the widget
   {% endstep %}

{% step %}

#### Select the trigger element

Configure which element triggers the search widget display:

1. Navigate to the **Element Selector** section
2. Choose one of two methods to select your website's search bar:
   * Click **Pick in the editor** to use the manual picker tool and click on your search bar element in the preview
   * Enter the CSS selector directly in the **Element Selector** field (for example: `#search-input` or `.search-bar`)
3. Verify that the correct element is selected

The search widget will activate when visitors interact with this element.
{% endstep %}

{% step %}

#### Translate field names

Customize the language and terminology displayed in the search widget:

1. Access the **Content** section in the widget editor
2. Locate the **Translation keys dictionary**
3. Add key-value pairs to translate field names from English to your desired language
4. Enter translations for fields such as:
   * Search placeholder text
   * Filter labels
   * Sort options
   * Call-to-action buttons
5. Ensure proper JSON syntax (no comma after the last item in the dictionary)

Example translation entry:

![](/files/6Wuz8i5VsRUEqvedvpNk)

```
"search_placeholder": "Search products",
"filter_by_price": "Price range",
"sort_by_relevance": "Most relevant"
```

If your product catalog attributes use specific naming conventions, adjust the translations accordingly.
{% endstep %}

{% step %}

#### Customize the widget styling

Adapt the visual appearance of the search widget to match your website design:

1. Navigate to the **Style** section in the widget editor
2. Modify styling properties for each widget element:
   * Colors and backgrounds
   * Typography and font sizes
   * Spacing and padding
   * Border styles
   * Button appearances
3. Use the standard styling interface similar to other AB Tasty widgets

![](/files/vcSpJeSNkUJXTuXHiBWW)

For advanced customization:

1. Access the **Expert mode** section
2. Add custom CSS code to achieve specific design requirements
3. Preview changes in the visual editor

![](/files/G80fsR1RJKC2LErjFS2a)

These settings help ensure the widget integrates seamlessly with our brand guidelines and website aesthetics.

{% hint style="warning" %}
As TSE you will probably use CSS directly rather than using the widget (or a mix of both for quick modifications).\
Due to the native widget styling rules, you’ll probably have to use prefix before your selectors like `div[id^="ab_widget_container_search"][id$="123456"] div.abtasty-search-widget-container` in order to avoid using many “!important” in your CSS rules.
{% endhint %}
{% endstep %}

{% step %}

#### Test your campaign

Before launching, conduct thorough quality assurance testing
{% endstep %}

{% step %}

#### Launch your campaign

Once testing is complete, launch your search campaign live:

1. Review all campaign settings and widget configurations
2. Verify your audience targeting and URL conditions
3. Click **Launch** or **Activate campaign**
4. Confirm the launch action
5. Monitor the campaign status to ensure it activates successfully

Your search widget is now live on your website. Follow the same launch process as you would for any other AB Tasty campaign
{% endstep %}
{% endstepper %}

You may want to further customize the behavior and appearance of Search Widget:

<figure><img src="/files/lgnWiV4u79T7PAmW4MCz" alt=""><figcaption></figcaption></figure>

#### Content

The Content section controls how the Search Widget behaves and how search results are retrieved and displayed.

1. **Attach product metadata to result elements**

This option attaches product metadata to the dataset attributes of each result element. This can be useful if you want to manipulate search result elements using JavaScript based on specific attributes, such as modifying elements whose `data-id` matches a certain value.

2. **Custom index**

By default, the widget uses the search index associated with your account. If needed, you can specify a custom index ID (if proposed by AB Tasty for testing purpose) to perform search queries.

The index ID usually follows this format: `[AB Tasty identifier tag]_Catalog` (e.g., `78s56pg87g8j0n1n3_Catalog`).

3. **Autocomplete**

When Autocomplete is enabled, the widget displays search suggestions while the user types in the search field. You can choose between:

* Using the default index linked to your account
* Specifying a custom autocomplete index (if proposed by AB Tasty for testing purpose)

The autocomplete index typically follows this format: `[AB Tasty identifier tag_Suggestions]`&#x20;

{% hint style="info" %}
Unlike the catalog index, it does not include the `_Catalog` suffix.
{% endhint %}

4\. **Semantic search**

Enable Semantic search if you want the search engine to interpret the meaning of search queries rather than relying only on exact keyword matches.

Two parameters can be forced in the widget to over-ride values set at the account level in Search interface (e.g. to run widget-based AB tests on these parameters):

* **Semantic level**: Defines how strongly semantic relevance affects the search results.
  * Range: 0 (no semantic impact) to 1 (maximum semantic impact).
* **Relevance threshold**: Each result receives a relevance score. If a threshold greater than 0 is defined, only results with a score above that value are returned. This allows you to filter results and increase search precision.

5. **Recommendations & Merchandising**

Enable this option to apply recommendation and merchandising rules on top of search results. You must configure the following fields:

* `apiKey`
* `siteID`
* `merchandisingRecoID`
* `recommendationsRecoID`

{% hint style="info" %}
The `recommendationsRecoID` field is used only to display recommended products when the widget opens, before any search query is performed.
{% endhint %}

6. **Marketing banners**

Marketing banners allow you to display promotional content instead of recommended products when the widget opens and no search query has been entered. You can configure up to three banners.

Each banner includes:

* an image
* a title
* description text
* button text
* a redirect link

When users click the button, they are redirected to the configured URL.

7. **Filters**

Filters allow users to refine search results based on product attributes. You can enable or disable filters.

If enabled, you can either keep the default filter order or define a custom order by specifying filter keys in the following format: \``filter1, filter2, filter3`&#x20;

8. **Redirection URL**

The Redirection URL option redirects users to a specific page when they press Enter in the search field. This is often used to redirect users to a dedicated search results page.

To include the user’s search query in the URL, use the variable: `{{query}}` . Example: `https://www.yourwebsite.com/search?text={{query}}`&#x20;

The `{{query}}` variable will automatically be replaced with the text entered by the user.

9. **Infinite scroll**

When Infinite Scroll is enabled, additional results are automatically loaded when the user reaches the bottom of the results list. This allows users to browse results continuously without pagination.

10. **Show “add to cart” button**

This option displays an Add to Cart button for each product result. To enable this feature, you must define a function that handles the add-to-cart action.

The function receives two parameters:

* `result` : an object containing product information
* `addToCartButton`: the button element

This allows you to manage actions such as disabling the button during requests or updating the shopping cart.

11. **Custom price**

Use this option when product prices are rendered through an external element or system.

A code block is available to retrieve the appropriate price element. The function receives the search result object as an argument and can be used to extract the element that displays the product price.

```javascript
const handle = /\/([^\/?]+)(?:\?.*)?$/.exec(result.link)[1]

const pricing = document.createElement('product-price-list');
pricing.setAttribute('handle', handle);
pricing.setAttribute('load-product-data', 'true');


return pricing;
```

12. **Language**

The Language setting defines which language should be used to retrieve product information.

If localized product data exists, the widget will display the version corresponding to the selected language.

13. **Translation keys**

The Translation Keys setting allows you to translate text displayed inside the widget.

It uses an object with entries in the format: `key:value` . Example:&#x20;

```javascript
{
   "Result": "Résultat",
   "Sort By": "Trier par"
}

```

In this example, the widget texts Results and Sort By will be translated accordingly. Only the keys defined in the object are translated. Texts that are not declared remain unchanged.

{% hint style="info" %}
This works for any text present in the widget : input, filters, buttons etc.
{% endhint %}

### Next steps

You have successfully launched your first AB Tasty search campaign. The search widget is now active on your website and visitors can start searching for products.&#x20;

If needed, you can further customize the widget's behavior and appearance using the additional configuration options described above.


# Optimizing search performance

This tutorial guides you through monitoring and optimizing your AB Tasty search performance. You will learn how to use analytics dashboards to track search metrics, identify optimization opportunities, and implement query-specific and product-specific rules to improve search results.

### Prerequisites

Before you begin, ensure you have:

* Access to the AB Tasty analytics interface
* At least several days of search data collected
* Editor or administrator permissions to create optimization rules
* Understanding of your product catalog structure

### Steps

{% stepper %}
{% step %}

#### Access the analytics dashboard

Navigate to the search analytics interface to view performance metrics:

1. Log in to your AB Tasty account
2. Go to <https://app2.abtasty.com/search/analytics>
3. Select the **Analytics** menu
4. Review the available metric categories: Transaction, Queries, and Technical performance

![](/files/qMttiQjsWW0mcyAqYlSX)

The analytics dashboard provides comprehensive insights into how visitors use your search and the business value it generates.
{% endstep %}

{% step %}

#### Review transaction metrics

Analyze the revenue and conversion impact of your search functionality:

1. Navigate to the **Transaction** section in the analytics dashboard
2. Review the following key metrics:
   * Revenue generated by users who used AB Tasty search
   * Average conversion rate of users who triggered search events
   * Average click rate in search results among users who interacted with the search bar
3. Track trends over time to monitor search performance
4. Compare metrics against your baseline or business goals

Use these metrics for reporting purposes and to assess the overall value delivered by your search implementation.
{% endstep %}

{% step %}

#### Analyze query data

Examine what visitors search for to identify optimization opportunities:

1. Access the **Queries** section in the analytics dashboard
2. Review the **Most frequent queries** table
3. Identify the top search terms used by your visitors
4. For each frequent query, manually test the search results:
   * Enter the query in your live search widget
   * Evaluate the relevance and quality of returned products
   * Note any disappointing or irrelevant results
5. Document queries that require optimization

![](/files/nfbRiVtAC1v3EUfvNRD0)

This analysis provides valuable insights into visitor intent and helps you identify where search configuration improvements are needed.
{% endstep %}

{% step %}

#### Monitor technical performance

Track the technical reliability of your search service:

1. Navigate to the **Technical performance monitoring** section
2. Review available metrics:
   * Number of search requests
   * Latency measurements
3. Monitor these metrics regularly to ensure service reliability
4. Investigate any anomalies or performance degradation

![](/files/kpT3yBu9eok6nqskeiSt)
{% endstep %}

{% step %}

#### Create redirection rules

Set up redirections for specific search queries to guide visitors to relevant pages:

1. Access the **Query-specific rules** section in the Optimization dashboard
2. Click **Create rule** or the equivalent action button
3. Select **Redirection** as the rule type
4. Configure the redirection:
   * Enter the search term or query that triggers the redirection
   * Specify the target URL where visitors will be redirected
5. Save the rule

Common use cases for redirections:

* Redirecting category names to corresponding product list pages (for example, "dresses" redirects to /category/dresses)
* Directing brand searches to brand-specific landing pages
* Sending specific product searches directly to product detail pages
  {% endstep %}

{% step %}

#### Implement custom search strategies

Create custom rules to modify product ranking for specific search terms:

1. Navigate to the **Query-specific rules** section in the Optimization dashboard
2. Click **Create rule** or the equivalent action button
3. Select **Custom strategies** as the rule type
4. Access the **Strategy Builder** to configure your custom rule
5. Define the conditions and actions:
   * Specify the query terms that trigger the rule
   * Set filtering criteria (for example, show only products on promotion)
   * Adjust ranking parameters
   * Configure product prioritization
6. Save and activate the custom strategy

{% hint style="info" %}
In Beta and Early Adoption programs, custom strategies are configured in the Recommendations & Merchandising interface through a dedicated Search rules recommendation.
{% endhint %}

Example use case: If a visitor's query includes "promotion" or "sale", filter search results to display only discounted products and rank them by discount percentage.
{% endstep %}

{% step %}

#### Set up boosting rules

Configure product-specific rules to rank certain products higher across all search queries:

1. Access the **Boost products** section in the Optimization dashboard
2. Click **New product boost** or the equivalent action button
3. Define the boosting criteria:
   * Select product attributes to target (for example, new arrivals, high-margin items, featured products)
   * Set the boost strength or priority level
   * Specify conditions for when the boost applies
4. Save the boosting rule

Boosting rules increase the visibility of specific product categories or attributes regardless of the search query. This is useful for promoting new catalog additions, seasonal items, or strategic products.
{% endstep %}

{% step %}

#### Configure bury rules

Create rules to rank certain products lower in search results:

1. Navigate to the **Bury products** section in the Optimization dashboard
2. Click **New product bury** or the equivalent action button
3. Define the bury criteria:
   * Select product attributes to target (for example, out-of-stock items, low-performing products, discontinued items)
   * Set the bury strength or demotion level
   * Specify conditions for when the rule applies
4. Save the bury rule

Bury rules reduce the visibility of products you want to deprioritize across all search queries. This helps improve the overall quality of search results by pushing less relevant items lower in rankings.
{% endstep %}
{% endstepper %}


# Using search with API

This tutorial guides you through integrating AB Tasty Search using the Search API. You will learn how to construct API requests, implement filters, handle pagination, and process search responses to deliver search functionality on your website.

### Prerequisites

Before you begin, ensure you have:

* A validated AB Tasty search configuration with satisfactory performance
* Your unique search identifier (provided by AB Tasty)
* Development environment with API request capabilities
* Understanding of REST APIs and JSON formatting
* Access to your product catalog structure and filterable attributes

### Steps

{% stepper %}
{% step %}

#### Understand the API endpoint

The Search API uses a single GET endpoint to perform all search operations:

**Endpoint**: `https://{identifier}.search.abtasty.com/search`

Replace `{identifier}` with your unique search identifier provided by AB Tasty. All request parameters are sent as URL query parameters using standard HTTP GET conventions.
{% endstep %}

{% step %}

#### Construct a basic search request

Create a simple search request using the required text parameter:

**Basic request structure**:

```
GET https://{identifier}.search.abtasty.com/search?text=toy
```

**Required parameter**:

* `text`: The search query string entered by the visitor

**Optional parameters** to enhance your request:

* `page`: Page number of results (0-indexed, default: 0)
* `hitsPerPage`: Number of results per page (default: 20)
* `rankingScoreThreshold`: Minimum relevancy score from 0.0 to 1.0 (default: no threshold)
* `semanticRatio`: Balance for semantic search results from 0.0 to 1.0 (default: 0.0)

**Example with pagination**:

```
GET https://{identifier}.search.abtasty.com/search?text=toy&page=0&hitsPerPage=20
```

{% endstep %}

{% step %}

#### Implement list filters

Add list filters to match exact values for specific fields:

**Filter syntax**:

```
filters[field_name][]=value1&filters[field_name][]=value2
```

List filters allow visitors to narrow results by selecting one or more values for categorical attributes such as brand, color, or category.

**Example request with brand filter**:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &filters[brand][]=lego
  &filters[brand][]=playmobil
```

**Example request with multiple list filters**:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &filters[brand][]=lego
  &filters[color][]=red
  &filters[color][]=blue
```

Apply list filters for any filterable attributes configured in your search settings.
{% endstep %}

{% step %}

#### Implement range filters

Add range filters for numerical fields using comparison operators:

**Filter syntax**:

```
filters[field_name][0][operator]=operator_type&filters[field_name][0][value]=number
```

**Supported operators**:

* `>`: Greater than
* `<`: Less than
* `>=`: Greater than or equal to
* `<=`: Less than or equal to
* `=`: Equal to

**Example request with price range**:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &filters[price][0][operator]=>
  &filters[price][0][value]=10
  &filters[price][1][operator]=<
  &filters[price][1][value]=20
```

This example returns products priced between 10 and 20.

**Example request with minimum rating**:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &filters[rating][0][operator]=>=
  &filters[rating][0][value]=4
```

Combine multiple range conditions to create precise numerical filters.
{% endstep %}

{% step %}

#### Combine multiple filter types

Create comprehensive search requests by combining list filters and range filters:

**Complete example request**:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &filters[brand][]=lego
  &filters[brand][]=playmobil
  &filters[price][0][operator]=>
  &filters[price][0][value]=10
  &filters[price][1][operator]=<
  &filters[price][1][value]=20
  &filters[color][]=red
  &filters[color][]=blue
  &filters[rating][0][operator]=>=
  &filters[rating][0][value]=4
  &page=0
  &hitsPerPage=20
```

This request searches for toys from Lego or Playmobil brands, priced between 10 and 20, available in red or blue, with a rating of 4 or higher, returning the first 20 results.

**URL encoding note**: Operators like `>` must be URL-encoded (`%3E`) in actual requests.
{% endstep %}

{% step %}

#### Configure ranking and semantic parameters

Fine-tune search relevance using advanced parameters:

**Ranking score threshold**: Set a minimum relevancy score to filter out low-quality matches:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &rankingScoreThreshold=0.1
```

Ranking scores range from 0.0 (no match) to 1.0 (perfect match). Higher thresholds return fewer but more relevant results.

**Semantic ratio**: Balance semantic search to include conceptually related products:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &semanticRatio=0.3
```

Higher semantic ratio values (closer to 1.0) bring documents from further in the semantic space into results, increasing variety but potentially reducing exact match precision.

Adjust these parameters based on your catalog characteristics and desired search behavior.
{% endstep %}

{% step %}

#### Process the API response

Handle the JSON response returned by the Search API:

**Response structure**:

```json
{
  "hits": [...],
  "facets": {...},
  "totalPages": 20,
  "totalHits": 1000,
  "hitsPerPage": 50,
  "page": 1
}
```

**Response properties**:

1. **hits**: Array of matching products with their attributes
   * Each object contains the displayable attributes configured in your search settings
   * Example properties: id, name, price, link, img\_link
2. **facets**: Aggregated filtering information
   * List type facets: Array of \[value, count] pairs
   * Range type facets: Object with min and max values
   * Use facets to build dynamic filtering interfaces
3. **totalPages**: Total number of available pages
4. **totalHits**: Total number of matching results
5. **hitsPerPage**: Number of results per page
6. **page**: Current page number

**Example hits array**:

```json
"hits": [
  {
    "id": "126455",
    "name": "Star wars lego",
    "price": 5.9,
    "link": "/starWarsLego",
    "img_link": "/103446.jpg"
  }
]
```

**Example facets object**:

```json
"facets": {
  "brand": {
    "type": "list",
    "values": [["lego", 10], ["playmobil", 5]]
  },
  "price": {
    "type": "range",
    "values": {"min": 5, "max": 100}
  }
}
```

Parse the response to display search results and build filtering interfaces on your website.
{% endstep %}

{% step %}

#### Implement pagination

Handle multi-page search results by controlling the page parameter:

**Navigate to specific pages**:

```
GET https://{identifier}.search.abtasty.com/search
  ?text=toy
  &page=0
  &hitsPerPage=20
```

**Pagination logic**:

1. Calculate total pages: Use the `totalPages` value from the response
2. Display page numbers or navigation controls based on `totalPages`
3. Update the `page` parameter when visitors navigate between pages
4. Maintain all active filters across page changes

**Example pagination implementation**:

* Current page: Read from `page` in response
* Total pages: Read from `totalPages` in response
* Next page: Increment `page` parameter by 1
* Previous page: Decrement `page` parameter by 1

Ensure pagination controls are visible and functional when `totalPages` exceeds 1.
{% endstep %}

{% step %}

#### Build dynamic filtering interfaces

Use facet data to create interactive filtering options:

**For list type facets**:

1. Extract facet values and counts from the response
2. Display as checkboxes or multi-select options
3. Show the count next to each option
4. Update the `filters` parameter when visitors select options

**Example**: Brand facet with values `[["lego", 10], ["playmobil", 5]]` displays as:

* ☐ Lego (10)
* ☐ Playmobil (5)

**For range type facets**:

1. Extract min and max values from the response
2. Display as range sliders or input fields
3. Update the `filters` parameter with appropriate operators when visitors adjust ranges

**Example**: Price facet with `{"min": 5, "max": 100}` displays as a slider from 5 to 100.

Refresh search results by making new API requests whenever visitors modify filter selections.
{% endstep %}
{% endstepper %}


# Search widget events

This feature allows you to listen to events dispatched by the search widget when users perform searches, giving you access to search results and product data outside the widget.

{% stepper %}
{% step %}

### Search event

When users perform searches, there are cases where you'll need access to the returned products (or product IDs) outside the widget.<br>

**Custom event:**

```javascript
const searchEvent = new CustomEvent('abtasty_search', {
    detail: {
        results,
        widgetId, // current widget unique ID
    }
});
```

**Listen to the event:**

```javascript
window.addEventListener('abtasty_search', (event) => {
    const { results, widgetId } = event.detail;
    console.log(widgetId, results);
});
```

{% endstep %}

{% step %}

### Search result event

An event is triggered for each product when it's added to the search results list. Use this to perform actions on individual products.

**Custom event:**

```javascript
const productEvent = new CustomEvent('abtasty_search_result', {
    detail: {
        resultElement: resultHTMLElement,
        index,    // index of the element in the hits array
        widgetId, // current widget unique ID
    }
});
```

**Listen to the event:**

```javascript
window.addEventListener('abtasty_search_result', (event) => {
    const { widgetId, index, resultElement } = event.detail;
    console.log(widgetId, index, resultElement);
});
```

{% endstep %}
{% endstepper %}


# Understanding Autocomplete Suggestions

Provide your visitors with a fast, intuitive search experience by surfacing relevant search suggestions as they type. This guide explains how AB Tasty Search builds, normalizes, and ranks terms for your autocomplete suggestions index.

### Overview

The Autocomplete index (also referred to as the Suggestions index) is a dedicated index that powers the <kbd>/autocomplete</kbd> endpoint. It delivers real-time, highly relevant search terms to visitors as they begin typing in your search bar, reducing friction and helping them find products faster.

To ensure your search suggestions are always accurate and helpful, AB Tasty automatically blends and updates two primary sources of data:

1. **Past Search Queries:** Real search queries typed by your website visitors over the last few weeks.
2. **Catalog-Based Whitelist:** A verified list of allowed terms extracted directly from your active product catalog and custom configurations (such as synonyms).

### How it Works

The autocomplete pipeline runs daily to rebuild your suggestions index with zero-downtime. This means your suggestions stay fresh and reflect both catalog updates and seasonal search trends without interrupting your live site experience.

#### 1. Data Collection and Extraction

Each day, the system retrieves two sets of raw data:

* **Recent Search Volume:** The most recent searches from unique visitors on your site over the past 8 weeks.
* **Current Product Catalog:** The latest version of your connected product catalog.

#### 2. Building the Whitelist (Allowed Terms)

To prevent typos, irrelevant phrases, or broken strings from appearing as suggestions, AB Tasty generates an "allowed" vocabulary (the whitelist) from your product data.

* **Attribute Tokenization:** The system extracts single words and full phrases from key catalog columns (like product names and categories).
* **Synonym Enrichment:** Synonyms configured on your catalog index are automatically integrated into the whitelist.
* **Normalization:** Accents, punctuation, quotes, and double spaces are cleaned up to establish a pristine list of display forms.

#### 3. Cleaning and Merging

Once the search history and whitelist are prepared, they are cross-referenced to finalize the actual terms shown to users:

* **Validation:** A visitor's search query only becomes a suggestion if it successfully matches an allowed term in the catalog-derived whitelist.
* **Standardizing Display:** Suggestions are formatted with proper capitalization and matching catalog accents. Even if many users type a search term in lowercase or without accents, the autocomplete box will display the correct, clean format from your catalog.
* **Plural and Singular Consolidation:** Grammatical variations (like plurals and singular forms) are merged to keep your suggestion dropdown clean and redundant-free.

### Key Features

#### Useful on Day One (Fallback Suggestions)

If you are onboarding a brand new site or have low search volume, your suggestion box won't be empty. AB Tasty automatically injects whitelist-only terms derived from your catalog. This ensures high-value products and categories remain suggestible from your very first visitor.

#### Dynamic Ranking Logic

Suggestions are not presented in a random order. When a user types, AB Tasty ranks suggestions dynamically based on:

* **Popularity (Count):** Suggestions that represent queries typed by a larger number of unique visitors are prioritized.
* **Relevance (Results Returned):** Broader search terms that match more catalog items are preferred.

{% hint style="info" %}
Longer, more specific phrases are favored when search scores are equal.
{% endhint %}


# API


# /search API (v0.4)

This document outlines the usage of the Search API route, which allows for powerful querying and filtering of datasets.

## Endpoint

| Method | URL                                             |
| ------ | ----------------------------------------------- |
| GET    | https\://{identifier}.search.abtasty.com/search |

## Query parameters

All request data is sent as URL query parameters. Nested data uses bracket notation.

Serialization rule (canonical):

* Objects: filters\[field]\[key]=value
* Arrays of scalars: repeat the param: filters\[field]\[]=v1\&filters\[field]\[]=v2
* Arrays of objects: index the array:\
  filters\[field]\[0]\[operator]=>\&filters\[field]\[0]\[value]=10

| Parameter             | Type            | Description                                                                                                                                                                          | Required             | Example                           |
| --------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------- | --------------------------------- |
| text                  | string          | The search query string.                                                                                                                                                             | Yes                  | "toy"                             |
| filters               | object          | An object containing key-value pairs for filtering search results. Each key represents a field to filter on. Values can be strings, arrays of strings, or objects for range queries. | No                   | {"brand": \["lego", "playmobil"]} |
| page                  | integer         | The page number of results to retrieve (0-indexed).                                                                                                                                  | No                   | 0                                 |
| hitsPerPage           | integer         | The number of results to return per page.                                                                                                                                            | No                   | 20                                |
| sort                  | Array of string | Sorting values sent to Meilisearch to sort the search results.                                                                                                                       | No                   | \["price:asc", "name:desc"]       |
| rankingScoreThreshold | float           | A ranking score from 1.0 (perfect match) to 0.0 (no match) indicates relevancy, with higher scores signifying better matches.                                                        | No                   | 0.1                               |
| semanticRatio         | float           | semanticRatio balances semantic search results. Higher values bring documents from further in the semantic space into final results.                                                 | <p><br></p><p>No</p> | 0.3                               |

### filters Object Structure

The filters object supports different types of filters:

* List Filters: For fields where you want to match one or more exact values.
* Format: `{"field_name": ["value1", "value2"]}`
* Example: `"color": ["red", "blue"]`
* Range Filters: For numerical fields where you want to specify a range using operators.
* Format: `{"field_name": [{"operator": "operator_type", "value": number}, {"operator": "operator_type", "value": number}]}`
* Supported Operators: `">"`, `"<"`, `">="`, `"<="`, `"="`
* Example: `"price": [{ "operator": ">", "value": 10 }, { "operator": "<", "value": 20 }]`
* Example: `"rating": [{ "operator": ">=", "value": 4 }]`

## Response Body

The response body is a JSON object with the following properties:

| Property    | Type             | Description                                                                                                                  |
| ----------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| hits        | array of objects | An array of search results, where each object represents a matching item. The structure of each item depends on the dataset. |
| facets      | object           | An object containing aggregated facet information for different fields, useful for building dynamic filtering interfaces.    |
| totalPages  | integer          | The total number of available pages based on the hitsPerPage.                                                                |
| totalHits   | integer          | The total number of search results matching the query and filters.                                                           |
| hitsPerPage | integer          | The number of results returned per page, as specified in the request or defaulted by the API.                                |
| page        | integer          | The current page number of the results.                                                                                      |

### facets Object Structure

The facets object provides information about different fields that can be used for filtering:

* type: Indicates the type of facet ("list" or "range").
* values:
* For "list" type: An array of arrays, where each inner array contains the facet value and its count.
* For "range" type: An object with min and max properties indicating the available range.

## Example Request and Response

### Request

```http
GET https://search-api.abtasty.com/search
  ?index={identifier}_Catalog
  &text=toy
  &filters[brand][]=lego
  &filters[brand][]=playmobil
  &filters[price][0][operator]=%3E
  &filters[price][0][value]=10
  &filters[price][1][operator]=%3C
  &filters[price][1][value]=20
  &filters[color][]=red
  &filters[color][]=blue
  &filters[rating][0][operator]=%3E%3D
  &filters[rating][0][value]=4
  &page=0
  &hitsPerPage=20
  &rankingScoreThreshold=0.1
  &semanticRatio=0.1
  &sort=price:desc
```

### Response

```json
{
  "hits": [
    
   {
      "id": "126455",
      "img_link": "/103446.jpg",
      "link": "/starWarsLego",
      "name": "Star wars lego",
      "price": 120
    },
    {
      "id": "126456",
      "img_link": "/103447.jpg",
      "link": "/playmobilCastle",
      "name": "Playmobil Castle",
      "price": 45.0
    },
    {
      "id": "126457",
      "img_link": "/103448.jpg",
      "link": "/barbieDreamhouse",
      "name": "Barbie Dreamhouse",
      "price": 5.9
    }
  ],
  "facets": {
    "brand": {
      "type": "list",
      "values": [["lego", 10], ["playmobil", 5]]
    },
    "category": {
      "type": "list",
      "values": [["toys", 15], ["games", 8]]
    },
    "price": {
      "type": "range",
      "values": {
        "min": 5,
        "max": 100
      }
    }
  },
  "totalPages": 20,
  "totalHits": 1000,
  "hitsPerPage": 50,
  "page": 1
}

```


# /autocomplete API (v0.2)

This document outlines the usage of the Autocomplete API route, which allows for suggesting search terms based on partial input.

Endpoint

| Method | URL                                                   |
| ------ | ----------------------------------------------------- |
| GET    | https\://{identifier}.search.abtasty.com/autocomplete |

Query Parameters

All request data is sent as URL query parameters.

| Parameter       | Type    | Description                                             | Required | Example |
| --------------- | ------- | ------------------------------------------------------- | -------- | ------- |
| query           | string  | The partial string for which suggestions are requested. | Yes      | a       |
| hits\_per\_page | integer | The maximum number of suggestions to return.            | No       | 5       |

Response Body

The response body is a JSON object with the following property:

| Property    | Type             | Description                                                        |
| ----------- | ---------------- | ------------------------------------------------------------------ |
| suggestions | array of objects | An array of objects, where each object contains a text suggestion. |

## Suggestions Object Structure

Each object in the suggestions array has the following structure:

| Property | Type   | Description                          |
| -------- | ------ | ------------------------------------ |
| text     | string | The text of the proposed suggestion. |

Example Request and Response

## Request

```http
GET https://search-api.abtasty.com/autocomplete?client_id={clientId}&query=a&hits_per_page=5
```

## Response

```json
{
  "suggestions": [
    {
      "text": "brosse a cheveux"
    },
    {
      "text": "baume à levre"
    },
    {
      "text": "rouge à lèvres"
    },
    {
      "text": "baume à lèvres"
    },
    {
      "text": "brosse a dent"
    }
  ]
}
```


# Catalog

Your catalog is the foundation of AB Tasty Commerce. It is the **single shared product source** consumed by every other module, **Recommendations**, **Merchandising** and **Search**. The quality and freshness of your catalog directly determine the quality of the strategies you build on top of it.

This section covers everything from connecting a catalog source, through structuring its datasets and fields, to keeping it continuously up to date.

### The Catalog page

Open **Catalog** in the left navigation to inspect the products currently loaded into Commerce.

<figure><img src="/files/gQm8pZrf2Fb8pZdvINlv" alt=""><figcaption></figcaption></figure>

#### Catalog table columns

The product table lists each product with the following columns:

| Column                   | Description                                                        |
| ------------------------ | ------------------------------------------------------------------ |
| **Image**                | Product thumbnail.                                                 |
| **Name**                 | Product display name.                                              |
| **id**                   | Unique product identifier.                                         |
| **price**                | Product price.                                                     |
| `pageviews_last_30_days` | Number of product-page views in the last 30 days (from analytics). |
| `purchases_last_30_days` | Number of purchases in the last 30 days (from analytics).          |
| `revenues_last_30_days`  | Revenue generated in the last 30 days (from analytics).            |

{% hint style="info" %}
The `*_last_30_days` columns are populated from your connected analytics source. They are also the fields used by default ranking rules such as **Best sellers** and **Most consulted products**.
{% endhint %}

#### Page actions

The toolbar above the table provides:

* **Manage catalog** (gear icon), opens the catalog manager, where you define how your source catalog is imported and create **Smart Tags**. See smart-tags.
* **Display settings**: choose which columns are shown in the table.
* **Filters**: narrow the product list, including filtering by a **Smart Tag**.
* **Search**: the *"Search in your catalog..."* box for finding individual products.

### In this section

| Article                 | What it covers                                                                        |
| ----------------------- | ------------------------------------------------------------------------------------- |
| Connecting a catalog    | Supported sources (Shopify, Magento, Catalog API, CSV…) and how to connect each.      |
| Datasets and fields     | Source, Required and Custom datasets, and Source / Calculated / Enriched field types. |
| Formula fields          | AI-assisted custom fields built with formulas.                                        |
| Smart Tags              | Tag a list of products once and reuse it across strategies and filters.               |
| Catalog synchronization | Keep the Commerce catalog current with its source.                                    |
| Catalog API             | Manage your catalog programmatically without a CMS feed.                              |


# Connecting a Catalog

Before you can build Recommendations, Merchandising or Search strategies, Commerce needs your products. A catalog source is connected from **Settings → Integrations** (or via the **Connect catalog source** card on the **Get started** checklist).

<figure><img src="/files/xEI4ubnQJT6UZ3xQdRv3" alt=""><figcaption></figcaption></figure>

### Supported sources

Commerce can ingest your catalog from any of the following sources:

| Source                        | Notes                                                                                        |
| ----------------------------- | -------------------------------------------------------------------------------------------- |
| **Catalog Feed**              | Custom feed (JSON, XML or CSV) served from a feed URL you control.                           |
| **Shopify**                   | OAuth app install; select collections or all products.                                       |
| **Shopify Markets**           | Region-specific catalogs, pricing, currency and localization.                                |
| **Salesforce Commerce Cloud** | API credentials (Catalog Id, Site Id, Client Id/Secret, API Version).                        |
| **Prestashop**                | Store URL plus admin credentials / API tokens, then the AB Tasty module.                     |
| **Magento**                   | Magento API credentials (Consumer Key/Secret, Access Token/Secret, Store Code/ID, Currency). |
| **Catalog API**               | Programmatic catalog management without a CMS feed. See catalog-api.                         |
| **Google Sheet**              | Shareable sheet, one product per row.                                                        |
| **SFTP Upload**               | Catalog file delivered over SFTP.                                                            |
| **Manual Upload**             | Manual CSV upload, one product per row.                                                      |

{% hint style="info" %}
**Merchandising is not supported with the CSV (Manual Upload) or Google Sheet sources**, only **Recommendations** and **Search** use cases are available with those sources. For full Merchandising support, use a CMS, Catalog Feed, SFTP or Catalog API source.
{% endhint %}

### Connecting from Settings

All sources are managed from the **Integrations** tab of **Account settings**.

The general flow is: open **Settings → Integrations**, find your platform in the **Catalog** section, click **Connect**, then provide the source's credentials or details. The full step-by-step procedure for every source lives in Settings → Integrations.

A summary of what each source needs:

* **Catalog Feed**: choose the feed format (JSON / XML / CSV), provide the feed URL, map attributes (Product ID, name, category, price, image URL, stock status) and set the sync schedule.
* **Shopify**: click **Connect**, authorize the AB Tasty app on Shopify, approve permissions and **Install app**, then select collections and sync frequency (daily recommended).
* **Shopify Markets**: connect, then configure region-specific catalogs, pricing, currency and localization.
* **Salesforce Commerce Cloud**: enter **Catalog Id**, **Site Id**, **Client Id**, **Client Secret** and **API Version**, then validate the connection.
* **Prestashop**: connect, enter the store URL and admin credentials / API tokens, map attributes, then install the AB Tasty module under **Modules & Services**.
* **Magento**: connect and enter the Magento API credentials; category and subcategory sync is automatic, and the catalog refreshes on a recurring schedule (hourly by default).
* **Google Sheet**: paste the shareable sheet URL and grant access; AB Tasty auto-matches columns to standard attributes.
* **SFTP Upload** / **Manual Upload (CSV)**, provide the file (one product per row, attributes in columns) with unique product IDs.

### Minimum catalog fields

Whatever the source, Commerce expects a minimum set of product fields so that strategies, tracking and display work correctly:

| Field                    | Purpose                                                                |
| ------------------------ | ---------------------------------------------------------------------- |
| `ID`                     | Unique product identifier, the key reference for every recommendation. |
| `title`                  | Product display name shown in widgets.                                 |
| `URL`                    | Product page link for click-through tracking.                          |
| `price` + `currency`     | Price and its ISO currency code (EUR, USD…).                           |
| `stock` / `availability` | Controls whether a product is eligible to be displayed.                |
| `categoriesIDs`          | Category identifiers or hierarchy.                                     |
| `createdAt`              | ISO creation date; enables "new arrivals" rules.                       |
| `imageUrl`               | Public HTTPS image URL.                                                |

{% hint style="info" %}
Changing product IDs, attribute names or the catalog structure after connection may break existing strategies. Keep your identifiers stable.
{% endhint %}


# Catalog / CMS connection

To start using Recommendations & Merchandising, you first need to connect your product catalog (often through your CMS or PIM). This ensures that the platform has access to all your products, categories, and attributes.


# Minimum catalog product fields

At a minimum, your product feed should contain:

* A unique **`ID`** for each product.
* **Basic information** such as `title`, `URL`, image, `price`, and `currency`.
* **`Stock` or `availability`** to control whether products can be shown.
* **Category mapping** (`categoriesIDs` or hierarchy).
* **Date of creation** `createdAt` ISO date (to enable rules like "new arrivals").
* `imageUrl`
* Optional:&#x20;
  * `brand`, `gtin`, `mpn`, `attributes` (e.g., `color`, `size`, `material`, `gender`, `age_group`)

When connecting CMS as a catalog source in Recommendations & Merchandising (R\&M), you should be aware of certain standard product attributes that are either mandatory or strongly recommended.&#x20;

### Shopify specifics

| Field(s)                                                      | Required or Recommended? | Reason                                                                           |
| ------------------------------------------------------------- | ------------------------ | -------------------------------------------------------------------------------- |
| `id`, `handle`, `title`                                       | **Required**             | Core identifiers and product name, mandatory for referencing & display           |
| At least one `variant` with: • `price` • `inventory_quantity` | **Required**             | Ensures availability & pricing logic for rules and merchandising                 |
| `created_at`                                                  | **Required**             | Enables “new arrivals” and date-based strategies                                 |
| `images`                                                      | **Required**             | Ensures visual display in recommendations and merchandising                      |
| `body_html` (description)                                     | **Recommended**          | Provides product context, improves UI and SEO                                    |
| `product_type` / `vendor`                                     | **Recommended**          | Useful for filtering, boosting, and organizing catalog rules                     |
| Standard product category (taxonomy)                          | **Recommended**          | Supports category-based rules, navigation, external sync (e.g., Google Shopping) |
| Metafields                                                    | **Recommended**          | Extend schema with custom attributes (e.g., eco\_score, release date)            |

For richer strategies, add `product_type`, `vendor`, category taxonomy, and relevant metafields.

### Prestashop — Minimum Product Schema for R\&M

| Field(s)                                         | Required or Recommended? | Reason                                    |
| ------------------------------------------------ | ------------------------ | ----------------------------------------- |
| `id`, `name`, image                              | **Required**             | Core identification and display           |
| Variant with `price` and `quantity`              | **Required**             | Required for availability & pricing logic |
| `created_at` / `date_add`                        | **Required**             | Enables “new arrivals” strategies         |
| `type_product`                                   | **Recommended**          | To differentiate product behaviors        |
| `description` / `description_short`              | **Recommended**          | For UI/SEO and richer content             |
| Categories (`categories`, `id_category_default`) | **Recommended**          | For category-based rules & filtering      |
| Features / `id_manufacturer`                     | **Recommended**          | For advanced merchandising logic          |
| Variants/attributes (color, size, etc.)          | **Recommended**          | For nuanced rule targeting & filtering    |

### Magento (Adobe Commerce) — Minimum Product Schema for R\&M

| Field(s)                                                                   | Required or Recommended? | Reason                                                                 |
| -------------------------------------------------------------------------- | ------------------------ | ---------------------------------------------------------------------- |
| `id` (entity\_id), `sku`, `name`                                           | **Required**             | Core identifiers and product name, mandatory for referencing & display |
| At least one `price` (regular or final) + `stock_item.qty` / `is_in_stock` | **Required**             | Ensures availability & pricing logic for rules and merchandising       |
| `created_at`                                                               | **Required**             | Enables “new arrivals” and date-based strategies                       |
| `media_gallery_entries` (at least one image)                               | **Required**             | Ensures visual display in recommendations and merchandising            |
| `description` / `short_description`                                        | **Recommended**          | Provides product context, improves UI and SEO                          |
| `type_id` (simple, configurable, virtual, bundle, downloadable)            | **Recommended**          | Helps distinguish product behavior for rules and merchandising         |
| `attribute_set_id` and custom attributes                                   | **Recommended**          | Used for filtering, boosting, and custom business logic                |
| `category_ids`                                                             | **Recommended**          | Supports category-based rules, navigation, and merchandising           |
| `manufacturer` or brand attribute                                          | **Recommended**          | Useful for filters, boosting, and brand-specific strategies            |
| EAV attributes (color, size, material, etc.)                               | **Recommended**          | Allow granular targeting in rules and dynamic filtering                |

### Salesforce Commerce Cloud (SFCC) — Minimum Product Schema for R\&M

| Field(s)                                                                                | Required or Recommended? | Reason                                                                                  |
| --------------------------------------------------------------------------------------- | ------------------------ | --------------------------------------------------------------------------------------- |
| `id` (product\_id), `name`                                                              | **Required**             | Core identifiers and product name, mandatory for referencing & display                  |
| At least one `price` (list\_price, sale\_price) + `inventory` (ATS = Available To Sell) | **Required**             | Ensures availability & pricing logic for rules and merchandising                        |
| `online_flag` / `online_from` / `online_to`                                             | **Required**             | Controls product online visibility and supports “new arrivals” or date-based strategies |
| At least one `image` (via `image_groups`)                                               | **Required**             | Ensures product has visual content for recommendations and merchandising                |
| `short_description` / `long_description`                                                | **Recommended**          | Provides context and enhances UI/SEO                                                    |
| `brand` (custom attribute or classification)                                            | **Recommended**          | Useful for filtering, boosting, or brand-focused strategies                             |
| `primary_category_id` and `classification_category_ids`                                 | **Recommended**          | Supports category-based rules and merchandising                                         |
| `custom_attributes` (e.g., color, size, material)                                       | **Recommended**          | Allow advanced filtering, boosting, and dynamic rules                                   |
| `creation_date` (if available in feed)                                                  | **Recommended**          | Useful for “new arrivals” strategies                                                    |

### Magento — Minimum Product Schema for R\&M

Coming soon&#x20;

*


# Minimum analytics fields

Connect analytics to collect events (via the unified AB Tasty Tag or your analytics tool).

**Core events**

* `view_item` (PDP view)
* `view_item_list` (PLP/list impression)
* `add_to_cart`
* `purchase`\
  Optional: `remove_from_cart`, `view_promotion`, `search`, `begin_checkout`.

**Minimum fields**

* `userId` (or anonymous ID), `sessionId`
* `productId`, `categoryId` (when relevant)
* `quantity`, `revenue` (for purchases)
* `timestamp`

**Why it matters**

* Powers **best sellers, associated products (bought together), trending, top relevant**.
* Enables **A/B testing & performance analytics**.


# Integrating Shopify product catalog

Recommendations & Merchandising integrates seamlessly with your **Shopify store** to help you personalize your shopping experience and boost conversions - without complex setup.

{% hint style="info" %}
This guide walks you through everything you need to get started: from connecting your shop and analytics, to creating and publishing your first personalized strategy - all directly within your Shopify environment.
{% endhint %}

***

**1°/ How to configure your catalog in Recommendations & Merchandising**

Before creating any strategy, your **Shopify product catalog** needs to be connected.

{% hint style="info" %}
This step allows Recommendations & Merchandising to access your product data — including names, images, prices, and availability — so you can display the right products in the right place.
{% endhint %}

→ Follow the link below to set up your catalog connection:<br>

{% embed url="<https://app.gitbook.com/o/iFKI1JaxSfPoiGt4tT2k/s/6Yw9IRJ6KbbucQPwZUCZ/~/changes/322/recommendations-and-merchandising-1/how-tos/how-to-configure-your-shops-integration/how-to-configure-shopify-integration>" %}

***

**2°/ How to connect your analytics integration**

To measure the impact of your strategies, you’ll need to connect your **analytics tool** (e.g., Google Analytics 4 or another supported provider).

{% hint style="info" %}
This ensures that key metrics — such as impressions, clicks, and conversions — are tracked accurately and visible both in your analytics platform and within Recommendations & Merchandising.
{% endhint %}

→ Learn how to link your analytics here:

{% embed url="<https://app.gitbook.com/o/iFKI1JaxSfPoiGt4tT2k/s/6Yw9IRJ6KbbucQPwZUCZ/~/changes/322/recommendations-and-merchandising-1/how-tos/how-to-configure-your-analytics-integrations>" %}

***

**3°/ Get started creating your strategies**

Once your catalog and analytics are connected, it’s time to bring your experience to life.

{% hint style="info" %}
Creating your first **recommendation or merchandising strategy** lets you decide what products to highlight, where to show them, and to whom — all based on your Shopify data.
{% endhint %}

→ Dive into the next steps to learn how to build your first strategy:<br>

{% content-ref url="/pages/5nPXtpVgf8FUSkiKfyLC" %}
[Creating a recommendation](/recommendations-and-merchandising/getting-started/recommendations/creating-a-recommendation)
{% endcontent-ref %}

{% content-ref url="/pages/m0VZV2XTMUorER4glzjN" %}
[Creating a merchandising strategy](/recommendations-and-merchandising/getting-started/merchandising/creating-a-merchandising-strategy)
{% endcontent-ref %}

***

**4°/ Get started publishing your strategies**

Once created, your strategies need to go live on your Shopify store.\
You can deploy them easily through:

* A **dynamic widget** inserted in your Shopify theme
* **Custom placements** managed in your Liquid templates
* Or a **dedicated API integration** for advanced setups

→ Learn more about publishing your strategies

***

**5°/ How to track performance**

After launch, tracking your results helps you understand how your strategies perform and where to improve.\
Analyze engagement and conversion data to refine your setup and maximize business impact — directly from your **Recommendations & Merchandising dashboard** or your **Shopify analytics**.

→ Explore the performance tracking guide


# Integrating Magento store

Enhance your store with Recommendations & Merchandising

Recommendations & Merchandising integrates seamlessly with your **Magento store** to help you personalize your shopping experience and boost conversions — without complex setup.

{% hint style="info" %}
This guide walks you through everything you need to get started: from connecting your shop and analytics, to creating and publishing your first personalized strategy — all directly within your Magento environment.
{% endhint %}

## **1°/ How to configure your catalog in Recommendations & Merchandising ?**&#x20;

Before creating any strategy, your product catalog needs to be connected.

{% hint style="info" %}
This step allows Recommendations & Merchandising to access your Magento product data (names, images, prices, availability) — essential to display the right products in the right place.
{% endhint %}

→ Follow the link below to set up your catalog connection:

{% embed url="<https://app.gitbook.com/o/iFKI1JaxSfPoiGt4tT2k/s/6Yw9IRJ6KbbucQPwZUCZ/~/changes/322/recommendations-and-merchandising-1/how-tos/shops-integration/how-to-configure-magento-integration>" %}

## **2°/ How to connect your analytic integration?**&#x20;

To measure the impact of your strategies, you’ll need to connect your analytics tool.

{% hint style="info" %}
This ensures that key metrics — such as impressions, clicks, and conversion rate — are tracked accurately and visible both in your analytics platform and within Recommendations & Merchandising.
{% endhint %}

→ Learn how to link your analytics here:

{% content-ref url="/pages/BUFw5I04biy4XnjzVZ5s" %}
[How to configure your analytics integration](/recommendations-and-merchandising/how-tos/how-to-configure-your-analytics-integration)
{% endcontent-ref %}

## **3°/ Get started creating your strategies**

Once your shop and analytics are connected, it’s time to bring your experience to life.

{% hint style="info" %}
Creating your first **recommendation** or **merchandising strategy** lets you decide *what products to highlight*, *where to show them*, and *to whom* — based on data, not guesswork.
{% endhint %}

→ Dive into the next steps to learn how to build your first strategy:

{% columns %}
{% column %}
{% content-ref url="/pages/5nPXtpVgf8FUSkiKfyLC" %}
[Creating a recommendation](/recommendations-and-merchandising/getting-started/recommendations/creating-a-recommendation)
{% endcontent-ref %}
{% endcolumn %}

{% column %}
{% content-ref url="/pages/m0VZV2XTMUorER4glzjN" %}
[Creating a merchandising strategy](/recommendations-and-merchandising/getting-started/merchandising/creating-a-merchandising-strategy)
{% endcontent-ref %}
{% endcolumn %}
{% endcolumns %}

## **4- Get started publishing your strategies**

Once created, your strategies need to go live on your Magento store.

{% hint style="info" %}
Choose how to deploy them — through a custom widget, a mix of dynamic placements, or a full API integration — depending on your level of customization and control.
{% endhint %}

{% content-ref url="/pages/byj62R6qIHDFXtuQ6nw5" %}
[How to deploy a strategy](/recommendations-and-merchandising/how-tos/how-to-deploy-a-strategy)
{% endcontent-ref %}

## **5- How to track performance ?**

After launch, tracking results helps you understand how your strategies perform and where to improve.

{% hint style="info" %}
Analyze engagement and conversion data to refine your setup and maximize impact.
{% endhint %}

{% content-ref url="/pages/7S1roRv1x8gkRmhRGLch" %}
[How to track performance](/commerce/recommendations/how-to-track-performance)
{% endcontent-ref %}


# How to configure a CSV integration

&#x20;The CSV catalog integration lets you manage your product catalog faster than a native CMS integration with full autonomy and no dependency on other internal teams.

{% hint style="danger" %}
With CSV integration, Merchandising features are not supported - only Recommendations and Search use cases are available.
{% endhint %}

## **Prerequisites**

Make sure you have:

* A CSV file containing your product data, with each product on a separate row and each attribute in a column.
* Unique product identifiers (e.g. SKU, GTIN, or MPN) and other required information (see below)

## **CSV integration**

{% stepper %}
{% step %}

### **Upload your CSV**

1. Go to **Settings → Integrations** in your AB Tasty dashboard
2. Select **CSV Catalog** from the available options
3. Choose your file and upload it manually — or set up a recurring URL import
4. Wait for the import summary to validate that all products were parsed correctly
   {% endstep %}

{% step %}

### **Map your fields**

During the upload, check that your CSV columns match AB Tasty’s expected attributes:

| CSV field                      | Description                                                                                                                                                        | Required |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| `product_id`                   | Unique identifier (SKU). Used as the key reference for all recommendations, merchandising rules, and search indexing. Must remain stable across updates.           | ✅        |
| `name`                         | Product name displayed in recommendations, search results, and merchandising carousels. Should be concise and user-friendly.                                       | ✅        |
| `url`                          | Direct product page URL used for click-through tracking and redirecting users from recommendation widgets or search results.                                       | ✅        |
| `image_url`                    | Product image shown in recommendation widgets, merchandising placements, and search cards. High-quality public URL required.                                       | ✅        |
| `price`                        | Current selling price used to display price in widgets and for sorting or filtering rules in merchandising and search (e.g., “lowest price first”).                | ✅        |
| `currency`                     | ISO currency code (EUR, USD, etc.) associated with the price. Ensures correct display and aggregation across multi-currency catalogs.                              | ✅        |
| `category`, `brand`, `variant` | Classification and descriptive metadata used to refine recommendations (e.g., “similar products”), define merchandising groups, and enable faceted search filters. | Optional |
| `stock`                        | Current stock quantity or availability status. Used to hide unavailable items from recommendation carousels or search results.                                     | Optional |
| `active`                       | Boolean field indicating if the product is active and should be visible in recommendations, merchandising, and search.                                             | Optional |
| {% endstep %}                  |                                                                                                                                                                    |          |

{% step %}

### **Manage your sync**

* The CSV integration requires a **manual upload** each time you want to update your catalog.
* This approach allows you to **edit and update your catalog instantly**, without depending on internal tech teams or automated connectors.
* You can re-upload your file as often as needed - after each modification in your product list, attributes, or stock levels.
* Ideal for **quick tests, seasonal updates, or temporary catalogs** before moving to a more automated integration (API or CMS).

{% hint style="info" %}
Be cautious when editing your CSV: if product IDs, attribute names, or structures change, it may break existing strategies or recommendations relying on that data.
{% endhint %}
{% endstep %}

{% step %}

### **Validate your integration**

After synchronization:

* Check the **Catalog** tab in your dashboard to confirm your data appears
* Verify prices, images, and categories are correctly formatted
* Test your **recommendation strategies** using products from your CSV

{% endstep %}
{% endstepper %}

## **Common issues**

| Issue             | Cause                        | Fix                                    |
| ----------------- | ---------------------------- | -------------------------------------- |
| File upload fails | Wrong delimiter or encoding  | Re-export and use consistent delimiter |
| Missing products  | Duplicate or empty SKUs      | Ensure unique product IDs              |
| Incorrect prices  | Wrong decimal or text format | Use numeric format only                |
| Broken images     | Invalid URLs                 | Use public HTTPS image links           |

## **Best practices**

* Prepare files in **Google Sheets or Excel**, export to CSV
* Check data consistency and completeness before upload


# How to configure a Google Sheet Integration

The **Google Sheet catalog integration** lets you manage your product data in a collaborative spreadsheet that syncs with your Reco & Merch environment.

{% hint style="danger" %}
Merchandising is not supported with the Google Sheet catalog integration
{% endhint %}

## Prerequisites

Make sure you have:

* An **active AB Tasty Recommendations & Merchandising** account
* Access to a **Google account** with Drive permissions
* A properly formatted Google Sheet with one product per row and attributes in columns (see below)

{% hint style="info" %}
Each product should be appears as a row, and each attribute (price, stock, brand, etc.) as a column.
{% endhint %}

## Google sheet integration

{% stepper %}
{% step %}

### Connect your Google Sheet

1. Go to **Settings → Integrations** in your AB Tasty dashboard.
2. Select **Google Sheet Catalog** from the list of integrations.
3. Paste the **Google Sheet link (shareable URL)** and grant “Viewer” or “Editor” access.
4. Validate the column mapping - AB Tasty will match your fields to its standard attributes (product id, name, price, etc.).
5. Click **Connect** to initialize the catalog import.

{% hint style="info" %}
Make sure the Sheet remains shared and accessible — private or deleted files will break the sync.
{% endhint %}
{% endstep %}

{% step %}

#### Expected data structure

| **Column name**                | **Description (Reco, Merch & Search context)**                           | **Required** |
| ------------------------------ | ------------------------------------------------------------------------ | ------------ |
| `product_id`                   | Unique product identifier (SKU). Key used by all algorithms and rules.   | ✅            |
| `name`                         | Product name displayed in recommendations and search results.            | ✅            |
| `url`                          | Product page URL for click tracking and redirection.                     | ✅            |
| `image_url`                    | Image displayed in recommendation widgets and search cards.              | ✅            |
| `price`                        | Product price used for display, sorting and boosting rules.              | ✅            |
| `currency`                     | ISO code (EUR, USD, etc.) used to display the correct price.             | ✅            |
| `category`, `brand`, `variant` | Metadata used for grouping, filtering and similarity rules.              | Optional     |
| `stock`                        | Availability or stock quantity.                                          | Optional     |
| `active`                       | Boolean defining if the product is active in recommendations and search. | Optional     |
| {% endstep %}                  |                                                                          |              |

{% step %}

### Manage updates

* Updates are made **manually** in the Google Sheet — any edit in the file will be reflected at the next sync.
* You can re-sync manually from the integration tab or wait for the next automatic import.
* Avoid changing column headers or deleting mandatory fields, as this may **break your existing strategies**.

{% hint style="info" %}
&#x20;The integration is ideal for testing, small catalogs, or simple setups — not for production environments with frequent updates.
{% endhint %}
{% endstep %}
{% endstepper %}

## Best practices

* Keep your Google Sheet clean and consistent (no merged cells or extra rows).
* Use **UTF-8 encoding** if exporting/importing the file.
* Lock column names once validated.
* Duplicate your Sheet before structural edits.
* When scaling, consider migrating to a **CSV or API catalog integration**.


# How to set up custom integration

## How to set up custom integration

Connect your custom e-commerce platform or unique business system with AB Tasty Recommendations & Merchandising using flexible integration options. Custom integration provides the versatility needed for specialized platforms, legacy systems, or unique business requirements.

## Prerequisites

Before setting up custom integration, ensure you have:

* Active AB Tasty Recommendations & Merchandising account
* Technical understanding of your e-commerce platform architecture
* Access to your system's API endpoints or data export capabilities
* Development resources for implementing custom integration logic

## Configure a custom integration

{% stepper %}
{% step %}

### Access custom integration options

Navigate to the integrations interface to explore custom connection possibilities.

1. Log into your AB Tasty Recommendations & Merchandising dashboard
2. Click **SETTINGS** in the left sidebar navigation
3. Select the **Integrations** tab from the settings options
4. Review the **CMS** section for custom integration options
5. Consider **Catalog feed** or **Salesforce Commerce Cloud** as starting points for custom implementations
   {% endstep %}

{% step %}

### Choose integration method

Select the most appropriate integration approach based on your technical requirements and system capabilities.

#### API-based integration

Use AB Tasty's APIs for real-time data synchronization and dynamic recommendation delivery:

* Real-time product catalog updates
* Dynamic customer behavior tracking
* Live recommendation requests and responses
* Suitable for modern platforms with robust API capabilities

#### Data feed integration

Implement scheduled data transfers for batch processing and periodic updates:

* CSV, JSON, or XML file exports from your e-commerce system
* Scheduled uploads to AB Tasty's data processing pipeline
* Ideal for legacy systems or platforms with limited API access

#### Hybrid integration approach

Combine multiple methods to optimize different aspects of the integration:

* Use data feeds for product catalog synchronization
* Implement API calls for real-time user behavior tracking
* Balance performance, reliability, and development complexity
  {% endstep %}

{% step %}

### Configure data mapping

Establish the connection between your custom platform data and AB Tasty's standardized format.

#### Map product attributes

Define how your platform's product data translates to AB Tasty requirements:

* **Product ID** - unique identifier for each item in your system
* **Product name** - display name for recommendations
* **Category** - hierarchical product categorization or taxonomy
* **Price** - current selling price with currency information
* **Image URL** - high-quality product images accessible via web URLs
* **Stock status** - availability information and inventory levels
* **Custom attributes** - additional fields specific to your business needs

#### Configure customer data integration

Set up customer behavior tracking and profile synchronization:

* User identification methods (email, customer ID, session tokens)
* Behavioral event tracking (page views, purchases, cart additions)
* Customer segmentation data for personalized recommendations
* Privacy compliance and data protection measures
  {% endstep %}

{% step %}

### Implement technical integration

Develop the technical components needed to connect your system with AB Tasty.

#### Set up data export processes

1. Create automated processes to extract product and customer data from your platform
2. Format data according to AB Tasty's specification requirements
3. Implement error handling and data validation to ensure data quality
4. Schedule regular data synchronization to keep information current

#### Develop API integration

1. Implement API calls to AB Tasty's recommendation endpoints
2. Handle authentication and security protocols for API access
3. Build request/response processing logic for recommendation delivery
4. Create fallback mechanisms for when API calls fail or timeout

#### Configure tracking implementation

1. Add AB Tasty tracking codes to your website templates
2. Implement event tracking for user behavior and recommendation interactions
3. Set up conversion tracking for measuring recommendation effectiveness
4. Test tracking accuracy across different user scenarios and device types
   {% endstep %}

{% step %}

### Test custom integration

Validate your integration implementation to ensure reliable operation and accurate data flow.

#### Verify data synchronization

1. Test product data import to confirm all attributes are mapped correctly
2. Validate that inventory updates reflect accurately in recommendation filters
3. Check that new products appear in AB Tasty within expected timeframes
4. Confirm that pricing and promotional information updates properly

#### Test recommendation delivery

1. Verify that recommendation API calls return relevant product suggestions
2. Test recommendation display across different pages and user contexts
3. Confirm that recommendation links direct users to correct product pages
4. Validate that recommendations respect your filtering rules and business logic

#### Validate tracking accuracy

1. Test user behavior tracking to ensure events are recorded correctly
2. Verify that recommendation clicks and conversions are attributed properly
3. Check that customer segmentation data is processed accurately
4. Confirm that privacy and consent preferences are respected
   {% endstep %}
   {% endstepper %}


# Reference


# Catalog API

This API allows you to manage your product catalog dynamically, bypassing the traditional CMS feed integration. The Catalog API acts as a separate integration type and is visible in the integrations settings like other integration methods.

{% hint style="info" %}
The Catalog API cannot work alongside a standard catalog integration. You must choose to use either the Catalog API or a catalog Feed/CMS integration for your catalog management.
{% endhint %}

### Catalog API authentication

To manage your catalog securely, the API uses a dedicated API key that is only authorized to manage the catalog. The standard recommendation API key does not have permission to edit the catalog.

To use the Catalog API endpoints, you must generate a **Catalog API key** and authenticate all your requests with it.

```
curl 'https://api-catalog.abtasty.com/ENDPOINT' \
-H 'authorization: Bearer CATALOG_API_KEY'
```

### Catalog structure management

#### Catalog item fields requirements

Catalog items are represented as objects that must contain the following fields:

* **Mandatory fields**: Every catalog item must include the following fields:
  * **`id`** : the unique ID of the item. It should be a `string` of 40 characters maximum.
  * **`is_recommendable`**: a true/false `boolean` indicating if your product can be recommended.
  * **`name`**: the display name of the item. It should be a `string` or `null`.
  * **`absolute_link`**: the PDP url of the item. It should be a `string` or `null`.
  * **`img_link`**: the main image url of the item. It should be a `string` or `null`.
  * **`price`**: the price of the item. It should be a `number` or `null`.
  * **`categories_ids`**: the categories of the item. It should be a `array of string` or `null`.
* **Required to connect with your analytics solution:** These fields are the keys that will be used to link your analytics events to your catalog items. [Learn more on analytics documentation](/recommendations-and-merchandising/how-tos/how-to-configure-your-analytics-integration)
  * **`item_purchase_key`**: an identifier accessible in your `purchase` event properties that will be the link between the purchase event and the item. Product id or product key is often used here. It should be an `array of string` or `null`.
  * **`item_pageview_key`**: an identifier accessible in your `pageview` event properties that will be the link between the pageview event and the item. Product canonical url or product id is often used here. It should be an `array of string` or `null`.
* **Custom fields**: You can define as many custom fields as you need by adding them to the payload. Each field sent in the payload will be dynamically added to your catalog schema.

*Example of a catalog item object:*

```
{
    // Mandatory fields
    "id": "my-unique-id",
    "is_recommendable": true,
    "name": "My product name",
    "absolute_link": "https://e-commerce.com/p/my-product-url",
    "img_link": "https://cdn.e-commerce.com/p/my-product/main-image",,
    "price": 14.02,
    "categories_ids": ["category_A", "category_B"],
    // Required for analytics link
    "item_purchase_key": ["my-purchase-item-key"],
    "item_pageview_key": ["https://e-commerce.com/p/my-product-url"],
    // Custom fields
    "custom_field_1": "xyz",
    "color": "red",
    "availability_per_shop": ["001": true, "002": false, "003": true],
    ...
}
```

#### Dynamic catalog schema & typing constraints

Catalog API schema is dynamic. When sending product data through the API, catalog item fields are accepted and created dynamically based on your payload.

The API strictly enforces data types. A custom field's data type is determined by the first value sent through the API. For exampl&#x65;*: if you create a product with the field "color" and the value "red", a catalog field named "color" is automatically created and assigned the type "string". All future products with a field "color" should now have either an empty value or a string value.*&#x20;

#### Supported fields types

* String
* Number
* Boolean
* Array of string \[String]
* Object of strings \[String:String]
* Object of numbers \[String:Number]
* Object of booleans \[String:Boolean]

### Catalog API Endpoints (v1)

{% hint style="info" %}
Base domain is `https://api-catalog.abtasty.com/`
{% endhint %}

#### Add or replace a product

`PUT /indexes/catalog/{itemID}`

Description: Use this endpoint to add a new product or entirely replace an existing product in the catalog based on its `itemID`.

Payload example:

```
{
    "id": "my-unique-id",
    "is_recommendable": true,
    "name": "My product name",
    "absolute_link": "https://e-commerce.com/p/my-product-url",
    "img_link": "https://cdn.e-commerce.com/p/my-product/main-image",,
    "price": 14.02,
    "categories_ids": ["category_A", "category_B"],
    "item_purchase_key": ["my-purchase-item-key"],
    "item_pageview_key": ["https://e-commerce.com/p/my-product-url"],
    "custom_field_1": "xyz",
    ...
}
```

#### Delete a product

`DELETE /indexes/catalog/{itemID}`

Description: Deletes a single product from the catalog matching the specified `itemID`.

Payload example:

```
{
    "id": "my-unique-id",
}
```

#### Delete all products

`DELETE /indexes/catalog`

Description: Deletes all products from the catalog while keeping in memory the existing schema.

Payload: null

#### Delete a catalog field

`DELETE /indexes/catalog/schema/{fieldID}`

Description: Deletes a catalog field from the catalog schema matching the specified fieldID.

If a field was created with the wrong type, use this endpoint to remove it. Since field types cannot be changed after creation, you will need to recreate the field with the correct type.

#### Batch operations

`POST /indexes/catalog/batch`

Description: This endpoint allows you to add, replace, or delete multiple products in the catalog using a single API request.

Batch size limit: Payload size should be less than 50MB and maximum 10 000 operations per call.

Payload example:

```
[
  {
    "operation":"create-replace",
    "product": {
        "id": "my-unique-id",
        "is_recommendable": true,
        "name": "My product name",
        "absolute_link": "https://e-commerce.com/p/my-product-url",
        "img_link": "https://cdn.e-commerce.com/p/my-product/main-image",,
        "price": 14.02,
        "categories_ids": ["category_A", "category_B"],
        "item_purchase_key": ["my-purchase-item-key"],
        "item_pageview_key": ["https://e-commerce.com/p/my-product-url"],
        ...
    }
  },
  {
    "operation":"delete",
    "product":{ "id": "my-unique-id-2" }
  },
  ...
]
```

### Catalog synchronization recurrence

When building your integration with Catalog API, be aware of the following technical limitations and synchronization behaviors:

* Catalog API operations are validated synchronously.
* The catalog visible in the platform and used for your strategy results is only updated after a synchronization job runs, not after each API call. By default, synchronization runs once per day. The update frequency can be increased according to your needs.


# Dynamic contextual variables

Dynamic contextual variables are the **real-time inputs** that power:

* **Personalization** (based on viewed, bought, or carted products)
* **Dynamic filtering and rule application** (brand, category, stock, etc.)
* **Algorithm scoring** (via `recency`, `frequency`, `score`)
* **User segmentation and localization** (`country`, `language`, `device_type`)

The table below lists the Dynamic contextual variables:

| Variable            | Type           | Description                                                                                                 | Example                                                                     |
| ------------------- | -------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| **`page_type`**     | string         | Identifies the type of page currently viewed. Used to adapt recommendations or merchandising logic.         | `"homepage"`, `"category"`, `"product"`, `"cart"`, `"checkout"`, `"search"` |
| **`viewed_items`**  | array          | List of product IDs viewed by the user during the current session or historically.                          | `["SKU123", "SKU456"]`                                                      |
| **`bought_items`**  | array          | List of product IDs previously purchased by the user.                                                       | `["SKU987"]`                                                                |
| **`cart_items`**    | array          | List of product IDs currently in the user’s cart.                                                           | `["SKU111", "SKU222"]`                                                      |
| **`array_item_id`** | array          | Input list of item IDs dynamically passed into a strategy (for example, “items viewed” or “items bought”).  | `["SKU123", "SKU456"]`                                                      |
| **`referrer`**      | string         | URL of the previous page; used to infer user intent or navigation path.                                     | `"https://www.google.com"`                                                  |
| **`recency`**       | number         | Time elapsed since the user’s last interaction (view, add\_to\_cart, or purchase). Used to weigh freshness. | `24h`, `3d`                                                                 |
| **`frequency`**     | number         | Number of user interactions (views, clicks, purchases) over a given period.                                 | `5`                                                                         |
| **`monetary`**      | number         | Total monetary value associated with the user’s purchases.                                                  | `250.00`                                                                    |
| **`segment`**       | string / array | Dynamic segment assigned to the user (e.g., VIP, returning, new).                                           | `["returning_user", "FR"]`                                                  |
| **`device_type`**   | string         | Device detected in the current session.                                                                     | `"mobile"`, `"desktop"`                                                     |
| **`country`**       | string         | User’s detected country based on IP or site configuration.                                                  | `"FR"`                                                                      |
| **`currency`**      | string         | Currency currently displayed on the site.                                                                   | `"EUR"`                                                                     |
| **`language`**      | string         | Language of the current page or session.                                                                    | `"en"`, `"fr"`                                                              |
| **`session_id`**    | string         | Unique identifier for the current browsing session.                                                         | `"session-abc123"`                                                          |
| **`anonymous_id`**  | string         | Persistent anonymous identifier used for non-logged users (cookie, localStorage, or cookieless ID).         | `"anon-9876"`                                                               |
| **`score`**         | number         | Relevance score computed by the recommendation algorithm for a given item.                                  | `0.87`                                                                      |
| **`rule_id`**       | string         | ID of a dynamic filter or business rule applied during recommendation computation.                          | `"filter-brand-exclude-Nike"`                                               |


# Datasets and fields

AB Tasty Recos and Merch uses datasets and fields to define the data model and interact with.

The configuration of fields in datasets it's a step of process configuration of your AB Tasty R\&M site.

## Datasets

Datasets define types for variables in your AB Tasty R\&M site.&#x20;

There are three types of datasets : *Source*, *Required*, *Custom.*

* **Source datasets** : These datasets are automatically created for each integration you have. They’ll allow you to look into your datas directly from recos & merch and to check the different source fields.
* **Required datasets** : These datasets are automatically created (also according to your integrations) and cannot be deleted. You will unlock them once your done the integration for the according raw data. You can edit and preview its by creating and editing fields in those datasets.
  * *Item* : the dataset for the data model of your catalog. Settings-up with the catalog integration.&#x20;
  * *Pageview* : the dataset for pageviews events. Settings-up with the analytics integration
  * *Purchase* : the dataset for purchases events. Settings-up with the analytics integration
* **Custom datasets** : These datasets are created by you to define a new model of data. You can create, edit, preview and delete it. For example :
  * *User* : the dataset for user data model.&#x20;
  * *Category* : Used for merchandising strategies to deploy on categories of your CMS.&#x20;

## Fields

A field is used to interact with a source data to create a dataset column. Each field is linked to a dataset. It is used to change the source data through a Formula and set the result in a column of the dataset

There are three types of fields : Source, Calculated, Enriched.

* **Source field** : Fields retrieved from the integration that cannot be edited.
* **Calculated field** : Fields added and calculated using formulas that will be used in the platform and algorithms. They can be edited. A calculated field can define its formula with other calculated fields of the dataset and source fields of the source dataset linked to the dataset.&#x20;
* **Enriched field** : Fields calculated by AB Tasty that cannot be edited. An enriched field can be its formula with other enriched fields and calculated fields of the dataset.


# Enriched fields

Attributes added to the product catalog to make it richer than the original CMS/PIM feed. They are typically imported from external systems, connected services, or manually added by the merchant.

**Examples**:

* `eco_score` → imported from a sustainability API or custom attribute.
* `material` / `composition` → detailed product attributes from PIM.
* `lifecycle_stage` (e.g., “Spring collection”, “Back-to-School”) → defined by merchandising teams.
* `discount_flag` → imported from promotions system.
* `gender`, `age_group`, `style` → used for filtering or targeting.

Enriched fields allow finer control of merchandising rules. They let you tailor strategies to branding, campaign, or compliance needs (e.g., *boost eco-friendly products*, *exclude alcohol for under-18 users*).


# Calculated fields

Attributes automatically computed by R\&M from existing product data (catalog + signals). They don’t exist natively in the catalog but are derived through rules or formulas.

**Examples**:

* `is_new_last_30days` → calculated from `created_at` (true if the product was created in the last 30 days).
* `relevance_score` → composite score combining conversion rate, stock, recency.
* `sales_last_30d` → number of purchases in the last 30 days, based on analytics events.
* `views_last_7d` → number of PDP views in the last 7 days.

Calculated fields turn raw catalog and analytics data into actionable signals. They enable rules like *New Arrivals*, *Trending Products*, or *Top Relevant*.


# Formula Fields (IA)

Create custom fields directly in your catalog - no need to edit your source file. Use formulas to calculate values, combine fields, or create new attributes, with help from AI.

### What you can do ?

You can&#x20;

* **Compute values** (e.g. margin, discount, VAT…),&#x20;
* **Define fields** (e.g. brand + product name)
* **Create conditions** (e.g. flag out-of-stock items)&#x20;
* **Normalize data** (e.g. round prices, format text)

### How to use it Fields ?

{% stepper %}
{% step %}

#### Go to Catalog > Fields

* Click **➕ Add Formula Field**
* Choose a name and a field type (number, string, boolean, date)
  {% endstep %}

{% step %}

#### Write your formula

You can either:

* Type it manually using field names like `{{price}}`, `{{brand}}`, etc.
* Or click **✨ Ask AI** and describe what you want in plain English or French.

**Examples**

```
({{price}} - {{cost_price}}) / {{price}}      → margin
CONCAT({{brand}}, " ", {{name}})             → combined title
IF({{stock}} == 0, "OUT", "IN")              → stock flag
```

{% endstep %}

{% step %}

#### Check your result

* A preview shows up to 10 sample rows
* Errors appear in red (wrong field, missing parenthesis, etc.)
  {% endstep %}

{% step %}

#### Save

Once validated, your new field is added to your catalog and updated automatically during each sync
{% endstep %}
{% endstepper %}

### How to use AI Fields Assistant ?

Describe what you want, for example :

```
Prompt: Create a margin percentage between price and cost price.
AI: ({{price}} - {{cost_price}}) / {{price}}
```

Another example:&#x20;

```
Prompt: Why is my formula not in % unit ?
```

The AI will explain and fix it.

### Best practices

* Keep field names consistent (`price`, `cost_price`, etc.)
* Always use preview before saving
* Use `ROUND()` for numeric fields
* Use quotes for text values (“OUT”, “IN”)
* Avoid spaces or special characters in field names

### Notes & limits

* Works only with fields in your current catalog
* No cross-table formulas yet
* Up to 200 characters per formula
* Available for **Editor** and **Admin** roles only

### Example use cases

| Goal               | Formula                                    | Result         |
| ------------------ | ------------------------------------------ | -------------- |
| Calculate margin   | `({{price}} - {{cost_price}}) / {{price}}` | 0.25           |
| Label stock status | `IF({{stock}} == 0, "OUT", "IN")`          | “IN”           |
| Build SEO title    | `CONCAT({{brand}}, " ", {{name}})`         | “Nike Air Max” |
| Round price        | `ROUND({{price}}, 2)`                      | 49.99          |


# Smart tags

Smart Tags let you manually group catalog items under custom labels and reuse those groups as filters in your recommendation strategies. Instead of maintaining hardcoded product lists or complex feed rules, you define a tag once and apply it across any number of customizations.

### How Smart Tags work

When you create or update a Smart Tag, related products will be enriched with this new tag automatically. The smart tag appears in the catalog alongside other fields and can be used in the strategy builder.

{% hint style="info" %}
Smart Tags are not immediately visible in the catalog after creation or update. They appear once the automatic catalog synchronization has been completed, which can take up to a few hours.
{% endhint %}

<figure><img src="/files/LHDReQESBWatlP8bwIV0" alt=""><figcaption></figcaption></figure>

### Managing Smart Tags

#### Create a Smart Tag

1. Navigate to **Catalog > Manage Catalog > Smart Tags**.
2. Click **New Tag**.
3. Enter a name
4. Upload a CSV list of item ids to tag

   **CSV format requirements:**

   \- One column (optional header row)

   \- Each row contains a single product ID.\
   [Download the CSV template](https://drive.google.com/uc?export=download\&id=1pjNmJU_5KdpOPgMnz4XHtzHHYXeHJU7g)

Only items whose IDs match existing catalog entries are added to the tag. Any unrecognized IDs are silently skipped.

#### Rename a Smart Tag

1. In **Catalog > Smart Tags**, click the tag you want to rename.
2. Edit the name inline and save.

The updated name is propagated automatically to all related items at the next synchronization.

#### Delete a Smart Tag

1. In **Catalog > Smart Tags**, select the tag.
2. Click **Delete** and confirm in the modal.

{% hint style="danger" %}
Deleting a Smart Tag doesn't remove it from existing strategies and customizations. Review which strategies reference the tag before deleting it.
{% endhint %}

### Using Smart Tags in the strategy builder

Smart Tags are available inside any **Customization** in the strategy builder.

1. Open a strategy and navigate to a Customization.
2. In the filter panel, select **Smart Tag**.
3. Choose the tag you want to filter on.
4. Save the customization.

The Smart Tag can be used across multiple strategies and customizations at the same time.

<figure><img src="/files/RwEUIXxKBYdoFREJK7oh" alt=""><figcaption></figcaption></figure>

### FAQ

**Does a Smart Tag appear immediately after I create it?**\
No. Smart Tags require a catalog synchronization to become visible. The sync is triggered automatically when you create or update a tag.

**Can I apply the same Smart Tag across multiple strategies?**\
Yes. Smart Tags are reusable across any number of strategies and customizations.

**What happens to a Smart Tag if I re-import my catalog?**\
Smart Tags are preserved for items whose product IDs match the re-imported catalog. Items that no longer exist in the re-imported catalog lose their tags.


# Rules


# Creating rules: boost and bury

**Boost & Bury** is a global, catalog-wide rules area in Commerce. It lives under **Rules → Boost & Bury** in the left navigation. A Boost & Bury rule promotes or demotes a set of products *everywhere*, across every strategy that uses your catalog, rather than inside a single strategy. Use it to give business priorities (a seasonal push, a brand deal, a product you want out of the way) a consistent, catalog-level nudge.

{% hint style="info" %}
**What changed:** in earlier tooling, promoting and demoting products was done implicitly with in-strategy actions (Pin to force a product to the top, Sort/Exclude to push it down). Commerce keeps those in-strategy actions *and* adds a dedicated **Boost & Bury** Rules section with explicit **Major / Moderate / Minor** strength levels. See Pins vs. Boost & Bury below.
{% endhint %}

### The Boost & Bury rules list

<figure><img src="/files/xLPOjFhzkapNE42Q3P5f" alt=""><figcaption></figcaption></figure>

Across the top of the list you have:

| Control                     | What it does                                  |
| --------------------------- | --------------------------------------------- |
| **New Boost & Bury rule +** | Opens the **Create Boost & Bury rule** modal. |
| **Group By**                | Groups the list (for example by type).        |
| **Filters**                 | Narrows the list by rule attributes.          |
| Search                      | Finds a rule by name.                         |

The table itself has these columns:

| Column         | Meaning                               |
| -------------- | ------------------------------------- |
| **Rule Name**  | The name you gave the rule.           |
| **Type**       | Whether it is a boost or a bury rule. |
| **Start Date** | When the rule begins to apply.        |
| **End Date**   | When the rule stops applying.         |

### Create a Boost & Bury rule

Click **New Boost & Bury rule +** to open the **Create Boost & Bury rule** modal.

<figure><img src="/files/tiR7ZYSRPMW7c6hWx4Nn" alt=""><figcaption></figcaption></figure>

The modal has three parts:

1. **Rule name**: a free-text input. Give the rule a name that explains its intent (for example "Summer collection boost").
2. **Rule**: a dropdown that sets the *direction* and *strength* of the effect (see below).
3. **Apply rule on**: a condition builder that selects *which* products the rule affects. Pick a property from the **Select…** dropdown, keep the operator **Is**, then add one or multiple values in the value field.

When you are done, click **Save and apply**. (Use **Cancel** to discard.)

{% hint style="warning" %}
💡 **Boost changes will only be applied at the next catalog update.** Boost & Bury rescores products as part of catalog synchronization, so a new or edited rule does not change rankings instantly, it takes effect when the catalog next refreshes. You can follow synchronization in the Health monitor.
{% endhint %}

#### The Rule dropdown

<figure><img src="/files/dCTi8EtdGducnoG5u4eF" alt=""><figcaption></figcaption></figure>

The **Rule** dropdown combines two ideas:

* **Direction**: **Boost** promotes the matching products *toward the top* of rankings; **Bury** demotes them *toward the bottom*.
* **Strength**: **Major**, **Moderate**, or **Minor** controls how strong the nudge is. Major has the largest effect on position; Minor is a gentle adjustment.

| Option             | Effect                                               |
| ------------------ | ---------------------------------------------------- |
| **Major Boost**    | Strongly promote matching products toward the top.   |
| **Moderate Boost** | Moderately promote matching products.                |
| **Minor Boost**    | Lightly promote matching products.                   |
| **Major Bury**     | Strongly demote matching products toward the bottom. |
| **Moderate Bury**  | Moderately demote matching products.                 |
| **Minor Bury**     | Lightly demote matching products.                    |

A boost or bury is a *re-ranking* signal, not a filter: it changes where products appear in the order, it does not add or remove them from the catalog.

### In-strategy customizations vs. Boost & Bury

Boost & Bury is **global**, it changes scores across the whole catalog, so every strategy that reads the catalog sees the effect. Inside a single strategy you have separate, **local** controls that only affect *that* strategy:

| In-strategy control             | Scope         | Effect                                                                |
| ------------------------------- | ------------- | --------------------------------------------------------------------- |
| **Pin** (Pins → Pin product(s)) | One strategy  | Force specific products to fixed top positions in that strategy only. |
| **Filter** / **Exclude**        | One strategy  | Restrict or remove products from that strategy's results.             |
| **Sort by…**                    | One strategy  | Reorder that strategy's results by a catalog field.                   |
| **Boost & Bury rule**           | Whole catalog | Promote or demote products everywhere, by strength.                   |

{% hint style="info" %}
Rule of thumb: use a **Pin** when you want a product at the top of *one* placement; use a **Boost & Bury** rule when you want a product promoted or demoted *consistently across all* strategies. The two compose, a global boost can still be overridden by a strategy-level pin.
{% endhint %}

For the in-strategy controls, see Creating strategies and, for recommendations specifically, the Strategy Builder.


# Browse controls


# Facet management

This guide explains how to configure and manage facets (filters) within the **Browse Controls** section of the Commerce App . Facet management allows you to control how product filters are displayed to your users, optimizing product discovery and navigation .

{% stepper %}
{% step %}

### Create Facet

1. Navigate to the **Commerce App** .
2. Under the **Browse Controls** menu, select **Facet management** .
3. Click on **Create Facet** to open the setup screen .
   {% endstep %}

{% step %}

### Define the Scope (Search Cases)

Choose when this facet configuration should be applied to search results :

* **All:** Applies these facets to all search queries .
* **Specific:** Target specific search queries. Type the designated search terms into the input field and press `Enter` to register them .
  {% endstep %}

{% step %}

### Add and Configure Filters

<figure><img src="/files/s6BhviOd7ZisHbsnG5Gg" alt=""><figcaption></figcaption></figure>

Click the **Add filter +** button to open the **New filter** modal . Fill in the following details:

1. **Attribute:** Select the product attribute you want to use as a filter from the dropdown (e.g., *Price*, *Color*, *Brand*, *Size*)
2. **Filter behavior:** Check **Filter opened by default** if you want this filter section expanded when the page loads
3. **Display mode:** Choose how the filter options should be rendered for users :
   * **Multi-select checkboxes:** Best for discrete options like brand names or categories.
   * **Color palette:** Best for visual color swatches
   * **Range picker:** Best for numeric ranges like prices
4. Click **Create** to add the filter to your configuration list
   {% endstep %}

{% step %}

### Organize and Reorder Filters

Once filters are added, they will appear under the **Filters display** section:

* Use the drag handles (drag indicator dots `::`) on the left of each filter to drag and drop them into your preferred display order.
* Click the dropdown arrow on the right of a filter card to edit its specific settings.
  {% endstep %}

{% step %}

### Save and Apply

Once you are satisfied with the configuration:

1. Review your filters in the main list.
2. Click the **Save and apply** button in the top right corner to publish the changes to your storefront.
   {% endstep %}
   {% endstepper %}


# Sorting management

This guide explains how to configure and manage sorting options for your search and browse experiences within the Commerce app. This feature allows you to define which attributes users can use to sort products on your site, providing a consistent and relevant merchandising experience across all category and search pages .

{% stepper %}
{% step %}

### Create Sorting

1. Open the **Commerce** app.
2. Under **Browse Controls**, select **Sorting** **management**.
3. Click on **Create Sorting** to start setting up your sorting rules .
   {% endstep %}

{% step %}

### Define the Scope (Search Cases)

<figure><img src="/files/6J6GDmfiU1dsd7NPmTmf" alt=""><figcaption></figcaption></figure>

* **All**: Select this option to apply these sorting rules universally across all search results and categories .
* **Specific**: Select this option to target individual keywords, search terms, or specific categories .
  * If selected, type your search case (e.g., "shoes" or "winter collection") in the input field and press **Enter**.
    {% endstep %}

{% step %}

### Manage Sortable Attributes

Define and order the attributes that your shoppers can use to sort products on the front-end storefront .

1. **Add an Attribute**: Click **Add sortable attribute +** to choose a product field (e.g., price, name, newest, popularity).
2. **Reorder Priority**: Use the **Up/Down arrows** on the left of each attribute card to change its hierarchy and sequence in the dropdown menu.
3. **Edit**: Click the **Pencil icon** to modify the attribute's display name or configuration.
4. **Delete**: Click the **Trash icon** to remove an attribute from the sorting options.
   {% endstep %}

{% step %}

### Save and Apply

Once your sorting rules and attributes are set, click **Save and apply** in the top-right corner of the interface to push the configurations live to your storefront.
{% endstep %}
{% endstepper %}


# Widget implementation

Once a strategy is built and deployed in Commerce, you still need to surface its results to your visitors. **Widget implementation** is about that last step: getting recommendation, merchandising, and search results onto your site or into your emails.

There are three web integration methods, ordered from least to most code: the **Custom Widget** (no-/low-code), the **tag plus custom JavaScript**, and the **headless API**. Email deployment and the Search widget are covered at the end.

{% hint style="warning" %}
At the time of writing, the in-app **Widget implementation** page (opened from the left navigation) returned "Page not found" in the demo environment. The deployment methods below are documented from the existing implementation guides and should be re-verified against the live page once it is available.
{% endhint %}

{% hint style="info" %}
**What you need before deploying:** the AB Tasty unified tag installed on your site, and the identifier of the strategy you want to display, a `RECO_ID` for a recommendation strategy or a `MERCH_ID` for a merchandising strategy. You can copy these from the strategy list in Creating strategies. Verify the tag is present by opening the browser console and typing `recos`, you should see a global context object.
{% endhint %}

### Method 1: Custom Widget (no-/low-code)

The fastest path. AB Tasty provides a pre-configured **Custom Widget** component that handles the API call and the HTML/CSS rendering for you. Marketing teams can manage the banner from the visual editor without writing code.

**Procedure:**

1. Open the **AB Tasty campaign editor**.
2. Add the provided **Custom Widget** to your campaign.
3. Link it to the corresponding `RECO_ID` to display the recommendation banner.

Your banner is now live, using the Custom Widget and the recommendation tag. The `RECO_ID` is the unique identifier found in the strategy list.

### Method 2: Tag plus custom JavaScript

For full control over markup while keeping AB Tasty's data layer and automatic tracking, use the unified tag together with custom JavaScript. The tag collects context variables; you retrieve the products and render your own HTML/CSS.

**Retrieve the products** by calling `recos.reco(RECO_ID)`, which returns a Promise resolving to the product list:

```js
recos.reco("5a936bc0-fbd1-4048-81a8-b94da73178e2").then(console.log);
// → JSON product list (id, name, price, img_link, link, …)
```

**Render your banner and enrich it with data attributes** so the AB Tasty tag can auto-detect impressions and clicks:

```html
<div data-reco-id="[RECO_ID]" data-reco-name="[RECO_NAME]">
  <a href="..."
     data-item-id="[ITEM_ID]"
     data-reco-click="go_to_page">
    <!-- product card markup -->
  </a>
</div>
```

| Attribute         | Purpose                                  | Required |
| ----------------- | ---------------------------------------- | -------- |
| `data-reco-id`    | Identifies the recommendation container. | Yes      |
| `data-item-id`    | Identifies a specific product.           | Yes      |
| `data-reco-click` | Tracks the click action (action id).     | Yes      |
| `data-reco-name`  | Names the recommendation.                | Optional |

When an element carrying `data-reco-id` appears, the tag emits a **show** event; when an element carrying `data-reco-click` is clicked, it emits the click. The tag enriches these with `reco_id`, `reco_name`, `item_id`, and `item_ids`, then pushes the custom event **`ab_recos`** to the `dataLayer`, from which your tag manager (e.g. GTM) forwards them to analytics.

The `ab_recos` event carries an `action_id` (values include `show`, `go_to_page`, `add_to_cart_item`, `add_to_cart_items`, `convert_XXX`, `close`, `set_experiment_audience`), `reco_id`, `item_id`, and `item_ids`.

{% hint style="warning" %}
For banners filled asynchronously, add `data-reco-id` only **after** the content has fully loaded, otherwise the **show** event can fire before the products exist. Note that each view and click generates a tracking event, which can increase analytics (and BigQuery export) costs at scale.
{% endhint %}

### Method 3: Headless API

For headless architectures, native apps, server-side rendering, and CRM environments, call the API directly and render the results yourself.

**Recommendations:**

```
GET https://uc-info.eu.abtasty.com/v1/reco/[SITE_ID]/recos/[RECO_ID]?variables=[VARIABLES]&fields=[FIELDS]
```

| Parameter   | Purpose                                                                             |
| ----------- | ----------------------------------------------------------------------------------- |
| `SITE_ID`   | Your site identifier (e.g. `952`).                                                  |
| `RECO_ID`   | The recommendation strategy id (UUID, e.g. `5a936bc0-fbd1-4048-81a8-b94da73178e2`). |
| `variables` | JSON-encoded dynamic variables (e.g. `viewing_item`, `viewed_items`).               |
| `fields`    | Optional JSON-encoded list of product fields to return; defaults to id only.        |

The response is a JSON list of products with fields such as `img_link`, `id`, `price`, `category`, `name`, and `revenues_last_30_days`. Cache responses where possible, pass contextual parameters, and combine with analytics tracking.

**Merchandising** uses the same base host, with a JWT in the `Authorization: Bearer <token>` header:

```
GET https://uc-info.eu.abtasty.com/v1/reco/[SITE_ID]/merch/category_id/{category_id}
GET https://uc-info.eu.abtasty.com/v1/reco/[SITE_ID]/merch/{merch_id}
```

Retrieve a strategy either by category id or by merchandising strategy UUID (`merch_id`). Common query parameters include `variables`, `fields`, `limit` (default 20), `offset` (zero-based, takes precedence over `page`), `page` (1-indexed), `facets` (true/false), `filters[field][]`, `sort[field]` (asc/desc), and `output_format` (json/csv). Filter and sort fields must be flagged `facetable` and `merch_sortable` respectively in the back office.

The merchandising response includes `name`, `items`, `total_items`, `total_pages`, `current_page`, `limit`, `has_next`, and `facets`. Status codes: `200` OK, `400` Bad Request (strategy not found / invalid filter), `403` Forbidden (auth), `422` Unprocessable Entity (invalid JSON/format), `503` Service Unavailable (10-second global timeout).

### Email deployment

Recommendation strategies can also be deployed into email campaigns. Navigation events must carry a `USER_ID`, and you configure deployment from **deployment settings** at the bottom of the strategy builder after saving. Three options exist:

* **JSON API**: the same recommendation endpoint as above:

  ```
  GET https://uc-info.eu.abtasty.com/v1/reco/[SITE_ID]/recos/[RECO_ID]?variables=[VARIABLES]&fields=[FIELDS]
  ```

  Code samples (cURL, JavaScript, Python) are available from the **Code** button on the deployment page.
* **Compatible email tools (feeds)**: currently implemented for **Brevo**, which consumes a dedicated feed.
* **HTML template**: create a template in your email tool and paste the code from the deployment page; currently implemented for **SFMC** (Salesforce Marketing Cloud).

### Search widget

The front-end search experience is deployed through the AB Tasty **Search widget** in Web Experimentation & Personalization, not through the methods above. See the Search section for the full launch procedure (Modal vs Free placement, Element Selector, desktop/mobile widgets, translation keys, styling, and the `abtasty_search` / `abtasty_search_result` events).

### Related

* Creating strategies: build the strategies you deploy here, and find their `RECO_ID` / `MERCH_ID`.
* Search: launching and configuring the Search widget.
* Monitoring Commerce deployment health: confirm deployments and synchronizations succeeded.


# Monitoring deployment health

The **Health monitor** is your single source of truth for the operational state of AB Tasty Commerce. It tracks every catalog **synchronization** and every strategy **deployment**, surfaces failures in plain language, and lets you relaunch a sync when something needs fixing.

Open **Health monitor** in the left navigation.

The **Health monitor** is your single source of truth for the operational state of AB Tasty Commerce. It tracks every catalog **synchronization** and every strategy **deployment**, surfaces failures in plain language, and lets you relaunch a sync when something needs fixing.

Open **Health monitor** in the left navigation.

<figure><img src="/files/Jw1P8GpD9JKNAYmUQZpT" alt=""><figcaption></figcaption></figure>

### Status banner <a href="#status-banner" id="status-banner"></a>

The banner at the top of the page summarizes overall health and the freshness of your data:

* **"Recommendations & Merchandising is working perfectly"**: the overall health message. When an operation fails, this message changes to flag the issue and provides links to investigate.
* **Last successful synchronization**: for example, *"about 8 hours ago"*, when your catalog was last refreshed end-to-end.
* **Last successful deployment**: for example, *"about 8 hours ago"*, when your strategies were last published live.

{% hint style="info" %}
**Synchronization** keeps the catalog and computed scores up to date. **Deployment** pushes a saved strategy version live. They are tracked separately because a healthy sync does not, on its own, publish strategy changes.
{% endhint %}

### Your account status <a href="#your-account-status" id="your-account-status"></a>

The **"Your account status"** section shows a status indicator for each Commerce module, so you can tell at a glance which area is affected when something goes wrong:

| Indicator           | What it covers                                                                          |
| ------------------- | --------------------------------------------------------------------------------------- |
| **Catalog**         | Retrieval, processing and generation of your product catalog.                           |
| **Analytics**       | Ingestion of analytics signals (pageviews, purchases, revenue) that enrich the catalog. |
| **Recommendations** | Training and deployment of recommendation strategies.                                   |
| **Merchandising**   | Computation of merchandising scores and category deployments.                           |
| **Search**          | Freshness of the search catalog and ranking configuration.                              |

A green status means the module is operating normally; a non-green status points you to the module to investigate in the **Operations history** below.

### Launch synchronization <a href="#launch-synchronization" id="launch-synchronization"></a>

Use the **Launch synchronization** button to trigger a full catalog synchronization on demand, for example, after fixing a feed issue or to pull fresh product data outside the scheduled window.

{% hint style="info" %}
Scheduled synchronization runs automatically at the recurrence defined in **Settings → Preferences**.&#x20;
{% endhint %}

### Investigating a failed operation <a href="#investigating-a-failed-operation" id="investigating-a-failed-operation"></a>

When an operation fails, the banner flags it and the row in **Operations history** carries the details:

1. Locate the failed operation in the **Operations history** table.
2. Open the operation to see the **Additional info**, Commerce explains the root cause in human-readable terms, lists the impacted services, and offers retry or confirmation options.
3. Fix the underlying cause (see the [troubleshooting table](https://file+.vscode-resource.vscode-cdn.net/Users/didier/repos/abtasty/commerce/docs/commerce/08-monitoring-deployment-health/README.md#most-common-synchronization-errors) below).
4. Relaunch using **Launch synchronization**, or use the in-context retry / *"I fixed it"* action where offered.

If the same error recurs twice, persists after your fix, or a synchronization runs longer than two hours, contact support. Provide the **operation ID**, the **synchronization timestamp**, and the **error message** shown in **Additional info**.

### Catalog stability protection (Volume Guard) <a href="#catalog-stability-protection-volume-guard" id="catalog-stability-protection-volume-guard"></a>

To stop a corrupted or partial feed from wiping your live catalog, Commerce can block a synchronization when the number of products drops unexpectedly. This is the **Catalog stability protection** threshold, configured in **Settings → Preferences** under **Catalog & analytics synchronization**.

<figure><img src="/files/PnciqkXSX6KBhQ4YsUvX" alt=""><figcaption></figcaption></figure>

* **"Catalog stability protection"**: *"Define a threshold which will block synchronization if a sudden reduction in the number of products in the catalog is detected"*. You pick the deviation threshold (for example, for Shopify).
* If a sync would reduce the catalog by more than the threshold (a common rule of thumb being a drop greater than **15%**), it is **blocked** and reported as a failed operation rather than being applied.
* If the reduction is intentional (for example, a deliberate catalog cleanup), confirm the operation / request a force publish to let it through.

### Email notifications <a href="#email-notifications" id="email-notifications"></a>

Commerce can alert you by email when a synchronization or deployment fails. Recipients are the **Priority contacts** configured in **Settings → Preferences → Alerting**, *"These users will be alerted by email if synchronization or deployment errors appears"*. Choose recipients from your account members via *"Choose email(s) from account members"*.

Notification emails include a summary of the issue, an explanation, recommended actions, and a link back to the **Health monitor**.


# How to fix synchronization failures with the Health Monitor

The **Health Monitor** gives you real-time visibility on the health of your product data catalog synchronizations.\
It helps you detect issues early, understand what went wrong, and take action quickly.

{% hint style="info" %}
**Use the Health Monitor to:**

* Check the status of Catalog, Recommendations, Merchandising, Analytics and Search
* View recent sync and deployment operations
* Understand errors with human-readable explanations
* Retry a failed synchronization
* Monitor the number of imported products
* Enable email notifications when issues occur
  {% endhint %}

### Where to find the Health Monitor ?

In App2 > Setting > Recommendations & Merchandising → Health Monitor

### **What to find in the overview Health Monitor ?**

The **Overview** displays everything you need to know at a glance.

#### Alert Banner

If a recent issue occurred (e.g., failed sync), an alert banner will appear at the top of the page with a quick summary and a link to investigate.

<figure><img src="/files/sVM6tE1GUVNYjrqvhjt3" alt=""><figcaption></figcaption></figure>

#### Operation History

The history lists all recent operations:

* Catalog synchronizations
* Deployments
* Imports
* Updates

Each operation shows whether it was a success or a failure, the date and time, the duration of the synchronization, and hover buttons to access to the [viewing operations details](#what-to-fin-in-the-viewing-operation-details) details and relaunch this specific synchronization in case it's failure.

Use this history to track what happened and when.

<figure><img src="/files/AidcSR4zxnLzdTyvHot3" alt=""><figcaption></figcaption></figure>

#### Available soon : service Status Indicators

<figure><img src="/files/uQ1LrXOS1HEqcD3e5Uwu" alt=""><figcaption></figcaption></figure>

**Meaning of badge colors :**

| Color     | Meaning                         |
| --------- | ------------------------------- |
| 🟢 Green  | Everything works normally       |
| 🟡 Yellow | Something unusual detected      |
| 🔴 Red    | A sync or deployment has failed |

### What to find in the viewing operation details?

{% columns %}
{% column %}
The operation details modal shows what happened during the sync:&#x20;

* the type of operation,&#x20;
* timestamps,&#x20;
* duration,&#x20;
* and whether it succeeded or failed.

\
If something went wrong ?

You’ll see the root cause, a clear explanation, the impacted services, and options to retry the sync or confirm that you fixed the issue.
{% endcolumn %}

{% column %}
![](/files/FeQkLEeLogNVaTMCuwwG)
{% endcolumn %}
{% endcolumns %}

#### How to setup catalog volume guard to protect your catalog?

To avoid publishing an incomplete catalog, you can choose the percentage threshold that will trigger a blocked sync.\
Go to *Settings → Recommendations & Merchandising* and select the % of product count deviation you want to allow.\
If the deviation exceeds this threshold, the sync is automatically blocked.

#### How to setup email notifications to stay informed ?&#x20;

Regarding the notifications mail, you can receive alerts when:

* A sync fails
* A deployment fails
* A sync succeeds

To enable notifications go to **User Settings → Notifications → Health Monitor**

Emails include:

* A summary of the issue
* What it means
* What you can do
* A link to open the Health Monitor

<figure><img src="/files/YiOZ7ntzkWKyHoeeAMB4" alt=""><figcaption></figcaption></figure>

#### Still stuck?

Contact your CSM or Support with:

* The operation ID
* The sync timestamp
* The error displayed


# Most common synchronization errors

Below is a list of the most common synchronization errors and how to fix them.

{% hint style="warning" %}
If any of the following happens, **contact Support directly**:

* The same error occurs **twice in a row**
* The issue persists after you fixed your feed
* The sync stays in **“Running” for more than 2 hours**
* You see repeated **“Unexpected Pipeline Error”**

When reaching out, please provide:

* Sync ID
* Timestamp
* Error message shown in the modal
  {% endhint %}

### **Generic pipeline error**

| What it means                           | What to check                          | What to do                                                        |
| --------------------------------------- | -------------------------------------- | ----------------------------------------------------------------- |
| A non-specific internal error occurred. | Nothing obvious in your configuration. | Retry sync. If it fails twice → contact Support with the sync ID. |

### **Data extraction error**

Pulling data from your feed or platform

| What it means                    | What to check                                | What to do                                               |
| -------------------------------- | -------------------------------------------- | -------------------------------------------------------- |
| We could not fetch your catalog. | Feed URL, API keys, permissions, metafields. | Test the feed URL, refresh credentials, then retry sync. |

### **Field processing or mapping Error**

| What it means                               | What to check                                                     | What to do                                                |
| ------------------------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------- |
| Your catalog has missing or invalid fields. | Mandatory fields (ID, name, category, price…), attribute formats. | Fix your feed, update your mapping if needed, retry sync. |

### **Algorithm training error**

| What it means                           | What to check                                                 | What to do                                                             |
| --------------------------------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------- |
| Ranking or ML processing could not run. | Missing key attributes (price, category), very small catalog. | Complete missing fields, ensure categories are consistent, retry sync. |

### **Catalog deployment error**

| What it means                  | What to check                 | What to do                                           |
| ------------------------------ | ----------------------------- | ---------------------------------------------------- |
| Catalog couldn’t be published. | Nothing specific client-side. | Retry sync. If repeated twice → escalate to Support. |

### **Empty feed (0 products)**

Volume Guard

| What it means                  | What to check                                       | What to do                                        |
| ------------------------------ | --------------------------------------------------- | ------------------------------------------------- |
| Your feed returned 0 products. | Feed URL, platform export, credentials, API limits. | Fix the feed → click **I fixed it** → retry sync. |

### **Unexpected drop in product count**

Large deviation >15%

| What it means                   | What to check                                          | What to do                                                         |
| ------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------ |
| Catalog size dropped unusually. | Missing categories, incomplete feed, connector issues. | Fix feed, retry. If drop is intentional → request “force publish”. |

### **Source change detected**

| What it means               | What to check                        | What to do                                              |
| --------------------------- | ------------------------------------ | ------------------------------------------------------- |
| Feed URL or source changed. | New URL, new API key, new file path. | Verify details and retry. One tolerance run is allowed. |

### **Missing mandatory fields**

| What it means                        | What to check                                   | What to do                              |
| ------------------------------------ | ----------------------------------------------- | --------------------------------------- |
| Key attributes are empty or invalid. | Product ID, price, category, availability, etc. | Fix fields in your source → retry sync. |

### **Credentials or access error**

| What it means                            | What to check                                             | What to do                       |
| ---------------------------------------- | --------------------------------------------------------- | -------------------------------- |
| We couldn’t authenticate to your source. | API keys, permissions, password protection, token expiry. | Update credentials → retry sync. |


# Dashboard


# Global Experience Dashboard discovery

The global dashboard is the first page displayed when you access your AB Tasty account and allows you to keep track of your C.R.O campaign's performance.

The dashboard keeps track of 10 main indicators:

* [Live campaigns](#h_01hrybr1fvm4jbr3626sa91ctt)
* [Campaign status overview](#h_01hrybr1fvbfqeb6m4kk4fz56y)
* [Campaign launch](#h_01hrybr1fv8fds26epmm475a0f)
* [Upcoming scheduled campaign](#id-01jkgbkwg5z6npbh9698j7p8ww)
* [10 most active collaborators](#h_01hrybr1fvwp7k4k668t6tjcdj)
* [Unique visitors](#h_01hrybr1fvzazewjnbavzbw1fa)
* [Tag size](#h_01hrybr1fvstwtfqkt5y5cfaqh)
* [Integrations](#h_01jp23gvrmt5bj3yen0a8sz6kq)
* [Experiment Health Check](#h_01hrybr1fv6tdpn5bc17k612e0)
* [EmotionsAI Key Insights](#h_01hrybr1fvm4jbr3626sa91ctt-1)

## Customizable dashboard <a href="#h_01jp7mhx5wp5w9wx01fgv8v0wy" id="h_01jp7mhx5wp5w9wx01fgv8v0wy"></a>

<img src="/files/zCvEc3BJ3DL0b1outFKU" alt="" width="563">

You can [customize your dashboard](/dashboard/how-to-customize-your-global-experience-dashboard) by choosing which card you want to display and its exact place.\\

### Date filters <a href="#h_01j3qknbhmffna3k601j191a18" id="h_01j3qknbhmffna3k601j191a18"></a>

You can change the timeline by choosing between several options, from the past 12 months to the past 7 days.<br>

<figure><img src="/files/R9ASxG2JuW4uwkQyqLKe" alt="" width="200"><figcaption></figcaption></figure>

Please refer to [this article about using filters in the Dashboard.](/dashboard/how-to-filter-the-global-experience-dashboard)

### Single account vs Multiple account view <a href="#h_01jp5a994r5rph9pc5vj5xcrj2" id="h_01jp5a994r5rph9pc5vj5xcrj2"></a>

#### Single-account view <a href="#h_01hrybr1fv593sfzr5ka3bzgag" id="h_01hrybr1fv593sfzr5ka3bzgag"></a>

The single-account view mode is the default mode and displays data for a single account.

#### Multi-account view <a href="#h_01hrybr1fv6nbnws2w5ct4957p" id="h_01hrybr1fv6nbnws2w5ct4957p"></a>

The multi-account view mode displays aggregated data of all accounts within an [organization](/account/account-management/the-organization-page). Multi-account view mode is activated automatically when you select several accounts in your organization.

To select multiple accounts, in the upper right corner of the Dashboard, click on the drop-down menu.

<img src="/files/p3GuchqcbM7brXDSPvte" alt="Capture d’écran 2025-03-12 à 15.50.02.png" width="563">

You must be a super admin of your organization to be able to select several accounts.

## Campaigns activity metrics <a href="#h_01j3qjyhpqdhhv95myd8rc3zh6" id="h_01j3qjyhpqdhhv95myd8rc3zh6"></a>

The dashboard shows real-time and historical tracking of your campaigns' activity.

Campaigns are split by category and type where applicable.

### Live Campaigns <a href="#h_01hrybr1fvm4jbr3626sa91ctt" id="h_01hrybr1fvm4jbr3626sa91ctt"></a>

This section shows the total number of campaigns **currently** running on your AB Tasty account or organization. It is the sum of campaigns with *live* or *live in QA* status.\
It'a "real time" card, meaning that the usage of the date filter can't impact it.<br>

<figure><img src="/files/bViivHnVGW2QCfiXqyoz" alt="" width="283"><figcaption></figcaption></figure>

### Status Overview <a href="#h_01hrybr1fvbfqeb6m4kk4fz56y" id="h_01hrybr1fvbfqeb6m4kk4fz56y"></a>

This section provides a 2 steps overview status. First it gives a brief summary of activity by status. Second, clicking on a status reveals more details about the associated campaign types. Additionally, selecting a specific campaign type will redirect you to a filtered campaign list.

If a campaign type does not appear in the list, it means there are no campaigns of that type in the current status.

<img src="/files/O9SA28pCv3FBMNuk5g6a" alt="StatusOverviewCard.gif" width="563">

### Campaign launch <a href="#h_01hrybr1fv8fds26epmm475a0f" id="h_01hrybr1fv8fds26epmm475a0f"></a>

This section shows the total number of times campaigns have been launched in the past 12 months. It is calculated by the sum of launches that took place, excluding campaigns in QA mode and counting only 1 launch per day per campaign at maximum.

<img src="/files/ML4bTzJvWwvurvOA3R1g" alt="" width="563">

### Upcoming scheduled campaigns <a href="#id-01jkgbkwg5z6npbh9698j7p8ww" id="id-01jkgbkwg5z6npbh9698j7p8ww"></a>

This section shows real-time updates on your scheduled campaigns of your account or organization.<br>

<figure><img src="/files/m2ghKKZcuqZPtyUD67km" alt="" width="375"><figcaption></figcaption></figure>

It includes the list of:

* All paused campaigns ready to be launched on a future date
* All live campaigns planned to be stopped on a future date
* All campaigns with recurring scheduled options that didn’t hit the last occurrence

The dot next to the campaign name informs about the current status:

* in green the campaign is live
* in yellow the campaign is paused

The information area resumes the next action scheduled on the campaign. The color of this area is linked to the type of the action:

* in yellow the campaign has been scheduled to be paused
* in green the campaign has been scheduled to be played and paused
* in blue the campaign has been scheduled with a recurrency

By hovering the information area you'll find the full details about the schedule.\
By clicking on the pictogram on the right of the line, you're redirected to the campaign flow.

### 10 most active collaborators <a href="#h_01hrybr1fvwp7k4k668t6tjcdj" id="h_01hrybr1fvwp7k4k668t6tjcdj"></a>

This section shows the list of the 10 most active users on your AB Tasty account or organization with their:

* First name
* Last name
* Number of connexions till the beginning
* The last connexion date

As a user, it is possible to declare you first name and last name in the [profile page of the settings](https://app2.abtasty.com/settings/user-informations). If these fields are not completed, the email address is automatically displayed for both fields.\
\
An active user is a user whose last login time to AB Tasty was in the past 12 months. Users are sorted by number of connections, in descending order.

<figure><img src="/files/aDbuMHsFlL7QFIuC1KU0" alt="" width="375"><figcaption></figcaption></figure>

### Unique visitors <a href="#h_01hrybr1fvzazewjnbavzbw1fa" id="h_01hrybr1fvzazewjnbavzbw1fa"></a>

This section shows two metrics:

1. **All**: The total number of unique visitors tracked by the AB Tasty tag, regardless of whether they are assigned to a campaign. This should be equivalent to the MAU (Monthly Active Users) count as we count a visitor once it has accepted the cookies.
2. **Tested**: The total number of unique visitors (new) tracked by the AB Tasty tag, **and assigned to a campaign**.<br>

   <figure><img src="/files/rduW7pQrbtO4ErTAAbS3" alt="" width="375"><figcaption></figcaption></figure>

By hovering the graph, you can access to the monthly details.

## Performance metrics <a href="#h_01hrybr1fve7r8g78j94hxrdmx" id="h_01hrybr1fve7r8g78j94hxrdmx"></a>

### Tag size  <a href="#h_01hrybr1fvstwtfqkt5y5cfaqh" id="h_01hrybr1fvstwtfqkt5y5cfaqh"></a>

<figure><img src="/files/blzQVYqSSGCnX8pBHZmm" alt="" width="269"><figcaption></figcaption></figure>

The tag size is the size of AB Tasty HTML tag, in kilobytes. Its size should be under 125 Kilobytes for optimal performance. For more information, go to the [Performance Center](/reporting-and-performances/performance-center) article.

## Integrations metrics <a href="#h_01jp23gvrmt5bj3yen0a8sz6kq" id="h_01jp23gvrmt5bj3yen0a8sz6kq"></a>

Your [integrations](/integrations/integrations-general-information) are listed in the **Global dashboard** as **Connected Apps**:

<img src="/files/PrK3NPoieacqtyM6NjVH" alt="" width="375">

You can access the [Integrations Hub](https://app2.abtasty.com/settings/integration/integration-hub) from this section.

## Experiment Health Check <a href="#h_01hrybr1fv6tdpn5bc17k612e0" id="h_01hrybr1fv6tdpn5bc17k612e0"></a>

**Experiment Health Check** enhances the reliability and efficiency of experimentation programs. Experiment Health Check automatically monitors your experiments, providing alerts and insights to help you maintain the integrity of your data.

### Types of Alerts <a href="#h_01jqzm69m65ex2xvx0m5a6h2f6" id="h_01jqzm69m65ex2xvx0m5a6h2f6"></a>

* [**Sample Ratio Mismatch (SRM)**](/reporting-and-performances/reporting/sample-ratio-mismatch)**:** This alert indicates a discrepancy between expected and observed traffic allocations. It’s crucial to address SRM to maintain the validity of your test results.
* [**Sequential Testing Issues**](/web-experimentation-and-personalization/campaign-flow-advanced-options/sequential-testing-alerts)**:** Alerts you to potential statistical anomalies that may arise from improper sequential testing practices.

<img src="/files/iIoaeRrvcaQl57PaYkfl" alt="" width="563">

<img src="/files/Q5rI3pPf5muHSob7Ut6N" alt="" width="563">

You can mark all alerts as resolved or check them individually by hovering on the elements or headers.

### EmotionsAI Key Insights <a href="#h_01hrybr1fvm4jbr3626sa91ctt" id="h_01hrybr1fvm4jbr3626sa91ctt"></a>

This card allows you to have a glance at the main information of a Journey Analysis request you have made on the [dedicated page](https://app2.abtasty.com/emotionsai-mapping-analysis).

{% hint style="warning" %}
In order to have some Insights, you must have activated the EmotionsAI Insights on your accounts and requested at least one Journey Analysis.
{% endhint %}

<figure><img src="https://lh7-qw.googleusercontent.com/docsz/AD_4nXc5Qz1AIocL1c2f5rteh13DJT9Xn33iAq2Tm-PcltU07yDtrI8OKbuRfFwHYF-NBC62URgUDWo-DSeANMEhFd1Iasc0kyFQG_X0fNg9g4T_U-MrX4-9w_IwGKCP6yuv-jOAANDqqQ?key=UHDtFsfHIzvHzSUx1XTEJ2iH" alt="" width="563"><figcaption></figcaption></figure>

The card displays the information of the saved Journey Analysis for which the end date is the closest to today.

{% hint style="info" %}
If you are managing multiple accounts, you have the possibility to switch from one account to another using a dropdown in the Title of the card.&#x20;
{% endhint %}

You will find there a lot of condensed information to assess the emotional performance of your website :&#x20;

* Estimated Losses on the period
* The Top 3 EmotionsAI audiences composing your traffic.&#x20;
* The Top 3 Dissatisfactions by EmotionsAI audiences to manage.
* The Top 3 pages where most emotional improvements have to be addressed.

Depending on the Journey Analysis available, you will be able to filter the Journey Mapping and its goals you want to monitor.

## Real time vs. Historical metrics <a href="#id-01jqzktv2vb76vgfkegy2kc885" id="id-01jqzktv2vb76vgfkegy2kc885"></a>

The Global Experience dashboard tracks 3 types of data: Real-time, Historical and Specific.

### **Real-time metrics** <a href="#h_01hrybr1fvgxb03e0z2sw1vrtc" id="h_01hrybr1fvgxb03e0z2sw1vrtc"></a>

Real-time data metrics are identified by a “Real time” icon and label placed on top of the section. Real-time metrics cannot be filtered by date.

### **Historical metrics** <a href="#h_01hrybr1fv51av6xy0x43zkn45" id="h_01hrybr1fv51av6xy0x43zkn45"></a>

Historical data are identified by a “Filter” icon followed by a date range. Those data are updated every day and can be filtered up to the past 12 months.

### **Specific** <a href="#h_01hrybr1fv51av6xy0x43zkn45" id="h_01hrybr1fv51av6xy0x43zkn45"></a>

The card fetch data on a period specific to the card.


# How to filter the Global Experience Dashboard

The [dashboard](/dashboard/global-experience-dashboard-discovery) also allows you to filter **historical data metrics** by date.

To apply a filter, select any of the predefined periods from the top menu of your dashboard:

* Past 12 months: data from the past 12 completed months + current month as a result
* Past 6 months: data from the past 6 completed months + current month as a result
* Past 3 months: data from the past 3 completed months + current month as a result
* Past 30 days: data from the past 30 completed days + current day as a result
* Past 7 days: data from the past 7 completed days + current day as a result

<img src="/files/AIXfeuf2q24mamP6OZU5" alt="" width="153">

{% hint style="info" %}
When selecting a date range, all historical data metrics will automatically be filtered to the matching date.
{% endhint %}

### Example Usage <a href="#h_01hrycbfd1jn0es4cmfv8v99ng" id="h_01hrycbfd1jn0es4cmfv8v99ng"></a>

Let's say today is April 4th, 2024, and you want to analyze historical data for the past 3 months.

The Date Range will be automatically set to: January 1st, 2024 - April 4th, 2024 as it provides data from January 1st, 2024, up to April 4th, 2024. It encompasses the entire previous three-month period, including data up to the current date.

{% hint style="info" %}
The filter settings are saved in each AB Tasty user’s profile and will not affect other users within your organization.&#x20;

The date will also be automatically adjusted, making sure to always keep it to complete months, with the addition on the current month, to date.
{% endhint %}


# How to customize your Global Experience Dashboard

The [dashboard](/dashboard/global-experience-dashboard-discovery) can be customized to better fit your business needs. You can add, delete metric and also re-arrange the dashboard layout.

## Add a new metric <a href="#h_01j6a63bk0r17yjs0qxh3x08s9" id="h_01j6a63bk0r17yjs0qxh3x08s9"></a>

On the dashboard:

1. Click on the “Customize” button in the upper-right of your dashboard to enter *edit* mode.
2. Once in *edit* mode, select any metric card by clicking and dragging it from the left panel to the right-hand layout.
3. Click “Save configuration” to save your personal dashboard view.

![](/files/gOq5I0lG3XNZyszgZCx4)

<img src="/files/XXUYZexKMeEz66ypdxvs" alt="" width="232">

## Delete a metric <a href="#h_01j6a64kemar88ncs5zq39h686" id="h_01j6a64kemar88ncs5zq39h686"></a>

To delete a metric card:

1. Hover any metric card and click the upper-right corner cross.
2. Click “Save configuration” to save your personal dashboard view.

## Re-arrange the dashboard layout <a href="#h_01j6a65c1q501xe0927ezxdg6k" id="h_01j6a65c1q501xe0927ezxdg6k"></a>

To change the order of the cards, simply click and drag any card to your desired position.


# Web Experimentation and Personalization


# Campaign creation and dashboard

Explore these articles for a deeper understanding of the steps needed to create a successful campaign that aligns with your objectives. Each step is tailored to provide control and clarity, allowing users to create, manage, and confirm campaigns effortlessly and efficiently. With AB Tasty, crafting a campaign is simple, whether you're setting up experiments or personalizations for your website or application.


# Campaigns Dashboard

The campaigns dashboards are available for both Experimentation & Personalization campaigns. The experimentation campaigns dashboard includes all the tests (A/B tests, A/A tests, multivariate tests, multipages tests, tests with dynamic allocation) and patch and multipages patch campaigns created on the website of the account and the personalization campaigns dashboard includes all personalizations campaigns (simple personalizations, multipages personalizations, multiexperiences personalizations) created on the website of the account. By default, the first 12 campaigns are loaded in the list. To show more, click on the other pages at the bottom right of the list.

To access the test and patch dashboard, click **Experimentation** from the lateral navigation.

<img src="/files/2x8FucuUtzOtO3pp3XBT" alt="" width="563">

To access the personalization dashboard, click **Personalization** from the lateral navigation.

<figure><img src="https://support.abtasty.com/hc/article_attachments/14228077219100" alt=""><figcaption></figcaption></figure>

## Navigating between active and archived campaigns <a href="#h_01hz4f3v5dr2qz9383x23rzr72" id="h_01hz4f3v5dr2qz9383x23rzr72"></a>

You can switch between active and archived campaigns from the tab above the campaigns list.

<img src="/files/EJ0YEvsJZvmNKL8CdzX1" alt="" width="375">

An archive campaign can be unarchived. Archiving a campaign is the best way to clean your campaigns list without having to trash your past ones.

## Tags usage <a href="#h_01hz4f3v5e8w52kk379g90baws" id="h_01hz4f3v5e8w52kk379g90baws"></a>

Keyword assigned to the test or patch. By default, when a campaign is created, a tag containing the name of the creator of this campaign is added automatically.

To add a new tag, click on the **Plus icon that** will appear when you hover over the row, under the tag column.

## Campaign edition <a href="#h_01hz4f3v5e1pm3sv01kqwgbkan" id="h_01hz4f3v5e1pm3sv01kqwgbkan"></a>

<img src="/files/Pb5UuXTQarRWlLU9CIJO" alt="" width="243">

Click the icon "pen" for direct access to the 7 configuration steps of a campaign:

1. Main information
2. Visual editor (for tests) or Targeting (for personalizations)
3. Targeting (for tests) or Visual editor (for personalizations)
4. Goals
5. Traffic allocation
6. Advanced options
7. QA

## Campaign scheduling <a href="#h_01hz4f3v5egfa4y2b6avra7tr5" id="h_01hz4f3v5egfa4y2b6avra7tr5"></a>

<img src="/files/NOo7H4aYEbZcjac3P7wn" alt="" width="177">

Click on the status button, then select **Schedule** to schedule a campaign to be played or paused in the future (with or without recurrence).

A badge appears next to the status button on the campaign to indicate that a start and a stop have been scheduled for it.\
\
To know more about it, read our[ Campaign scheduler](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler) article.

## Rename, Duplicate, Archive, Delete <a href="#h_01hz4f3v5ef4hdtycddzpj7q2n" id="h_01hz4f3v5ef4hdtycddzpj7q2n"></a>

<img src="/files/8YC3qXkCoyPZZKNCWwlK" alt="" width="185">

Click the "See more actions" icon ![image2.png](/files/Spyd53zDoIORY0lRS4h6)for direct access to the 5 configuration steps of a campaign.

And click on **duplicate**, **archive**, **add to folder** or **delete actions** on your campaign.

### Edit campaign name <a href="#h_01hz4f3v5e5vd1k4p41xcwgxnb" id="h_01hz4f3v5e5vd1k4p41xcwgxnb"></a>

Click on **More Actions** and select **Edit campaign name** to modify the name of your campaign.

### Duplicate <a href="#h_01hz4f3v5e1x1ztwr4cjg5ybef" id="h_01hz4f3v5e1x1ztwr4cjg5ybef"></a>

Click on **More actions** menu and select **Duplicate** to duplicate your campaign.

More information is in the [***campaign duplication article***](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-duplication)

### Archive <a href="#h_01hz4f3v5etcdndnrvbjtshvfj" id="h_01hz4f3v5etcdndnrvbjtshvfj"></a>

To archive a campaign, click on **More actions** menu ![image1.png](/files/syt0xLfhfb2wgxsFAcVB) and select **Archive**. The campaign will be moved to the archive view.

From the **Archived view**, the campaign cannot be started or paused. The possible actions are **Unarchive** by clicking on the status button.

<img src="/files/6FDWdhcl18YFo0b0ObKX" alt="" width="185">

### Delete <a href="#h_01hz4f3v5ecv78c6t3gx2n6145" id="h_01hz4f3v5ecv78c6t3gx2n6145"></a>

To delete any active or archived campaign, click on **More actions** menu ![image1.png](/files/syt0xLfhfb2wgxsFAcVB) and select **Delete**.

{% hint style="danger" %}
Deleting a campaign is an irreversible action.
{% endhint %}

## Search, Filter, and Organize <a href="#h_01hz4f3v5ej0vsm050w6shfy2k" id="h_01hz4f3v5ej0vsm050w6shfy2k"></a>

### Search <a href="#h_01hz4f3v5ewz36qrn5mfnhcke2" id="h_01hz4f3v5ewz36qrn5mfnhcke2"></a>

You can run a search based on the name of the campaign, campaign ID, or URL.

<img src="/files/0WAHaJqSoLipS8eyohvR" alt="" width="375">

### Filter <a href="#h_01hz4f3v5eszpbj0qb119wbeyx" id="h_01hz4f3v5eszpbj0qb119wbeyx"></a>

#### **How to filter your dashboard** <a href="#h_01hz4f3v5e3hbngd5bny0jpxh2" id="h_01hz4f3v5e3hbngd5bny0jpxh2"></a>

<img src="/files/pPS8n6quomOXGBMrSWFE" alt="" width="270">

1. Go to the test dashboard
2. Click on the **Filter** button
3. Select the desired filter from the sections: Type, Status, or Folder\
   The list is updated, and only the tests that match the criteria are displayed
4. Click **Apply** to apply the selected filters or select **Reset** in the menu to return to the default list

#### **Filtering options** <a href="#h_01hz4f3v5efe5vz6mmnjwggjvp" id="h_01hz4f3v5efe5vz6mmnjwggjvp"></a>

* **By campaign type**

You can filter your list of tests based on type: simple personalization, multipage personalization, and multiexperience personalization.

* **By status:** You can filter the list of campaigns based on their status. The different statuses available are:
  * Live
  * Live in QA
  * Paused
  * Paused in QA
  * Scheduled
  * Archived
* **By folder**

You can filter the list of your campaigns based on the folders they have been filed into.

*To view the content of a folder, take these steps:*

1. Click on the **Filter** button,
2. Select the desired folder from the dropdown:\
   The list is updated and only the tests that match the criteria are displayed,
3. Click **Reset** to return to the default list

#### **Folder management** <a href="#h_01hz4f3v5efe5vz6mmnjwggjvp" id="h_01hz4f3v5efe5vz6mmnjwggjvp"></a>

To create a new folder, click "See more actions" from the campaign row. Then, "Add to Folder" and "Create a folder".

* To **rename** a folder, click on the pencil icon appearing on hover on the folder name.
* To **delete** a folder, click on the bin icon appearing on hover over the folder name.\
  💡 If the folder contains tests or personalizations, these aren’t deleted along with the folder. They remain available in the main list.
* To **move a campaign into a folder**, click the "See more actions" icon from the campaign row. Then, "Add to folder" and select the desired folder.\
  💡 When you move a test or personalization into a folder, it remains visible in the main list.
* To **remove a campaign from a folder,** click the "See more actions" icon from the campaign row, then select "Remove from folder."

### Organize columns <a href="#h_01hz4f3v5eh6ngperrd2t0mddh" id="h_01hz4f3v5eh6ngperrd2t0mddh"></a>

You can create a view to save the columns you want to display on your dashboard.

1. Click on the button **Organize**.
2. Toggle on-off the names of the columns you’d like to set up as a default view for your profile.
3. Click on **Apply**.

The view is set up and will be displayed by default whenever your dashboard is loaded.

{% hint style="info" %}
To change the view, click on “Organize” and change your column set. By clicking on **Apply** the last view will be saved as default.

The view will be automatically applied on both the experiment dashboard and personalization dashboard, for all accounts, you have access to.
{% endhint %}

## Creating a campaign <a href="#h_01hz4f3v5eb6jspb5fjfsgvzfw" id="h_01hz4f3v5eb6jspb5fjfsgvzfw"></a>

<img src="/files/6MPMGOrCwbOs7CHJXNj1" alt="" width="563">

Campaigns can be created via the campaigns dashboard.

1. Click **Create**
2. Select the type of test or personalization you want to create
3. You are redirected to the Main information page

For more information about campaigns creation flow, please refer to this [article](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).


# Uplift card

The uplift card shows the uplift generated by your AB Tasty campaigns on a given month.\
This information can be analyzed from the [ROI dashboard](/reporting-and-performances/roi-dashboard) which provides a global overview of your CRO activity and enables you to monitor your campaign’s performance over time.

The uplift is the **incremental revenue that would have been generated if the visitors who saw the original version had instead seen the variation**, it can be related to the profit made on your campaign.\
On the opposite, if the uplift is negative, you will find it under the Secured gain section of the ROI dashboard. It corresponds to the revenue you have saved by not implementing an underperforming variation on production.

{% hint style="warning" %}
The Uplift card is only available for accounts where at least one transaction tag is implemented.
{% endhint %}

## Information <a href="#h_01hvvac7wevbsrw150swcwecn7" id="h_01hvvac7wevbsrw150swcwecn7"></a>

If you have several transaction tags implemented on your account, you need to choose the one you want to display data for via the drop-down list.

<figure><img src="/files/8mxtc2qYqdSz4yrRuxfY" alt="" width="375"><figcaption></figcaption></figure>

The transaction name coincides with the name assigned to the transaction as it appears in the list of goals to configure and on the reporting.\
The selection is saved for all the next sessions and displayed by default when you come back to the dashboard. You can still select another transaction name at any time.\
You can hide the transaction tags you don’t use anymore, for more information, refer to [Trackers library](/assets-library/trackers-page).

## Calculation <a href="#h_01hvvac7wejwjr2wd9h3smg54t" id="h_01hvvac7wejwjr2wd9h3smg54t"></a>

Uplift = Total Revenue (variation) - Potential Income (original version)\
The uplift card on campaign dashboards shows:

* **The uplift number**: the sum of the uplift generated by your tests and personalizations campaigns separately, for a specific account in the current month and on a specific transaction tag you have selected beforehand.\
  This number is based on the currency you have set up in your account settings.
* **A graph** with the uplift evolution over the past months. On hover, you can see the uplift history over the past 6 months. Data is updated on a daily basis and shows the data up to day-1.

The graph is not displayed when no uplift has been generated for at least two months. To see more data, click the uplift number to be redirected to the [ROI dashboard](/reporting-and-performances/roi-dashboard).

### No uplift <a href="#h_01hvvac7wegcw6weqkee6gx2c9" id="h_01hvvac7wegcw6weqkee6gx2c9"></a>

Here are the main reasons why you may not see any uplift on your campaign dashboard:

#### **No transaction tag has been implemented on your account** <a href="#h_01hvvac7wen98ym2g0bc70hptg" id="h_01hvvac7wen98ym2g0bc70hptg"></a>

The uplift calculation is only available on accounts where at least one transaction tag is implemented. To do so, please refer to [All about tags](broken://pages/kqhGHAgV5lYeW4ItvmBu).

#### **You have just implemented a transaction tag** <a href="#h_01hvvac7wek41905gvwj694n2h" id="h_01hvvac7wek41905gvwj694n2h"></a>

#### ![](/files/LARnXxvBEjGXH01gXiwg) <a href="#h_01hvvac7wej9xwr9kmd0ah28zd" id="h_01hvvac7wej9xwr9kmd0ah28zd"></a>

The uplift calculation is made on a daily basis and aggregated every month. If you have just implemented your transaction tag, the uplift metric will be updated as soon as your campaigns will start collecting data.

#### **The month has just started** <a href="#h_01hvvac7wepzywvrphhy338zj7" id="h_01hvvac7wepzywvrphhy338zj7"></a>

If you are looking at the uplift when the month has just started, it probably means that your campaigns’ data have not been aggregated yet and taken into account in the uplift calculation.

#### **You have campaigns running for months, but no uplift recorded on the tag** <a href="#h_01hvvac7wea4v160sysv09ch5e" id="h_01hvvac7wea4v160sysv09ch5e"></a>

#### ![](/files/LARnXxvBEjGXH01gXiwg) <a href="#id-01jd4d5jcj0yygzeg3hafxsnh8" id="id-01jd4d5jcj0yygzeg3hafxsnh8"></a>

You have one or several campaigns that have been running for several days and/or months, but you don’t see any uplift generated. It probably means that your campaigns would not make any profit. Depending on the type of campaign, you can consider the following solutions:\
For test campaigns:

* It can mean that the uplift is negative on your running campaigns, your tests have generated secured gain instead.
* You may consider reviewing your test hypothesis and change your modifications if necessary.

For personalization campaigns:

* You may consider keeping 10% of your visitors on the original version to enable uplift calculation.

#### **No campaigns are currently running on your account** <a href="#h_01hvvac7we9jrqs49ef6b7a4k5" id="h_01hvvac7we9jrqs49ef6b7a4k5"></a>

The uplift can’t be calculated when no campaigns are live on your account. The uplift metric will be updated as soon as you will launch at least one campaign and that it will start collecting data.

## Use case <a href="#h_01hvvac7we3hjqxvdww8yq6k98" id="h_01hvvac7we3hjqxvdww8yq6k98"></a>

Let’s say your uplift card shows 7.5k for the *Transaction* affiliation in December 2021.

* When clicking the timeframe or “i” icon, you are redirected to the ROI dashboard.
* When hovering the graph on December 2021, you can see that the number displayed is equal to the uplift number displayed on the card.
* When clicking the transaction tag name, you can switch the transaction tag and display its corresponding uplift.

From the ROI dashboard, to retrieve the uplift value, you must select the exact same transaction tag in case you have several transaction tags implemented. If you select several accounts, this value will be different. For more information on the ROI dashboard, refer to [ROI Dashboard](/reporting-and-performances/roi-dashboard).


# Types of campaigns

AB Tasty enables you to configure different campaign types designed to meet various optimization and personalization needs. These campaigns can be categorized into two main pillars: experimentation (tests) and personalization.

If you don’t know which type of campaign to choose, our [virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

## Tests <a href="#h_01jaq3k7z3fxbmw7zdzmv0jbq0" id="h_01jaq3k7z3fxbmw7zdzmv0jbq0"></a>

A/B testing is an activity that consists of **challenging or testing, elements of a website to find out whether an alternative will increase engagement and conversions**. A/B testing is also a great way to identify the next innovation worth investing in, or for determining what is minimally viable.&#x20;

AB Tasty offers several types of testing campaigns with your departure hypothesis and what you want to challenge.

### &#x20;A/B Test <a href="#h_01jaq3x6gd9yf3wabmgbs2aza1" id="h_01jaq3x6gd9yf3wabmgbs2aza1"></a>

An A/B test enables you to **test the performances of a new version of an element on your website** (e.g., CTA, header, image, wording). After analyzing the results of your test, you need to decide which version has performed best according to the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate). You can then apply these changes directly to your website.

👉 Learn how to configure a [A/B Test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-an-ab-test).&#x20;

### &#x20;Multipage Test <a href="#id-01jaq3xr001j23ngjm9faxfjnc" id="id-01jaq3xr001j23ngjm9faxfjnc"></a>

A Multipage Test consists of modifying **one element on several pages that don’t share the same layout** (e.g. homepage, product pages, and basket page), and measuring if the new user journey variation(s) will be more or less performant than the original.

👉 Learn how to configure a [Multipage Test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-multipage-test).&#x20;

### &#x20;Multivariate Test <a href="#id-01jaq3xsc2c7jp396rqebpvaqt" id="id-01jaq3xsc2c7jp396rqebpvaqt"></a>

Multivariate tests enable you to **test combinations of changes simultaneously**. You can change several elements on a page simultaneously and identify which of the possible combinations performs best.\
Unlike an A/B test, which involves testing each hypothesis in a different test, a multivariate test allows you to run hypotheses at the same time and to find the best combination of all.\
The purpose of multivariate tests is to measure the interactive effects between several supposedly independent elements (e.g. page title and visual illustration).

👉 Learn how to configure a [Multivariate Test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-multivariate-test).&#x20;

## Patch <a href="#id-01jaq3xv0m8v1k6ep0ed6vyz2t" id="id-01jaq3xv0m8v1k6ep0ed6vyz2t"></a>

A Patch consists of modifying **one or several elements on one page** (for example, your homepage, basket page, etc.) **or several pages that share the same layout** (all your product pages or all your results pages, etc.).\
Patching your website means **changing a piece of code to correct an error or to push out an important piece of content or information as soon as possible**.

👉 Learn how to configure a [Patch](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-patch--multipage-patch).&#x20;

### &#x20;Multipage Patch <a href="#id-01jaq3z7g4wqznmdy91qrwrfj2" id="id-01jaq3z7g4wqznmdy91qrwrfj2"></a>

A Multipage Patch consists of modifying **one or several elements on different pages** (for example, your homepage, basket page, etc.) **or several pages that share a different layout** (all your product pages and all your results pages, etc.).

👉 Learn how to configure a [Multipage Patch](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-patch--multipage-patch).&#x20;

### &#x20;Split/ Redirection Test <a href="#id-01jaq40946kvg3c0brmyfd4a1c" id="id-01jaq40946kvg3c0brmyfd4a1c"></a>

A Split Test consists of **redirecting traffic from one or several pages of your website to new versions of these pages that you want to test**. Visitor activity on the new pages is measured to evaluate whether they are more or less effective than the original versions of these pages. This type of campaign is similar to a classic A/B test but instead of creating a new variation using AB Tasty’s visual or code editor, the new pages need to be developed on the client side and hosted on your own servers.

👉 Learn how to configure a [Split/ Redirection Test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-split-testtest-by-redirection).&#x20;

## Personalizations <a href="#h_01jaq38y1q1sqyyvvt9ftyvnnp" id="h_01jaq38y1q1sqyyvvt9ftyvnnp"></a>

Personalization is an activity that consists of **pushing a specific and relevant message, content, or experience to a specific segment of visitors at the right moment of their user journey on your website**.&#x20;

AB Tasty offers several types of personalization campaigns to address your needs: number and type of pages to personalize, number of alternative experiences for different segments, necessity to prioritize certain messages regarding other ones. The aim of these types of campaigns is mainly to **get more conversions on your website**, to **increase the engagement of your visitors** and to enable them to have a powerful, pleasing and **long-term experience on your website**.

There are 3 types of personalization campaigns available in AB Tasty, that you can configure depending on your target(s) and appropriate page(s).&#x20;

### &#x20;Simple Personalization <a href="#h_01hvvae91q93yda9d5jw7zd74p" id="h_01hvvae91q93yda9d5jw7zd74p"></a>

This type of personalization is relevant if:

* You want to display a message to a **unique segment**\
  E.g., Visitors who have bought a winter coat in the past two months.
* You want to display a message on **one page only** (or the same types of pages)\
  E.g., Displaying a coupon code in a popin on your homepage only.

You can thus display a **unique personalized message** for a **specific segment** on a **specific page** only (or the same type of pages).\
\
👉 Learn how to configure a [Simple personalization](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-simple-personalization).&#x20;

### &#x20;Multi-page Personalization <a href="#h_01hvvae91qmre078580mj60qbn" id="h_01hvvae91qmre078580mj60qbn"></a>

This type of personalization is relevant if:

* You want to display a message to a **unique segment**\
  E.g., Visitors who have bought a winter coat in the past two months.
* You want to display a message on **several pages** (or several types of pages)\
  E.g., A coupon code that will be displayed as a popin on your homepage, as a small banner on your product pages and as a large banner on the cart page.

You can thus display **several complementary messages** for a **specific segment** on a **user journey** on your website.\
\
👉 Learn how to configure a [Multipage personalization](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-multipage-personalization).

### &#x20;Multi-experience Personalization <a href="#h_01hvvae91qf5nj73t3cm9p58gs" id="h_01hvvae91qf5nj73t3cm9p58gs"></a>

This type of personalization is relevant if:

* You want to display **several distinct messages** for **several distinct segments**\
  E.g., Visitors who have bought a winter coat in the past two months, visitors who have bought at least once during the past two months and visitors who haven’t bought anything during the past two months.
* You want to display a message on **one page only** (or the same types of pages)\
  E.g., Displaying a coupon code in a popin on your homepage only.

With this advanced type of campaign, you can manage a commercial operation or a global communication by ensuring that a visitor to your website only sees the message they are eligible for (the experience for which they are targeted) or **the message which has the highest priority**, in the case of overlap, that is to say when a visitor matches more than one target at a time.\
Thus, it also enables you to display **several distinct messages** for **dedicated segments**, and to establish a priority order so that a visitor who matches more than one target and is eligible for more than one message doesn’t see both but only the more relevant one (with the highest priority).\
\
👉 Learn how to configure a [Multi-experience personalization](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-multi-experience-personalization).


# Choosing the right type of campaign with Ally, our assistant

## An introduction to Ally, your AB Tasty virtual assistant <a href="#h_01j3de0f7y4mrcsrmvkexrskdf" id="h_01j3de0f7y4mrcsrmvkexrskdf"></a>

**Ally is your virtual assistant** – a module that can **guide you towards the right type of campaign for your needs**. Ally will pose various questions about your objectives, the type of message or version you want to create, the segment you want to target, and so on. This will help you select the best campaign for your specific objectives. It is important to select the right type of campaign for the following reasons:

* **Reports differ according to the type of campaign**, as their purpose is to meet the user’s expectations. In order to create the best campaign insights, you need to choose the right type of campaign to begin with.
* Regarding campaign duplication, the AB Tasty matrix provides **actions that are specific to the type of campaign you choose**: for example, transforming a winning variation into a temporary patch or transforming an AB test into a multipage test. Therefore, choosing the right type of campaign beforehand will help you optimize your website over the long term.

The final screen of the Virtual Assistant displays a recommendation on the type of campaign you should create, with a definition, a tip, and a link to specific **tips** you can also find in this article.\ <br>

<figure><img src="/files/QSkIUUxYNgXJ3yz4i50K" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="success" %}
From the final screen, we recommend clicking the related helper to open it in the right panel (**Need help?**). You can also click the **Create** button to open the **Main Information Step** of your newly created campaign. This way, it will serve as a reference during the configuration process of your campaign. The tips provided in this helper will be very useful as you configure your campaign.
{% endhint %}

## Access Ally <a href="#h_01j3de0f7yb4v4q4d08tp0w3g7" id="h_01j3de0f7yb4v4q4d08tp0w3g7"></a>

{% stepper %}
{% step %}
Access your campaigns dashboard
{% endstep %}

{% step %}
Click on **Create +** button
{% endstep %}

{% step %}
Select Ally tile.
{% endstep %}
{% endstepper %}

## Details about questions and options <a href="#h_01j3de0f7yb4v4q4d08tp0w3g7" id="h_01j3de0f7yb4v4q4d08tp0w3g7"></a>

### **The main objective of you campaign** <a href="#h_01j5tfwszpdknswny44qah3abr" id="h_01j5tfwszpdknswny44qah3abr"></a>

<img src="/files/ZjT0loYe1wRi7lQLl8Xq" alt="" width="375">

* **Test one or more changes on your website:** you need to experiment something new before deciding if you invest in the change or not. It could be small things such as color scheme, wordings, images, or somthing bigger such as your whole navigation, different blocks on a page, delivery methods etc.
* **Customize your visitor's experience:** you want to personalize a block, a color, a page, from a tiny element to a whole experience for a specific audience, and want to monitor your metrics to be sure this action has a positive impact on your website's performance
* **Temporarily correct a website element:** you need to fix an element asap (mis-alignment, legal information, etc.) but you don't need to monitor performance
* **Collect data on your website:** you just need to gather data about your visitor's behaviour

### **The type of change** <a href="#id-01j5tgb4wk29v3h65qv8hghawt" id="id-01j5tgb4wk29v3h65qv8hghawt"></a>

<img src="/files/tRgCUBdOSNxmddXvIal8" alt="" width="375">

Depending on the volume and complexity of the changes you wish to make, the type of campaign we propose will differ.

**One change:** it can be a CTA, an image or a banner for example

**Several changes:** a CTA, an image and a banner at the same time, because you need to check which type of combination will have the greatest impact.

**An entire page:** you want to change the entire layout of your page

### **The location of your changes** <a href="#h_01j5tqjqhvznn67dqs7de9asyn" id="h_01j5tqjqhvznn67dqs7de9asyn"></a>

<img src="/files/ftccduAHFX7dp9xPCPLx" alt="" width="375">

Modifications can be made to **a single page** (homepage type) or to **several pages or on the entire website**, on a series of pages sharing the same layout and organization of elements (product pages type).

<img src="/files/NZBJst9CD6d4w0OhbvjL" alt="" width="375">

<img src="/files/NLLsl6dv0gBUL9d3tGTA" alt="" width="375">

However, the most important thing to consider is whether the targeted pages have the **same** or a **different structure**, depending on the element you wish to modify or add. What counts above all is whether the element to be modified is present in the same place on the page, whether the html is strictly the same around it (e.g.: a header is often identical on all the pages of an e-commerce site, even if the layout is different).&#x20;

{% hint style="success" %}
If you're planning to add a banner overlay to your site, assume that all pages have the same layout, since this won't be taken into account when adding the banner.
{% endhint %}

### **The audience** <a href="#h_01j5wgapkqne928a69csh410nn" id="h_01j5wgapkqne928a69csh410nn"></a>

<img src="/files/m46Qjo4OktzOpD1uchXZ" alt="" width="375">

The audience you're targeting will have an impact on the type of campaign you choose for personalization, as some visitors to your site may belong to several audience segments at the same time (e.g. “VIP” segment and “Parisian” segment), and you may want to prioritize exposure to a particular message.


# How to create a campaign

AB Tasty enables you to create several types of campaign according to the hypothesis you want to test:

#### Tests/ Experimentations: <a href="#h_01j9p1159sahjfpqmtvs3972xn" id="h_01j9p1159sahjfpqmtvs3972xn"></a>

* [A/A test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-an-aa-test)
* [A/B test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-an-ab-test)
* [Multipage test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-multipage-test)
* [Multivariate test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-multivariate-test)
* [Patch](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-patch--multipage-patch)
* [Multipage patch](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-patch--multipage-patch)

#### Personalizations: <a href="#h_01j9p11dfbnet56jt908ete2tq" id="h_01j9p11dfbnet56jt908ete2tq"></a>

* [Simple personalization](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-simple-personalization)
* [Multipage personalization](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-multipage-personalization)
* [Multiexperience personalization](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-multi-experience-personalization)

You can create a campaign from different locations of the platform.

## With the Create Button of the campaign list <a href="#h_01j9p0b1rqsffs1my1fm89j60d" id="h_01j9p0b1rqsffs1my1fm89j60d"></a>

The main way to create a campaign is from the campaign list page:

1. Go to the [Web Experimentation](https://app2.abtasty.com/experiments) or [Personalization](https://app2.abtasty.com/customizations) page.
2. Hover over the *Create* button.
3. Click on the type of campaign you want to create:\
   You will be redirected to the [Main information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

<img src="/files/Zx9ygFDPcg5ePf9oe0ot" alt="" width="201">

To create a Split Test, you must create an A/B test and activate the *redirection* option in the visual editor.

If you're not sure which type of campaign to choose, you can use our [Virtual Assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant).

## From a library element (widget, segment or trigger) <a href="#h_01j9p4g7sz285beyydtrfhwtvf" id="h_01j9p4g7sz285beyydtrfhwtvf"></a>

### From a widget <a href="#h_01j9p4g7szy3mgvwws084pa6xe" id="h_01j9p4g7szy3mgvwws084pa6xe"></a>

You can create a campaign from a specific widget. In this case, the chosen widget will be added by default in the editor. To do so, apply the following steps:

1. Go to *Library* > *Widgets*.
2. Select the widget from which you want to create a campaign and click *Use*.
3. Select the campaign type and enter a name and URL.
4. Click *Go to the editor*:\
   The URL of the page you specified will display in the visual editor with the widget already added and ready to be configured.

<img src="/files/vZ2zPyTmued58ii3QO9P" alt="" width="375">

You can also create a campaign from a widget preset (*Presets* tab) or from a custom widget (*Your widgets* tab) by following the same procedure.

### From a segment or trigger <a href="#h_01j9p4mjjp8z9afm4tp2ph10cm" id="h_01j9p4mjjp8z9afm4tp2ph10cm"></a>

You can create a campaign from a specific segment (or trigger). In this case, the segment (or trigger) will be automatically selected in the *who* section (or *how* section) of the Targeting step of your campaign. To do so, apply the following step:

1. Go to **Library > Segments** (or *Triggers*).
2. Select the segment/trigger from which you want to create a campaign and click the **+** icon at the end of the line.
3. Select the type of campaign: personalization or test.
4. From the [Main information page](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step), select the campaign type and enter a name and URL.
5. Click **Save**:\
   Your segment/trigger is already added to the targeting step.

## ![](/files/iBzfoOL0iCcyb27i2DPg) <a href="#h_01j9p5gqsfbwzn6cj6breznwhg" id="h_01j9p5gqsfbwzn6cj6breznwhg"></a>

## With the Chrome extension <a href="#h_01j9p0b1rq1475vf91hr4he3w8" id="h_01j9p0b1rq1475vf91hr4he3w8"></a>

AB Tasty has released a Chrome extension to create a campaign directly from your website page.

To download the Chrome extension, please follow this [link](https://chrome.google.com/webstore/detail/ab-tasty/bdiahcebghgckgbgmjhdbecjkedpcidn).

For more information about the AB Tasty Chrome extension, please visit our specific section about the Chrome extension in the[ visual editor guide.](/web-experimentation-and-personalization/editors-and-widget/visual-editor/discovering-the-visual-editor)

This option is useful for loading logged pages.

## With the Duplicate option <a href="#h_01j9p0b1rq95zk99dfyc2bbrb6" id="h_01j9p0b1rq95zk99dfyc2bbrb6"></a>

If you want to duplicate an existing campaign and create a new one (and potentially modify some elements of the original test setup), you can use the *Duplicate* option in the campaign list.

<img src="/files/c2amm762IrAVq8BbiW4C" alt="" width="375">

1. Click on the three dots on the right side of the campaign line you want to duplicate.
2. Click on the first option: **Duplicate***.*\
   The duplication modal opens. From here, you can:
   * Modify the account where you want to create your new campaign.
   * Modify the name of your new campaign (otherwise the name will be the same with **(duplicate)** added at the end).

For more information about duplication and transformation use cases, please refer to [this](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-duplication) article.


# Experimentations


# How to create an A/B Test

An A/B Test consists of **modifying one element on one page** (e.g. homepage, basket page, etc.) **or a string of equivalent pages that share the same layout** (e.g. all of your product pages, all of your results pages, etc.), and measuring if the new variation(s) will be more or less performing than the original.

![](/files/J1LlwrF8STIikIP1gLWp)

To learn more about the differences between each type of test, refer to the [Types of campaigns](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns) article. If you don’t know which type of campaign to choose, [our virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

To create an A/B test, go to Web Experimentation, click the *Create* button and select *A/B Test*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new A/B Test campaign.

We recommend establishing a hypothesis of your test according to the following model: If I apply \[this change on my webpage] to \[this audience], then \[it will impact] and enables to enhance \[this goal]. And to add it in the *hypothesis* field.

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

You have two ways to create content for your campaign in AB Tasty:

#### With the visual editor <a href="#h_01jaqggmj6myf2mnsjpk4wbw0e" id="h_01jaqggmj6myf2mnsjpk4wbw0e"></a>

With the Visual Editor, you can make simple modifications such as changing the color of a button, replacing an image, changing the wording of an element. If it is clickable, always put an action tracking on the element you modify.

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide](/web-experimentation-and-personalization/editors-and-widget/visual-editor/discovering-the-visual-editor)

#### With the code editor <a href="#id-01jaqggzv9fvy8cbj5vb8enyps" id="id-01jaqggzv9fvy8cbj5vb8enyps"></a>

The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.

👉 To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor).

### Step 3: Goals <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

As the primary goal enables you to determine which variation takes precedence over the others, you should choose the action tracking related to the element you have modified. Indeed, it is the user behavior that is more likely to be affected by the modification you have made in the editor.

👉 To learn how to configure Goals, please read [Campaign flow: Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step).

### Step 4: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

You have to declare **WHERE** your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for **WHOM** (e.g. your whole traffic, mobile users only, etc.), and in **WHICH** conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. You can also decide **WHEN** visitors will see the campaign depending on the recurrence you choose.

Be careful when entering the targeted pages (in the *Where* section) of your test to ensure that it will display correctly on the pages you want to target (e.g. Product pages).

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 5: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

By default, traffic allocation is set equally for each variation (50/50 for an A/B test, 33/33/33 for an A/B/C, etc.). For statistical reasons, it is recommended to not make uneven traffic allocation.

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 6: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.
* Activate **Sequential testing** to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 7: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracking\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

## Use cases <a href="#h_01jaq4j164wgmnhzj99ed2d0fv" id="h_01jaq4j164wgmnhzj99ed2d0fv"></a>

A/B tests can be used in the following cases:

| **🖊️ Action / modification**                                                          | **🎯 Goal(s)**                                                                                                                           |
| -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| Challenging the color of a CTA                                                         | Limiting anxiety of the CTA and easing the add to basket action.                                                                         |
| Changing the order of the labels in the navigation bar                                 | Boosting access to the Christmas shop section.                                                                                           |
| Hiding blocks in the Homepage                                                          | Reducing the bounce rate.                                                                                                                |
| Changing the position of the related articles links in the article pages               | Increasing the number of viewed pages per session.                                                                                       |
| Implementing a pop-up displaying the user’s basket items upon returning to the website | [See how Pets at Home drove more users to the checkout & confirmation page](https://www.abtasty.com/resources/pets-at-home-case-study/). |


# How to create a Multipage Test

A Multipage test enables you to test **a new version of one or several elements** **across a user’s journey**, that is to say on different pages which don’t share the same structure (such as the homepage, the product pages and the basket page). These element(s) may have different layouts depending on page structure.\
As for A/B tests, after analyzing the results of your test, you need to decide which version has performed best according to the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate). You can then apply these changes directly to your website.

<img src="/files/lFVMIaZjRm8xNySn3wjX" alt="" width="375">

To create a multipage test, go to Web Experimentation, click the *Create* button and select *Multipage Test*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new Multipage Test campaign.

We recommend establishing a hypothesis of your test according to the following model: If I apply \[this change on my webpage] to \[this audience], then \[it will impact] and enables to enhance \[this goal]. And to add it in the *hypothesis* field.

In the *Pages* section, enter the URL you want to load in the editor for each page or group of pages. Each page coincides with a part of the user's journey you want to test. You need to include at least 2 pages which must be different (e.g.,: the product pages and the basket page).

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

You have two ways to create content for your campaign in AB Tasty:

#### With the visual editor <a href="#h_01jaqggmj6myf2mnsjpk4wbw0e" id="h_01jaqggmj6myf2mnsjpk4wbw0e"></a>

You must adapt the modification to each page you have configured. Each page has the same number of variations, as you build an entire new user’s journey.\
If it is clickable, always put an action tracking on the element you add or modify in order to follow the performance of your campaign (e.g.,: cross to close the popin, CTA in the popin etc.). Don’t forget to put these action trackings on each page.

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide](/web-experimentation-and-personalization/editors-and-widget/visual-editor---discovery)

#### With the code editor <a href="#id-01jaqggzv9fvy8cbj5vb8enyps" id="id-01jaqggzv9fvy8cbj5vb8enyps"></a>

The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.

👉 To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor)

### Step 3: Goals <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

As the primary goal enables you to determine which variation takes precedence over the others, for Multipage tests, exceptionally, your primary goal should be the result of the user’s journey, regarding the main goal of your test: retention (primary goal should be the number of viewed pages), loyalty (revisit rate) or conversion (transaction rate).\
You should also choose the action tracking related to the elements you have modified as secondary goals. Indeed, this is the user behavior that is most likely to be affected by the modification you have made in the editor.

👉 To learn how to configure Goals, please read [Campaign flow: Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step)

### Step 4: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

You have to declare **WHERE** your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for **WHOM** (e.g. your whole traffic, mobile users only, etc.), and in **WHICH** conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. You can also decide **WHEN** visitors will see the campaign depending on the recurrence you choose.

**The target pages (*****Where*****&#x20;section)must be different for each page**, as they relate to a specific step in the user’s journey. The segment(s) (*Who* section) must be the same for each page.\
Don’t forget to configure the targeting for each page. If one or several sections (*Who*, *Where*, *How*) have the same configuration, you can use the [Replicate targeting option](/web-experimentation-and-personalization/targeting-step/how-to-use-the-replicate-targeting-option).

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 5: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

By default, traffic allocation is set equally for each variation (50/50 for an A/B test, 33/33/33 for an A/B/C, etc.). For statistical reasons, it is recommended to not make uneven traffic allocation.

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 6: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 7: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracking\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

## Use cases <a href="#h_01jaqsqd269nnqh63eftbhg5t0" id="h_01jaqsqd269nnqh63eftbhg5t0"></a>

Multipage tests can be used in the following cases:

| **🖊️ Action / modification**                                                                                                                                             | **🎯 Goal(s)**                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| Changing the color of the ‘Add to cart’ CTA, visible on product pages and list pages (quick buy)                                                                          | Limiting anxiety of the CTA and easing the add to cart action.                                                  |
| Adding delivery fee information on different pages (every 5 items in the product list, in the product description of the product pages and as a banner in the cart page). | Monitoring the impact of giving more transparent information about delivery fees across the customer’s journey. |
| Replacing indoor pictures with outside photographs throughout the website.                                                                                                | Finding the best way to shoot your models regarding the appetence of your audience for real life photographs.   |


# How to create a Split Test/Test by Redirection

A redirect test (or split test) enables you to **test the performance of a new page,** created and hosted outside of AB Tasty. This page is used **as a variation** within an A/B test campaign.

This type of test is useful when modifications involve a significant amount of work (e.g.: a brand-new design).

In this case, 2 URLs are involved:

* The **source URL**, that is to say the one corresponding to the original version. This is the URL from which you want your visitors to be redirected.
* The **destination URL**, that is to say the new page used as a variation. This is the page the visitors will be redirected to when they land on the source URL.

As in a classic A/B test, after analyzing the results of your test, you will see if the destination URL has performed better than your original version depending on the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate).

A Split Test is a type of A/B test. To create a Split Test, you must create an A/B test (go to Web Experimentation, click the *Create* button and select *A/B Test*) and activate the *Redirection* option from the visual editor.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new Split campaign.

We recommend establishing a hypothesis of your test according to the following model: If I apply \[this change on my webpage] to \[this audience], then \[it will impact] and enables to enhance \[this goal]. And to add it in the *hypothesis* field.

In the URL field, enter the URL you want to load in the editor. This URL corresponds to the source URL. It’s important if you want to set up trackings on this page, such as action trackings.

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

To run a Split test, you don’t need to create any specific content. The objective of this setup is to use the classic A/B test campaign workflow to activate a redirection of traffic from the former page (the original) to the new one(s) (the variations).

<img src="/files/l22VcWmjvuZdmkum02MD" alt="" width="244">

Variation 1 corresponds to the redirect page. To create the redirection, click on Variation 1 in the header navigation and select the redirect option. You can then paste the URL of the page you want to redirect to in the popin.

We recommend ticking the following boxes:

<p align="center"><img src="/files/ufhlya4rZIqz5KE2FB6q" alt=""><br></p>

* ***Check the accessibility of the page*** - This option automatically pauses the test when the redirected URL is no longer online (with an email alert to the admins of the account). Once your landing page is available again, another email will be sent and you will be able to play the test again.
* ***Keep AT Internet referrer in URL*** - If you use AT internet, this will ensure that you keep the original URL.
* ***Enable redirection*** - This option allows AB Tasty to perform the redirection. **You must select it.**\
  If you want to redirect to several pages, you can select the *Regular expression* option and enter the regular expression in the URL field.

In a redirected variation, you cannot add *Variation JavaScript* or make changes. Turning an existing variation (with changes) into a redirection variation deletes all the changes. Only action trackings can be added as they are not specific to a single variation but to the whole campaign.

👉 To learn more about the redirection option of the visual editor, please read the [How to use the redirection option](/web-experimentation-and-personalization/editors-and-widget/visual-editor/how-to-use-redirection-option)

### Step 3: Goals <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

As primary and/or secondary goals, you can choose action trackings which are common to the original variation and to the new page. For example: if your Split Test consists of testing a new landing page layout, your primary goal should be the bounce rate, along with optional secondary goals.

As the URL of the original version of your page is different from its variations, the code will probably be different. If you want to track clicks on the main CTA of both pages, follow these steps:

* First, add ***action tracking*** to the original page. You can access the original page in the editor – it’s displayed by default in the **Original** tab in the top banner of the visual editor. As with every tracker, AB Tasty will try to detect the presence of the tracked element in both the original and the variation pages, even if this element is present on only one of the two.
* Next, do the same for the variation you want to test. If you return to the **Variation** tab, you will see the original version of your page – that’s normal; it’s because you’ve used this URL in the **Main Information Page**. To load the new one, go back to the **Main Information Page** and paste the new URL in the field named **URL to load in the editor,** and click save. Then go back to the editor. Your new page will be loaded in the **Variation** tab.
* Now you can add your tracker in the variation in the usual way. **Use the same name** as the tracker in the original version. This way all data collected on the original element and the new element will contribute to the same metric, even though they are hosted on different pages, with different IDs.
* Another solution is to code your trackers directly by adding JavaScript (global code added in the right side panel).

For the most efficient workflow in setting up an A/B test, list all your metrics and their trackers on a separate sheet or document (for example metric “click rate”, so tracker “click tracking on the element #mainCTA). Then implement all the trackers in the original variation, before finally implementing them all in the variation. Each time, you can copy and paste the tracker names from the list, to ensure none are overlooked and your associated metrics will have the same names. This is necessary to ensure all relevant data is collected under the same KPI in your campaign report.

👉 To learn how to configure Goals, please read [Campaign flow: Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step).

### Step 4: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

You have to declare **WHERE** your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for **WHOM** (e.g. your whole traffic, mobile users only, etc.), and in **WHICH** conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. You can also decide **WHEN** visitors will see the campaign depending on the recurrence you choose.

You must target **the source URL.**

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 5: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

Traffic allocation must be identical for each variation.

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 6: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.
* Activate **Sequential testing** to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 7: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracking\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

If the AB Tasty tag is not implemented on the page which you want your visitors to be redirected to, they will be able to view the page but no data will appear on the reporting of your campaign.


# How to create an A/A Test

An A/A test is a type of campaign that enables you to gather insights about your website by tracking events or specific behaviors using the AB Tasty tag.

This is a type of test for which:

* The traffic allocation is 0% on the original version and 100% on the variation.
* The variation is empty: you don’t create any new content to push, so the campaign is totally transparent for your visitors.
* You have set up goals to follow in the reporting.

<img src="/files/p2ID6LzMIcc8XjMHBsxO" alt="" width="324">

So, what’s the point of an A/A Test?

* **Gathering baseline data:** All market analytics tools track events differently (technologically and also in the way they calculate certain metrics). Thus, it’s normal to observe differences between the metrics displayed by two different analytics tools. With an A/A Test, you can collect your visitors’ main KPIs using AB Tasty and establish a baseline to analyze your future campaigns more accurately.
* **Analyzing before and after revamp:** If you’re planning a large revamp of an important feature on your website and can’t A/B test the two versions, it’s important to have a record of the previous performance of this feature. For example, let’s say you want to change the structure of your navigation bar. If you launch an A/A Test before the release, you’ll get the exact click rates for each tab. After the revamp, another A/A Test will enable you to collect the new click rates on the new tabs and, after several weeks, you’ll be able to measure the impact of your release on the navigation behavior.
* **Adding click zones or segment performance:** You can also use A/A Tests to track the behavior of your visitors with different product categories to compare them or analyze their performance per segment.

To learn more about the differences between each type of test, refer to the [Types of campaigns](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns) article. If you don’t know which type of campaign to choose, [our virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

To create an A/A test, go to Web Experimentation, click the *Create* button and select *A/A Test*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new A/A Test campaign.

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

As the A/A test objective is not to change content of your website but to gather data and insights, you can still use the Visual Editor but only to create trackers.

In the Editor, you can add trackers to your campaign, such as click trackings, custom trackers and widget trackers.

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide.](/web-experimentation-and-personalization/editors-and-widget/visual-editor---discovery)

### Step 3: Goals <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

Once you’ve set up your trackers, you can preconfigure your future reporting to easily identify the metrics needed to track your primary goal. The notions of primary and secondary goals are not significant with A/A Tests because the objective here is to recall all the trackers you’ve set-up in the editor.

Once your campaign has started, you can add secondary goals, but action tracker such as clicks or widgets won’t be retroactive in your reporting and will be calculated from the date you added these metrics as goals. All the other goals will be calculated from the date you launched your A/A Test, even if you add them afterward.

By default, A/A Test will embed some goals like:

* Transaction Goal
* Bounce Rate
* Number of pages viewed
* Revisit Rate
* Scroll Rate Tracking
* Dwell-Time Tracking
* Account Action Tracker

The Transaction Goal will be set as the Primary Goal if you have a transaction tag implemented. If not the bounce rate will.

<img src="/files/rCRKuBXy5Y7u7uKdZ0ng" alt="" width="563">

👉 To learn how to configure Goals, please read [Campaign flow: Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step).

### Step 4: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

You have to declare **WHERE** your campaign should be visible on your website (e.g. on every page, on specific pages, on only one page, etc.), for **WHOM** (e.g. your whole traffic, mobile users only, etc.), and in **WHICH** conditions (e.g. after a certain number of pages, when it’s cold outside, etc.) it should appear. However, you can't change **WHEN** visitors will see the campaign depending on the recurrence as the A/A test will be instantly trigger.

Be careful when entering the targeted pages (in the *Where* section) of your test to ensure that it will display correctly on the pages you want to target (e.g. Product pages).

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 5: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

By default, traffic allocation it is locked to 100% of your traffic to the variation.

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 6: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 7: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracker you applied\
👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your A/A Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)


# How to create a Patch / Multipage Patch

A Patch or Multipage Patch consists of modifying:

* One or several elements on one page (for example, your homepage, basket page, etc.) or several pages that share the same layout (all your product pages **or** all your results pages, etc.).
* One or several elements on different pages (for example, your homepage, basket page, etc.) or several pages that share a different layout (all your product pages **and** all your results pages, etc.).

Patching your website means changing a piece of code to correct an error or to push out an important piece of content or information as soon as possible.

The objective of patching is not experimental or personalization, but only to make a very fast change to a page of your site to fix an error or update something urgent. Therefore, you don't have to set up Goals and it does not generate any reporting.

A patch campaign:

* is always pushed to all of your audience – you can’t choose a specific segment.
* is always pushed to 100% of your traffic.
* can’t be analyzed as it does not generate any reporting.
* can tell you how many unique visitors have been exposed to the patch (this data is pushed directly to the dashboard).
* You can also force your opt-out visitors to see your patch campaigns.

To learn more about the differences between each type of test, refer to the [Types of campaigns](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns) article. If you don’t know which type of campaign to choose, [our virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

To create a Patch or Multipage Patch, go to Web Experimentation, click the *Create* button and select *Patch* or *Multipage Patch*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new Patch campaign.

We recommend adding a description to your campaign to add useful information you want to share with your team. For example: “This patch will fix a typo error on product # 447 158”.\
In the URL field, enter the URL you want to load in the editor.

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

You have two ways to create content for your campaign in AB Tasty:&#x20;

#### With the visual editor <a href="#h_01jaqggmj6myf2mnsjpk4wbw0e" id="h_01jaqggmj6myf2mnsjpk4wbw0e"></a>

The visual editor enables you to manage your Patch by adding or removing new variations, creating visual modifications, or adding action tracking (click tracking) to record the performance of the elements you’re about to challenge.

You can’t add trackings because patch campaigns have no reporting and are aimed at following performance.

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide](/web-experimentation-and-personalization/editors-and-widget/visual-editor/discovering-the-visual-editor)

#### With the code editor <a href="#id-01jaqggzv9fvy8cbj5vb8enyps" id="id-01jaqggzv9fvy8cbj5vb8enyps"></a>

The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.&#x20;

👉 To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor).

### Step 3: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

By default, a patch is displayed to your whole audience, that’s why you can’t change the **WHO** section when targeting a patch.&#x20;

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 4: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.&#x20;

* Select a **loading method** for your campaign.

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 5: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :&#x20;

\- the targeting configuration\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

In AB Tasty, you can display campaigns even if your visitors have not yet given their consent. For patch campaigns, no data is collected but, by default, they are displayed only when the visitor has given their consent. To display patches to all visitors including those who have not yet given their consent, go to *Settings* > *Cookies* > *Cookie deposit* and check the Patch box. For more information, refer to [Managing your visitors’ Privacy](/account/performance-and-security/consent-policy---cookies-storage-and-privacy).

## Use cases <a href="#h_01hvvae28h9scarr4avyxzhaz5" id="h_01hvvae28h9scarr4avyxzhaz5"></a>

### Use case 1: Creating a patch from scratch <a href="#h_01hvvae28hrdsps0yt27aja2mw" id="h_01hvvae28hrdsps0yt27aja2mw"></a>

You can create a patch from scratch, for example:&#x20;

* To correct a typographical error
* To modify a legal mention
* To add a health message
* To hide a CTA (e.g.: when experiencing a stock shortage)

### Use case 2: Transforming a winning test variation into a patch <a href="#h_01hvvae28h4xghxfd3fpx4qdvj" id="h_01hvvae28h4xghxfd3fpx4qdvj"></a>

To transform a winning test variation into a patch, apply the following steps:

1. From the dashboard, hover over the test you want to use as a reference for your patch.
2. Click and *Duplicate*.
3. Choose *Patch* from the first dropdown menu.
4. Choose the variation you want to push to 100% of your users (the winning one) and validate:\
   Your patch appears in the test dashboard.

Your campaign set-up is imported from the source test but you can add or modify information if needed. Make sure you have a description of your patch campaign.

You can also duplicate the winning variation of a multipage test into a patch. In this case, you must create one patch per page as this type of campaign does not allow you to have several pages.


# How to create a Multivariate Test

A Multivariate test enables you to **test combinations of changes** simultaneously on your website. You can change several elements on a page simultaneously (e.g., the color and wording of a CTA) and identify which of the possible combinations performs best according to the goal you wanted to reach (e.g., increasing the number of clicks, the number of pages viewed, decreasing the bounce rate). You can then apply these changes directly to your website.\
Unlike an A/B test, which involves testing each hypothesis in a different test, a multivariate test allows you to run hypotheses at the same time and to find the best combination of all.\
The purpose of multivariate tests is to measure the interactive effects between several supposedly independent elements (e.g. page title and visual illustration).\
A subtest contains variations that will be tested independently across multiple combinations. For example, if your goal is to test a simple CTA, you might want to create three subtests: Color, Shape, Wording, with as many variations of colors, shapes and wordings as necessary. AB Tasty will create all the possible combinations and display them randomly to your traffic.

<img src="/files/VQctyZvoQXG1OixP7qpn" alt="" width="375">

To learn more about the differences between each type of test, refer to the [Types of campaigns](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns) article. If you don’t know which type of campaign to choose, [our virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

To create a Multivariate test, go to Web Experimentation, click the *Create* button and select *Multivariate Test*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

The number of combinations created is calculated as follows: \[Number of variations of the 1st subtest]\*\[Number of subtests].\
The more subtests with variations you configure, the more traffic you need to allocate the different combinations.\
In this case, the readiness of your campaign and data reliability takes more time to be reached than a classic A/B test.

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

In Multivariate Tests, you can’t add goals with our standard goals setup step - it is not available for this type of test. Only the transaction goal is available and preselected. This is also why, in the editor, you can't add action trackings or tracking widgets.

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new Multivariate Test campaign.

We recommend establishing a hypothesis of your test according to the following model: If I apply \[this change on my webpage] to \[this audience], then \[it will impact] and enables to enhance \[this goal]. And to add it in the *hypothesis* field.

By default, only one subtest is created, but you can add as many subtests as necessary. For each subtest, enter the URL you want to load in the editor. In most cases, you must enter the same URL for all subtests.

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

You have two ways to create content for your campaign in AB Tasty:

#### With the visual editor <a href="#h_01jaqggmj6myf2mnsjpk4wbw0e" id="h_01jaqggmj6myf2mnsjpk4wbw0e"></a>

For each subtest, you can add as many variations as you want. For example, if your subtest one is related to the color of a button. In a variation 1, you can test the blue color and in a variation 2, a red color.

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide](/web-experimentation-and-personalization/editors-and-widget/visual-editor---discovery)

#### With the code editor <a href="#id-01jaqggzv9fvy8cbj5vb8enyps" id="id-01jaqggzv9fvy8cbj5vb8enyps"></a>

The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time. To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor).

👉 To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor).

### Step 3: Targeting <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

Be careful when entering the targeted pages (in the Where section) of your test to ensure that it will display correctly on the pages you want to target (e.g. Product pages).\
To trigger the test only for visitors using a specific device, use the Device criterion in the triggers section. When the Who, How and Where sections have the same configuration for each sub-test, you can use the [Replicate targeting option](/web-experimentation-and-personalization/targeting-step/how-to-use-the-replicate-targeting-option).

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 4: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

All users must be tracked. Each percentage of the targeted traffic is assigned to a subtest.

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 5: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 6: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracking\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your A/B Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

## Use cases <a href="#h_01jaq4j164wgmnhzj99ed2d0fv" id="h_01jaq4j164wgmnhzj99ed2d0fv"></a>

Multivariate tests can be used in the following cases:

| **🖊️ Action / modification**                                                   | **🎯 Goal(s)**                      |
| ------------------------------------------------------------------------------- | ----------------------------------- |
| Testing the wording and color of a CTA                                          | Increasing the conversions on a CTA |
| Testing the layout of several elements on a page (coupon code field, CTA, etc.) | Optimizing the shopping cart        |


# Evi Ideas

In need of inspiration or looking to accelerate your ideation process? The Ideas generator Evi Ideas is a feature designed to help you generate experiment ideas using AI.

If you are in need of inspiration or looking to accelerate your ideation process Evi Ideas is here to help. Evi Ideas is a feature designed to help you generate experiment ideas using AI.

This feature is in the early adoption phase. To benefit from it, please get in touch with your CSM.

Using generative AI CRO Experimentation Expert Agent, continuously improved to provide best practices, UX guidance, and cognitive bias considerations, Ideas Generator, provide relevant and actionable test ideas from an image or Gif.

Here’s how it works:

{% stepper %}
{% step %}
In your campaign dashboard, click on **Create**.
{% endstep %}

{% step %}
On the campaign type selection board, select the **Need new experimentation ideas?** tile.

<figure><img src="/files/k2vxN4HHOGiWWkSwKc8x" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Upload a screenshot or a GIF of the page you’d like to optimize.
{% endstep %}

{% step %}
Provide a bit of context to help Evi Ideas tailor its suggestions to your needs.

e.g.: I would like only ideas that enable me to reduce my bounce rate
{% endstep %}

{% step %}
Once ideas are generated, click on **Create a campaign from this idea.**&#x20;

The tool will auto-fill the first step of the campaign creation flow with the experiment name and hypothesis.
{% endstep %}
{% endstepper %}


# Personalizations


# How to create a Multi-Experience Personalization

A Multi-Experience Personalization displays a new experience, message, or piece of content on one or several different pages (homepage, basket page, etc.), for **at least 2 specific segments of visitors** to your website. This type of campaign lets you **prioritize the different experiences you have created**:

* If a visitor matches multiple segments (overlap), they will see only one experience with the highest priority (that you have put in place in the *Main information* step).
* If a visitor matches only one segment, they will see the experience for which they have been targeted.
* If a visitor does not match any of the segments, they won’t be targeted and thus won’t see the campaign.

![](/files/sxFmXpWZ0mcfB8FQQG3j)

To learn more about the differences between each type of test, refer to the [Types of campaigns](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns) article. If you don’t know which type of campaign to choose, [our virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

To create a multi-experience personalization, go to Personalization, click the *Create* button and select *Multiexperience Personalization*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

First, you need to ask yourself if your campaign may include overlaps.\
For example, let’s say you plan to create 2 sales popins on your homepage: one to display a coupon code to your VIP visitors, one to display a coupon code for visitors who have purchased within the past month. You need to know which popin you want to display to a visitor who is both a VIP and has purchased within the past month.\
The most important message will get the “Priority 1”, so that visitors matching both segments (“VIP” and “Last month purchasers”) will see the Priority 1 popin only.

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new campaign.

Choose the right priority for the right message: create each experience based on a specific priority. The most important experience, that is to say the experience that will be seen first, appears at the top (priority 1).

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

You have two ways to create content for your campaign in AB Tasty:

#### With the visual editor <a href="#h_01jaqggmj6myf2mnsjpk4wbw0e" id="h_01jaqggmj6myf2mnsjpk4wbw0e"></a>

Each experience must display a specific message to a specific segment.\
If it is clickable, always put an **action tracking** on the element you add in order to follow the performance of your campaign (ex: cross to close the popin, CTA in the popin etc.). Don’t forget to put action trackings on each experience (for each popin for example, with a different name: “Click cross popin VIP” and “Click cross popin NYC”).

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide](/web-experimentation-and-personalization/editors-and-widget/visual-editor/discovering-the-visual-editor)

#### With the code editor <a href="#id-01jaqggzv9fvy8cbj5vb8enyps" id="id-01jaqggzv9fvy8cbj5vb8enyps"></a>

The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.

👉 To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor).

### Step 3: Goals <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

Once you’ve created your Personalization, you can pre-configure your future reporting to identify easily the metrics that need to be followed as your primary goal (the one which is potentially the most impacted by your Personalization).

👉 To learn how to configure Goals, please read [Campaign flow: Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step).

### Step 4: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

**WHO section**: this is the most important section, where you have to choose the right segment as a function of the message you have created in the editor.

**WHERE section**: the target page must be the same for all experiences.

**HOW section**: this step is optional. You can add specific session-based triggers, such as a required number of viewed pages before displaying a message, the landing page of the session and so on.

The segment and/or the trigger must be different for each experience: in our example, you can create a VIP segment for the Priority 1 experience and a Past month purchasers for the Priority 2 experience.

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 5: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

If you allocate 100% of your traffic to the experiences, you won’t be able to know what the increment of each experience (in terms of purchases, for example) is. We recommend leaving 10 to 15% of your traffic on the original version (depending on the amount of traffic on your website). Don’t forget to set up traffic allocation for each experience of your campaign (in our example, for both experiences).

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 6: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.
* Activate **Sequential testing** to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 7: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracking\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your campaign at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

## Use cases <a href="#h_01hvvacqkzdmx34x6n3cfby08s" id="h_01hvvacqkzdmx34x6n3cfby08s"></a>

Multi-experience personalizations can be used in the following cases:

| **💬 Message**                                                                                                                                             | **🥇Priority**                                                                                                                                                                                                                                                                                                                                                                                                       |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Displaying on your Homepage a 20% discount code to Loyal visitors, a 15% discount code to Valuable visitors and a 10% discount code to all other visitors. | Loyal visitors also match the “all visitors” segment. As there is a risk of overlap between the two segments you have configured, you can choose which experience the visitors who match both segments will see. You can set your “20% discount experience” as priority 1 and your “10% discount experience” as priority 2. In this case, users who match both segments will only see the “20% discount experience”. |
| Displaying a welcome message to new visitors and a welcome back message to returning visitors.                                                             | There is no risk of overlap because users are either new or returning. In this case, the priority you choose for your experiences isn’t relevant.                                                                                                                                                                                                                                                                    |


# How to create a Multipage Personalization

A Multipage Personalization displays a **new experience, message, or piece of content on several different pages of your site that don’t share the same layout** – for example on the homepage and the basket page. This new experience, message, or piece of content is shown to a specific segment of visitors to your website and you can track its effectiveness in your campaign reportings.

<img src="/files/MpMjsXrzs6kQZGQyCgdc" alt="" width="485">

To learn more about the differences between each type of test, refer to the [Types of campaigns](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns) article. If you don’t know which type of campaign to choose, [our virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

To create a multipage personalization, go to Personalization, click the *Create* button and select *Multipage Personalization*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new campaign.

In the *Pages* section, enter the URLs you want to load in the editor. You need to include at least 2 pages, as you create a cross-page experience for your targeted segment. For each page (different pages with different layouts), you will create a different message in the editor. These URLs are samples used to load the editor, you will be able to configure your target pages in the targeting section.

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

You have two ways to create content for your campaign in AB Tasty:

#### With the visual editor <a href="#h_01jaqggmj6myf2mnsjpk4wbw0e" id="h_01jaqggmj6myf2mnsjpk4wbw0e"></a>

You must create (a) message(s) for each Page (by switching your page in the header of the editor). Add JS and/or CSS code, use the visual editor or add a widget from the library to create your personalized message.\
If it is clickable, always put an action tracking on the element you add or modify in order to follow the performance of your campaign (e.g.: cross to close the popin, CTA in the popin etc.). Don’t forget to put these action trackings on each page.

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide](/web-experimentation-and-personalization/editors-and-widget/visual-editor---discovery)

#### With the code editor <a href="#id-01jaqggzv9fvy8cbj5vb8enyps" id="id-01jaqggzv9fvy8cbj5vb8enyps"></a>

The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.

👉 To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor).

### Step 3: Goals <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

Once you’ve created your Personalization, you can pre-configure your future reporting to identify easily the metrics that need to be followed as your primary goal (the one which is potentially the most impacted by your Personalization).

👉 To learn how to configure Goals, please read [Campaign flow: Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step).

### Step 4: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

**WHO section**: this is the most important section, where you have to choose the right segment as a function of the message you have created in the editor.

As you personalize the experience of one segment on several pages, your segment should be the same for all the Pages you have configured; you can use the [Replicate targeting option](/web-experimentation-and-personalization/targeting-step/how-to-use-the-replicate-targeting-option) to easily reuse the same segment in all pages.

**WHERE section**: you need to declare the right URLs for each Page of your campaign on which your messages will be visible. The URLs used for the editor step remain samples of the page types you configure in this step.\
You can switch between Pages by using the dropdown menu.

A visitor doesn't need to see pages in a specific order. For example, they can enter the website from a product page and see Page 2 of the personalization campaign (e.g.: coupon code displayed in a banner). Then, they can go to the homepage and see Page 1 (e.g.: coupon code displayed in a popin).

**HOW section**: this step is optional. You can add specific session-based triggers, such as a required number of viewed pages before displaying a message, the landing page of the session and so on.

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 5: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

By default, Personalization's traffic allocation is set to 100% of your visitors on the modified journey. But we strongly recommend lowering it at 90% or 80% to maintain a minor control and giving you a view of the gain of the campaign. Never change allocation while the campaign is live!

For Multipage Personalization, you have the possibility to change traffic allocation from a subtest to another switching thanks to the dropdown. Be careful as it might not be recommended in most scenario.

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 6: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.
* Activate **Sequential testing** to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 7: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracking\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch campaign Test at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

## Use cases <a href="#h_01hvvadntys90s95jwn72ehx3x" id="h_01hvvadntys90s95jwn72ehx3x"></a>

Multipage personalizations can be used in the following cases:

| **💬 Message**                                                                                                                                                                                                                                                                                                  | **🎯 Goal(s)**                                                                                                                                          |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Displaying a specific discount for your VIP visitors with a popin on the landing page, a fixed banner at the top of the product pages and a disclaimer on the cart page.                                                                                                                                        | <p>For VIP visitors, increasing:</p><p>- the conversion rate<br>- the average cart</p><p>- the number of pages viewed during a session</p>              |
| Displaying a different product hierarchy regarding the appetence of the visitors: the “rock’n roll lovers” segment will see the category “Rock” as the first tab of the navigation bar, and on the Homepage, the carousel will promote the next big Rock star concert.                                          | <p>For the “rock’n roll lovers” segment:</p><p>- Increasing conversion rate on “rock” products</p><p>- Increasing click tracking on “rock” products</p> |
| <p>Displaying a newsletter subscription campaign for visitors who are “non-subscribers”.</p><p>with a sticky badge on all pages to enable a 1-click subscription and specific information directly on the product pages (special price for subscribers only) to promote the advantages of the subscription.</p> | <p>Boosting newsletter subscription.</p><p>Increasing conversion rate for this segment.</p>                                                             |


# How to create a Simple Personalization

A Simple Personalization consists of **displaying a new experience**, message, or content **on one page** (e.g. homepage, basket page, etc.) **or a string of equivalent pages that share the same layout** (all your product pages, all your results pages, etc.) **for a specific segment of visitors of your website**. You can measure the performance of your campaign in the reportings.

<img src="/files/I2UhklH9qE5Phop97v14" alt="" width="482">

To learn more about the differences between each type of test, refer to the [Types of campaigns](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns) article. If you don’t know which type of campaign to choose, [our virtual assistant Ally](/web-experimentation-and-personalization/campaign-creation-and-dashboard/types-of-campaigns/choosing-the-right-type-of-campaign-with-ally-our-assistant) can help you.

To create a simple personalization, go to Personalization, click the *Create* button and select *Simple Personalization*.

👉 To learn about the different ways to create a campaign, please refer to [How to create a campaign](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign).

## Configuration <a href="#id-01jag15z7x9cj4g4dt4j4j7y0r" id="id-01jag15z7x9cj4g4dt4j4j7y0r"></a>

### Step 1: Main information <a href="#h_01jaqfyswkwgsmmr7wzhpc5w3r" id="h_01jaqfyswkwgsmmr7wzhpc5w3r"></a>

The Main Information page is the first step toward your new campaign.

👉 For more information on how to configure this step, refer to [How to set-up Main Information step](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### Step 2: Editor <a href="#id-01jaqg1ra5fd9vmrggpn4apbe3" id="id-01jaqg1ra5fd9vmrggpn4apbe3"></a>

You have two ways to create content for your campaign in AB Tasty:

#### With the visual editor <a href="#h_01jaqggmj6myf2mnsjpk4wbw0e" id="h_01jaqggmj6myf2mnsjpk4wbw0e"></a>

The Visual Editor enables you to create the personalized experience you want to push on your website for a specific segment.

👉 To learn how to use the Visual Editor, discover options, and dive into our widget libraries, please read the [Visual Editor Guide](/web-experimentation-and-personalization/editors-and-widget/visual-editor---discovery)

#### With the code editor <a href="#id-01jaqggzv9fvy8cbj5vb8enyps" id="id-01jaqggzv9fvy8cbj5vb8enyps"></a>

The Code Editor enables you to declare your code (JavaScript, CSS) without having to load the Visual Editor. The Code Editor is the best solution for developers who want to save time.

👉 To learn how to use the Code Editor, please read the [Code Editor Guide](/web-experimentation-and-personalization/editors-and-widget/code-editor).

### Step 3: Goals <a href="#h_01jaqgfmgzrbm90wd5gmdhxbe4" id="h_01jaqgfmgzrbm90wd5gmdhxbe4"></a>

Once you’ve created your Personalization, you can pre-configure your future reporting to identify easily the metrics that need to be followed as your primary goal (the one which is potentially the most impacted by your Personalization).

👉 To learn how to configure Goals, please read [Campaign flow: Goals step](/web-experimentation-and-personalization/campaign-flow-goals-step).

### Step 4: Targeting <a href="#h_01jaqhp6dw1whc723r3ttncdz3" id="h_01jaqhp6dw1whc723r3ttncdz3"></a>

**WHO section**: this is the most important section, where you have to choose the right segment as a function of the message you have created in the editor.

**WHERE section**: choose the unique URL (or a saved Page) or the type of pages having the same construction (such as Product pages) on which your message will be visible. The URL used in the editor step remains a sample of the URL(s) you configure in this step.

**HOW section**: this step is optional. You can add specific session-based triggers, such as a required number of viewed pages before displaying a message, the landing page of the session and so on.

👉 To learn how to configure targeting, please read [How to setup a campaign targeting](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### Step 5: Traffic allocation <a href="#h_01ja62c5pkk7nvff7dfx2qj28w" id="h_01ja62c5pkk7nvff7dfx2qj28w"></a>

If you allocate 100% of your traffic to your experience, you won’t be able to make a comparison with the original version. We recommend leaving 20 to 30% of your traffic on the original version (depending on the amount of traffic on your website) to be able to control the performance of your experience.

👉 To learn how to configure Traffic allocation, please read [Traffic allocation](/web-experimentation-and-personalization/traffic-allocation).

### Step 6: Advanced options <a href="#id-01jaqhx7ha5srq6c7gt9spvee7" id="id-01jaqhx7ha5srq6c7gt9spvee7"></a>

The advanced options are not mandatory.

* Enable the **third party tool(s)** you have connected to AB Tasty to send your test data to your tool.
* Select a **loading method** for your campaign.
* Activate **Sequential testing** to detect if your experiment will not be successful at all based on the results of your primary goal (if it is based on a Conversion/Transaction Rate).

👉 To learn how to configure Advanced options, please read [Campaign flow: Advanced Options](/web-experimentation-and-personalization/campaign-flow-advanced-options).

### Step 7: QA <a href="#h_01jaqj312wtptdm04fk9qqgzzv" id="h_01jaqj312wtptdm04fk9qqgzzv"></a>

The QA of the campaign is one of the most important steps before launching your campaign into production. The QA allows you to verify and test in real condition :

\- the targeting configuration\
\- the tracking\
\- the modifications you've made

👉 To learn how to use the QA Assistant, please read [QA Mode & QA Assistant](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant).

If you want to launch your campaign at a specific hour on a specific day, and/or if you want to pause it at a specific hour on a specific day, see our guide on [scheduling.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-scheduler)

## Use cases <a href="#h_01hvvacqkzdmx34x6n3cfby08s" id="h_01hvvacqkzdmx34x6n3cfby08s"></a>

Simple personalizations can be used in the following cases:

| **💬 Message**                                                                                                            | **🎯 Goal(s)**                                |
| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
| Displaying a banner to promote the opening of a store in New York for visitors living in NYC only, on desktop and mobile. | Offline impact                                |
| Displaying a popin to promote free delivery during valentine’s day for prospects only.                                    | Increasing transaction rate and average cart. |
| Displaying a popin on exit intent to promote newsletter subscription, using options and fields available on the homepage. | Boosting newsletter subscription.             |


# Campaign duplication

The duplicate campaign option is available on both the [Test and Personalization dashboards](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaigns-dashboard), which list every campaign created on your account. To learn how to perform a duplication, please refer to the following [article](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-duplication/how-to-duplicate-a-campaign).

This option allows you to duplicate an existing campaign, which means copying its entire configuration into a new campaign, either by **keeping the same type (identical duplication)** or by **transforming it into a new type of campaign (duplication with transformation)**. This prevents you from having to configure every step of a new campaign from scratch and saves you time when setting up a new campaign.

## Duplication matrix: available use cases <a href="#h_01ggw3kmcjzdbwdnde9tny18w6" id="h_01ggw3kmcjzdbwdnde9tny18w6"></a>

### **Generalities** <a href="#h_01j8s63t8mvxm61d5jxt4zy0v2" id="h_01j8s63t8mvxm61d5jxt4zy0v2"></a>

The table below lists all existing types of campaigns and displays the duplications that are possible for each.

The column on the left is the original campaign that will be duplicated or duplicated with transformation. The header line displays the new campaign that will be created by the duplication/transformation.

<img src="/files/waOzRMlVHZD9yIaxK53u" alt="" data-size="line"> duplication is possible

<img src="/files/JpjB7jDE6a1a9sjMSPjU" alt="" data-size="line"> duplication with **transformation** is possible

<img src="/files/rmXmJ4oRtWCgIuaKEJCp" alt="" data-size="line"> duplication with transformation is not possible

{% hint style="warning" %}
Sometimes it’s possible to duplicate with transformation A into B, but not B into A
{% endhint %}

{% hint style="info" %}
The AB Tasty platform implements new use cases following feedback from our clients. If you have an AB Tasty account and access, you can submit requests for new duplication functionality on our [**Customer Feature** ](https://feedback.abtasty.com/features-requests)[**Requests**](https://feedback.abtasty.com/features-requests)[ **board** ](https://feedback.abtasty.com/features-requests)(you’ll need to be logged in to the AB Tasty platform).
{% endhint %}

### **How to read the matrix: example** <a href="#id-01j8s6cyn9m45a4qk84zavwcgb" id="id-01j8s6cyn9m45a4qk84zavwcgb"></a>

The column on the left represents your initial/ reference existing campaign.

Read the available possibilities for transformation on the line. For example, if I pick an AB Test as my reference campaign, I can read on the first line:

* **AB Test is duplicable into an other AB Test**
* **AB Test is transformable into**:
  * a Multipages test
  * a Simple Personalization
  * a Multipages Personalization
  * a patch
* **AB Test is not transformable into**:
  * a Multivariate test
  * a Multi-experiences Personalization
  * a Multipages patch

## What is duplicated during a transformation <a href="#h_01ggw3maahsjevw6z9hxp9a0fq" id="h_01ggw3maahsjevw6z9hxp9a0fq"></a>

You can either duplicate your campaign to the same account or another account. Below you’ll find a list of what is duplicated from the original campaign to the duplicated one. Any elements not duplicated will need to be manually configured after the duplication, in the campaign workflow.

<table data-header-hidden><thead><tr><th width="453.87109375"></th><th></th></tr></thead><tbody><tr><td><strong>Content</strong></td><td><strong>Is this content duplicated?</strong><br><strong>Yes ✅ No ❌ Depends</strong> 🚧</td></tr><tr><td><p><strong>Main information:</strong></p><ul><li>Hypothesis/description of the campaign</li><li>Sample URL</li></ul></td><td>✅</td></tr><tr><td><p><strong>Editor:</strong></p><ul><li>Modifications (visual editor changes, widgets, JS, CSS)</li><li>Variations / Pages / Subtests / Experiences</li></ul></td><td>✅</td></tr><tr><td><p><strong>Goals:</strong><br>Available in all types of campaigns except <em>patches</em>.</p><ul><li>Duplication in the same account: all duplicated</li><li>Duplication in another account: only Action Trackings are duplicated</li></ul></td><td>🚧</td></tr><tr><td><p><strong>Targeting – Who section:</strong></p><p>Duplicated for every use case except patch duplication (test to patch or Personalization to patch)</p></td><td>🚧</td></tr><tr><td><strong>Targeting – Where section</strong></td><td>✅</td></tr><tr><td><strong>Targeting – How section</strong></td><td>✅</td></tr><tr><td><strong>Targeting – Options section</strong></td><td>✅</td></tr><tr><td><p><strong>Traffic allocation:</strong></p><p>The percentage of traffic is adapted depending on the specific case:</p><ul><li>When identical duplication or from the same type of campaign: traffic allocation stays the same</li><li>From Personalization to test: traffic allocation is 50%</li><li>From test to Personalization: traffic allocation is 100%</li></ul></td><td>✅</td></tr><tr><td><strong>QA – parameters</strong></td><td>❌</td></tr><tr><td><p><strong>Advanced options:</strong></p><ul><li>Third-party integrations</li><li>Tag performance optimization method</li></ul></td><td>✅</td></tr><tr><td><p><strong>Other:</strong></p><ul><li>Scheduler options (end date, start date, recurrences, etc.)</li><li>Saved pages: when duplicating to another account</li></ul></td><td>❌</td></tr></tbody></table>

{% hint style="info" %}
When duplicating a campaign to another account, the configuration is the same except for the goals selected, which are not duplicated.
{% endhint %}

## Detailed use cases and information <a href="#h_01ggw3mh137xzeec174w7rck48" id="h_01ggw3mh137xzeec174w7rck48"></a>

In this section, we will present every possible use case in more detail.

### **Duplicating an AB test** <a href="#h_01hw2h8mg4704yyszta0tz16f6" id="h_01hw2h8mg4704yyszta0tz16f6"></a>

From an AB test you can create the following types of campaigns:

* **An AB test**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).

* **A Multipages test**

The duplicated Multipages test will integrate the original AB test as its first page. You need to set up at least a second page (which is automatically generated during the duplication). This second page will remain empty as long as you don’t configure it.

* **A simple Personalization**

This use case can be used to personalize your website using a successful variation, for a specific user' segment. The duplicated personalization will be based on the variation of your AB test chosen from the duplication pop-in. This is useful if you want to allocate 100% of the traffic to a winning variation on a specific segment without any risk of corrupting your test data and to make sure every single targeted user sees the new version of your website that generated the best results during a test. To discover your test campaign result on specific segments, you can use [filters in the reporting.](/reporting-and-performances/reporting/reporting-filters/general-reporting-filters)

* **A Multipages Personalization**

This use case aims at creating a personalized workflow based on a successful variation, for a specific user' segment. The duplicated Personalization will be based on the variation of your AB Test chosen from the pop-in (as in the previous use case). But here you will need to configure at least a second page to complete your Multipages Personalization.

* **A patch**

This use case can be used to patch your website using a successful variation, waiting for a definitive release of the modification on your side.

### **Duplicating a Multipages test** <a href="#h_01hw2h8mg40hvh1ec6w8bggt5z" id="h_01hw2h8mg40hvh1ec6w8bggt5z"></a>

From a Multipages test you can create the following types of campaigns:

* **A Multipages test**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).

* **An AB test**

This will reduce the scope of your original test. The duplicated test will be based on a specific page chosen from the pop-in during the duplication process. You will be able to add variations and make all the necessary changes afterward in the campaign editing workflow. This can be useful to transform a complicated Multipages test into a simple AB test (i.e: to reduce the test’s scope or to simplify analysis).

* **A Multipages personalization**

This use case can be used to personalize your website using a successful variation, for a specific user' segment. The duplicated personalization will be based on the variation of your AB test chosen from the duplication pop-in. This is useful if you want to allocate 100% of the traffic to a winning variation on a specific segment without any risk of corrupting your test data and to make sure every single targeted user sees the new version of your website that generated the best results during a test. To discover your test campaign result on specific segments, you can use [filters in the reporting.](/reporting-and-performances/reporting/reporting-filters/general-reporting-filters)

* **A patch**

This use case can be used to patch your website using a successful variation, waiting for a definitive release of the modification on your side.

This will reduce the scope of your original test. The duplicated patch will be based on a specific page chosen from the pop-in during the duplication process. This can be useful to transform a complicated Multipages test into a simple patch.

* **A Multipages patch**

This use case can be used to patch your website using a successful variation, waiting for a definitive release of the modification on your side.

With a Multipages patch, you will be able to keep the whole scope of your original Multipages test.

### **Duplicating a Multivariate test** <a href="#h_01hw2h8mg4axrq44reqz9sk8m6" id="h_01hw2h8mg4axrq44reqz9sk8m6"></a>

From a Multivariate test you can create the following type of campaign:

* **A Multivariate test**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).

### **Duplicating a simple Personalization** <a href="#h_01hw2h8mg4226fe4kesxrbxjyb" id="h_01hw2h8mg4226fe4kesxrbxjyb"></a>

From a simple Personalization campaign you can create the following types of campaigns:

* **An AB test**

This is useful when you want to do another round of testing on a Personalization that you have already put into production (i.e. to challenge your message, according to a new context on your website or a new audience). The duplicated test will enable you to test your personPersonalizationlization with the original version of your website and other variations if needed. The test will have one unique variation natively, but you will be able to add more inside the campaign workflow. Your configuration will be imported into the variation (campaign information, goals, targeting set-up).

* **A simple personalization**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).

* **A Multipages personalization**

This will create a personalized workflow based on a first-page Personalization. The duplicated Personalization will integrate the original Personalization as the first page. You will need to set up at least the second page, which is generated by default but remains empty as long as you don’t set it up

* **A patch**

Normally a Personalization is displayed to a specific segment of your traffic. But sometimes you can create simple Personalization and target all your traffic. In this case it's better to transform it into a patch if you don't need to follow-up data. This way, it will be easier to organize your work into the campaign dashboards. The new patch will be 100% equivalent to the original Personalization, except the fact that it's impossible to target patches on a specific segment, so the original segment in the simple Personalization will be removed from the new campaign.

### **Duplicating a Multipages personalization** <a href="#h_01hw2h8mg48e4nef3ctkee22h3" id="h_01hw2h8mg48e4nef3ctkee22h3"></a>

From a Multipages personalization campaign you can create the following types of campaigns:

* **A simple personalization**

This can be used to keep only one page from your existing Multipages personalization. The duplicated personalization will be based on the page chosen from the duplication pop-in. Every setting from this page will be imported to your new campaign (modifications, goals, traffic allocation, and targeting set-up).

* **A Multipages personalization**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).

* **An Multipages test**

This is useful when you want to do another round of testing on a Personalization that you have already put into production (i.e. to challenge your message, according to a new context on your website or a new audience). The duplicated test will enable you to test your personPersonalizationlization with the original version of your website and other variations if needed. The test will have one unique variation natively, but you will be able to add more inside the campaign workflow. Your configuration will be imported into the variation (campaign information, goals, targeting set-up).

### **Duplicating a Multi-experiences personalization** <a href="#h_01hw2h8mg4428c00dcq4j0qytj" id="h_01hw2h8mg4428c00dcq4j0qytj"></a>

From a Multi-experiences Personalization campaign you can create the following type of campaign:

* **A Multi-experiences Personalization**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).

* **A Simple Personalization**

This can be used to keep only one experience from your existing Multi-experiences Personalization. The duplicated Personalization will be based on the experience chosen from the duplication pop-in. Every setting from this page will be imported to your new campaign (modifications, goals, traffic allocation, and targeting set-up).

### **Duplicating a patch** <a href="#h_01hw2h8mg4pxgddk6exjw77he9" id="h_01hw2h8mg4pxgddk6exjw77he9"></a>

From a patch campaign you can create the following type of campaign:

* **A patch**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.)

### **Duplicating a Multipages patch** <a href="#id-01j8s8j9dmgzfay9a6gjjsyc2m" id="id-01j8s8j9dmgzfay9a6gjjsyc2m"></a>

From a Multipages patch campaign you can create the following type of campaign:

* **A Multipages patch**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).

### **Duplicating an AA Test** <a href="#id-01j8s8km25ps2ekwfmz451gamh" id="id-01j8s8km25ps2ekwfmz451gamh"></a>

From an AA Test campaign you can create the following type of campaign:

* **An AA Test**

This is an identical duplication. Everything will be identical to the original campaign (number of variations, modifications, goals, traffic allocation, targeting set-up etc.).\\


# How to duplicate a campaign

Campaign duplication is a way of recreating a new campaign based on a previous one, on the same account or on another account to which you also have access.

Find out more about the duplication use case and what a duplication can do in terms of configuration, please refer [**to this specific article**](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-duplication).

<img src="/files/69piCLQWG3Xe7Jn7oEl4" alt="" width="563">

To duplicate a campaign, follow these steps:

1. Go to the **Test** or **Personalization** dashboard and select the campaign you want to duplicate. The duplication process starts from a specific campaign.
2. To access the duplication feature, **click the three dots** on the line of the campaign you want to duplicate.
3. Select the **Duplicate** option from the list.
4. This displays a new pop-in.<br>

   <figure><img src="/files/sb2LLVHYJcd0RjpXOrTF" alt="" width="563"><figcaption></figcaption></figure>
5. **Choose the destination campaign type:** you can either keep the same campaign type (this is what we call an identical duplication) or modify it (this would be a duplication with transformation).\
   **Note that A/A tests, Patches, Multipage Patches and Multivariate Tests can only be duplicated in their original campaign types.**
6. **Select the content to import to your new campaign.** Depending on your previous selection, you may have to select the specific variation/experience/page you want to duplicate (in the case of multiple variations/experience campaigns).
7. **Select the destination account:** it can be the same (by default, your current account is pre-selected)as you’re currently using or any other account you have access to. The list only displays those accounts you have access. You can select up to 5 accounts from this list as destination for your duplication.<br>

   <figure><img src="/files/nXpldwxfLdJuZwPBSYZB" alt="" width="188"><figcaption></figcaption></figure>
8. **Optional:** Enter a name for your new campaign. By default, your campaign name has the following format: {campaign\_original\_name\_(duplicate)}.
9. Validate by clicking **Duplicate**. The new duplicate campaign is displayed in its corresponding dashboard (test or personalization) and is paused by default.

{% hint style="warning" %}
If you want to perform a duplication to more than 5 accounts, you need to repeat this action until you duplicate the campaign to the desired number of accounts (10, 20, or more).
{% endhint %}

{% hint style="info" %}
It is not possible to duplicate a subtest from a multipage campaign. Duplication is only supported at the campaign level, allowing you to copy the entire campaign but not individual subtests within it.
{% endhint %}

{% hint style="info" %}
When duplicating a campaign that is currently in QA, the QA mode is automatically disabled and the duplicated campaign is always paused by default.
{% endhint %}

Find out more about the duplication use case and what a duplication can do in terms of configuration, please refer [**to this specific article**](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-duplication).


# How to set-up Main Information step

The Main Information page is the first step toward all new campaigns.

In this page, you'll have to choose:

* The type of your campaign
* The name of your campaign
* The hypothesis of your campaign
* One URL as a sample of the page you want to optimize
* The type of editor you want to use (visual editor/ code editor)
* The method to load the visual editor

This page has 2 status:

* **The draft status,** before you click "Save" for the first time. At this point, you can quit without saving, and you won't create any new campaign at all.
* **The saved status**, after you click "Save"

Generally you'll land on this page after having clicked on "Create" campaign on [**dashboards**](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaigns-dashboard).<br>

<figure><img src="/files/alL2wyyR92BiGPy0emUg" alt="" width="151"><figcaption></figcaption></figure>

## Step 1: campaign type <a href="#id-01g6qc8ksbd882fh9ge7v1gdng" id="id-01g6qc8ksbd882fh9ge7v1gdng"></a>

At the top of the page, the dropdown pre-selects the type of campaign you've chosen via the dropdown in the campaigns dashboard. At this stage, **you can still change your mind and select a different type of test**, as the step status is *draft*.

<img src="/files/rFrSWppGEU4hPf2keKS4" alt="" width="158">

## Step 2: Write your campaign hypothesis <a href="#h_01j8hdmamarwfbwmyk1xyx2f40" id="h_01j8hdmamarwfbwmyk1xyx2f40"></a>

Write a clear hypothesis for your A/B test to define its objective. A well-written hypothesis helps your team distinguish between versions in the Visual Editor. You can use the **Hypothesis Helper** to help formulate your hypothesis.

### Evi Hypothesize <a href="#h_01jq8x57sm0x76sy82t9e1mdm4" id="h_01jq8x57sm0x76sy82t9e1mdm4"></a>

The **Evi Hypothesize** helps you write the perfect hypothesis. It provides an automatic checklist that tracks all essential hypothesis elements as you enter your text. Your hypothesis is considered well-formulated when all checklist items are complete.

<figure><img src="/files/kgbkVpbrvnfGxu2A3sTH" alt=""><figcaption></figcaption></figure>

You can also interact with the **AB Tasty's AI** through a CTA as soon as you started typing a bit of your hypothesis. Click on **Go Further with AI** to receive insights about what is missing in your hypothesis. You can also directly apply one of the hypothesis suggested by clicking on the **Use this** button.

<figure><img src="/files/gUsrFFRYEXBbuF0fJZuR" alt=""><figcaption></figcaption></figure>

Note that, as soon as you changed your hypothesis, you can reload the AB Tasty's AI to receive the updated insights and suggestions.

{% hint style="info" %}
The field *hypothesis* becomes *description* for AA Tests and Patches.
{% endhint %}

## Step 3: the sample URL <a href="#id-01j8hdwfg74rcxgjjxgmvnrth6" id="id-01j8hdwfg74rcxgjjxgmvnrth6"></a>

The ***Sample URL*** is the exact page, or a sample of the pages that share the same layout, that you want to test/ personalize/ patch/ track.

In your campaign, this URL will be used:

* **To load the Editor of your choice (Visual or Code)**
* **As a pre-filled targeted URL in the targeting step**

This **won’t necessarily be the final targeted page** of your campaign. See the [targeting article](/web-experimentation-and-personalization/targeting-step) for more information.

{% hint style="warning" %}
**Don’t use URL parameters in the sample URL field**, otherwise, you won't be able to save the step.
{% endhint %}

## Step 4: the option "Load editor with embedded source code" for logged pages <a href="#id-01j8hftsr15yfkb8czaan4wkta" id="id-01j8hftsr15yfkb8czaan4wkta"></a>

By default, when you load a page that requires authentication (e.g. a client account page) in the URL field, or a conversion funnel page, the page displayed in the editor will be empty or will show an error because it often requires session information (e.g. products to be displayed in the cart page).

<img src="/files/hfu6A80DYBJhbo4GClDb" alt="" width="563">

To work around this issue, you need to inject the source code of the page within the Main Information step of the creation flow.

There are two ways to do this:

* Using the **Load Editor with embedded source code** option manually, available here in the Main Information page
* Or using the **Apply HTML** option within the **AB Tasty Chrome extension** (see this [article](/web-experimentation-and-personalization/editors-and-widget/chrome-extension))

The first method with source code consists of pasting the page’s source code directly into AB Tasty. To do this:

* Go to the URL that you want to load in the editor
* Right-click on the page, and select Inspect
* In the Elements tab of the console, go to the first line of code: the \<html> tag
* Right-click on it, then select Copy → outerHTML. You will get the entire source code of the page with all the scripts and information needed
* Paste this code into the dedicated window within the Main Information step
* Click SaveThe page will load in the editor and you can apply your desired changes.

The URL field needs to remain filled with your URL - this is mandatory to save and go to the next step.

## Step 5: the choice of the editor <a href="#id-01j8hfxc2p8n8jha0h2qb6c7eq" id="id-01j8hfxc2p8n8jha0h2qb6c7eq"></a>

<img src="/files/RI5vAy5Sf0E7r1gFzO1V" alt="" width="272">

At this point, you can select one of two ways to create your A/B Test variation(s):

* Using the Visual Editor (and WYSIWYG features, widgets, and the possibility to add some JS and CSS code)
* Using the Code Editor to fully implement your campaign with code

Either way, you’ll be able to come back to the Main Information page to switch the editor, or to change from the Code Editor to the Visual Editor, and vice versa.

Once your choices and setup are completed, you can click Save & Go to the Next Step.

## Saving the Main information page configuration <a href="#h_01j8hfz8kqzdmf408b6pj5sw5m" id="h_01j8hfz8kqzdmf408b6pj5sw5m"></a>

Once you click Save, your A/B Test will be generated (with a unique ID) and will appear in the Tests dashboard. When you come back to the Main Information Page, everything will be editable, except for the type of test (the dropdown menu will no longer be available). At this point, if you need to change the type of campaign, you’ll have to start from scratch or transform your current A/B Test to another type of test directly on the dashboard, using the [duplication action.](/web-experimentation-and-personalization/campaign-creation-and-dashboard/campaign-duplication)


# Understanding campaign duration

Campaign duration relates to the **number of days a campaign has been running since the first time it was launched.**

These are the 3 rules used to calculate duration:

* Paused timeframes are **excluded, and** play timeframes are **included** in the calculation;
* the QA mode is not a status in itself, meaning that when the campaign is *Live in QA,* the timeframe is included in the calculation;
* resetting data in the reporting erases the whole duration and resets the count to 0.

Campaign duration can be accessed from the two following sections of AB Tasty:

* **The test and personalization dashboard**, in the duration column ![Campaign\_duration.png](https://support.abtasty.com/hc/article_attachments/360022478400/Campaign_duration.png).
* **The reporting of a campaign**, inside the activity card.

Duration calculation is available only on campaigns launched after October 2020. If you wonder how long your test should run to be reliable, check out our [A/B Test Calculator.](https://www.abtasty.com/sample-size-calculator/)

## Functioning <a href="#h_01jd56vpggsg8b734k1jbd1p84" id="h_01jd56vpggsg8b734k1jbd1p84"></a>

From the test and personalization dashboards, the duration column displays the number of days a campaign has been running.\
When hovering on the duration, a tooltip shows the following information:

* The **creation date**: date and hour the campaign was created.
* The **last played date**: date and hour the campaign was played for the last time.
* The **last paused date** : date and hour the campaign was paused for the last time.

<img src="/files/aHDLOpnhGyC1pcc59Kmi" alt="" width="375">

The campaign duration is also displayed in the activity card of the reporting of each campaign.

<img src="/files/yGsRukFS31BJd8wN0Auc" alt="" width="375">

You can reset the campaign data you have collected so far by clicking the three dots on the top bar> *Clear data*.\
Once the data is cleared, the duration is reset to zero and calculation starts again from the date you cleared the data (if the campaign is live or in QA) or from the next time you play your campaign (if it is paused).

<img src="/files/KF64qetOa6lQPdg1CzD7" alt="" width="312">

Data is also collected from the time you enable a QA parameter in your campaign. We recommend clearing the data after finishing the QA of your campaign in order to start your campaign fresh, with data from your targeted visitors only.

## Use cases <a href="#h_01jd56vpggt7xyf2fn133pbn67" id="h_01jd56vpggt7xyf2fn133pbn67"></a>

### Use case 1: the campaign is currently live but has been paused several times. <a href="#h_01jd56vpgg6z7b66ghg6p2cgem" id="h_01jd56vpgg6z7b66ghg6p2cgem"></a>

Let’s say it is the 16th of February 2021. Here is an example of campaign history:

| **Action**                    | **Date**   | **Status** | **Duration**                                                                                                                                                                                                                                                                        |
| ----------------------------- | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Create campaign               | 02/02/2021 | Paused     | <p>Duration: <strong>3 days</strong></p><p><br></p><p>Information on hover</p><p>Created: 02/02/2021 (15 days ago)</p><p>Last played: 15/02/2021 (1 day ago)</p><p>Last paused: 09/02/2021 (8 days ago)</p><p><br></p><p>Information in reporting</p><p>Launched on: 02/02/2021</p> |
| Enable IP parameter (QA mode) | 02/02/2021 | In QA      |                                                                                                                                                                                                                                                                                     |
| Play campaign                 | 02/02/2021 | Live       |                                                                                                                                                                                                                                                                                     |
| Pause campaign                | 03/02/2021 | Paused     |                                                                                                                                                                                                                                                                                     |
| Play campaign                 | 08/02/2021 | Live       |                                                                                                                                                                                                                                                                                     |
| Pause campaign                | 09/02/2021 | Paused     |                                                                                                                                                                                                                                                                                     |
| Play campaign                 | 15/02/2021 | Live       |                                                                                                                                                                                                                                                                                     |

→ The campaign was Live on the 2nd (1 day), on the 8th (1 day) and on the 15th of February (1 day from the current date). In total, the campaign has been live and active for **3 days**.

### Use case 2: the campaign is currently live, but data has been cleared. <a href="#h_01jd56vpggkt3k0qftzk97q6w3" id="h_01jd56vpggkt3k0qftzk97q6w3"></a>

Let’s say it is the 16th of February 2021. Here is an example of campaign history:

| **Action**      | **Date**   | **Status** | **Duration**                                                                                                                                                                                                                                                                        |
| --------------- | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Create campaign | 02/02/2021 | Paused     | <p>Duration: <strong>1 day</strong></p><p><br></p><p>Information on hover</p><p>Created: 02/02/2021 (15 days ago)</p><p>Last played: 15/02/2021 (1 day ago)</p><p>Last paused: 03/02/2021 (14 days ago)</p><p><br></p><p>Information in reporting</p><p>Launched on: 15/02/2021</p> |
| Play campaign   | 02/02/2021 | Live       |                                                                                                                                                                                                                                                                                     |
| Pause campaign  | 03/02/2021 | Paused     |                                                                                                                                                                                                                                                                                     |
| Clear data      | 08/02/2021 | Paused     |                                                                                                                                                                                                                                                                                     |
| Play campaign   | 15/02/2021 | Live       |                                                                                                                                                                                                                                                                                     |

→ The campaign was Live on the 2nd (1 day) and on the 15th of February (1 day from the current date). But on the 8th, the data was cleared, so calculation was reset. Since that date, the campaign has been live and active for **1 day**.

### Use case 3: the campaign is currently paused, but has been live several times. <a href="#h_01jd56vpgg15hee0g5vd8t26b1" id="h_01jd56vpgg15hee0g5vd8t26b1"></a>

Let’s say it is the 16th of February 2021. Here is an example of campaign history:

| **Action**      | **Date**   | **Status** | **Duration**                                                                                                                                                                                                                                                                       |
| --------------- | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Create campaign | 02/02/2021 | Paused     | <p>Duration: <strong>8 days</strong></p><p><br></p><p>Information on hover</p><p>Created: 02/02/2021 (15 days ago)</p><p>Last played: 8/02/2021 (9 days ago)</p><p>Last paused: 15/02/2021 (1 day ago)</p><p><br></p><p>Information in reporting</p><p>Launched on: 02/02/2021</p> |
| Play campaign   | 02/02/2021 | Live       |                                                                                                                                                                                                                                                                                    |
| Pause campaign  | 03/02/2021 | Paused     |                                                                                                                                                                                                                                                                                    |
| Play campaign   | 08/02/2021 | Live       |                                                                                                                                                                                                                                                                                    |
| Pause campaign  | 15/02/2021 | Paused     |                                                                                                                                                                                                                                                                                    |

→ The campaign was Live on the 2nd (1 day) and from the 8th to the 14th of February. In total, the campaign had been live and active for **8 days** but since it is paused, calculation is stopped.


# Campaign loading (deferred/ instant)

When you configure a campaign, you must define the way your campaign will load on the visitor’s website. Your campaign can be either embedded directly in the tag or downloaded only when required. This option has a direct impact on the tag performance.

## Configuration <a href="#h_01jaqmrkd7dx8zvjs1v2nrw59d" id="h_01jaqmrkd7dx8zvjs1v2nrw59d"></a>

To determine how the campaign will load on your visitor’s website, you must select one of these 2 options:

* [Deferred loading](#h_01fhyzsaq0a94v9sbacr44fpg5)
* [Instant loading](#h_01fhyzshekx7h30z64yrmxcp7v)

### Deferred loading <a href="#h_01fhyzsaq0a94v9sbacr44fpg5" id="h_01fhyzsaq0a94v9sbacr44fpg5"></a>

This option is selected by default. The loading of your campaign is deferred, meaning that it will be downloaded afterwards, only when the targeting conditions are met and won’t be embedded in the AB Tasty tag. Once downloaded, the campaign will behave as usual.\
Therefore, the campaign won’t add weight to the tag, which avoids impacting the loading time of your website and slowing it down. This is particularly useful when you are running several experiments at a time on your account.

When selecting this option, the additional loading time should not exceed a few dozen milliseconds.\
When using this option, the targeting of every live campaign is still embedded in the tag. The tag will evaluate as fast as possible which campaigns the visitor needs to be exposed to (the campaigns where the visitor matches and respects the triggering conditions, if any), but will only download the deferred campaigns when they need to be applied. For example, if your campaign is targeted for mobile users only, it is not necessary to download it for desktop users.

### Instant loading <a href="#h_01fhyzshekx7h30z64yrmxcp7v" id="h_01fhyzshekx7h30z64yrmxcp7v"></a>

When selecting this option, your campaign code, including the modifications, targeting, analytics, widgets, and so on, will be embedded directly into the AB Tasty tag.\
This means that all your visitors, even those who are not targeted by the campaign, will download its content.\
Selecting this option can drastically increase the size of the tag, and thus have a negative impact on its performance, especially if it is used in many heavy campaigns.\
We recommend using it only for very specific use cases (for instance when configuring a redirect test) and for a short period of time.

When changing the loading of a campaign, you must refresh the tag.

## Use cases <a href="#h_01jaqmq8gxnhdpfsbxgbb2se97" id="h_01jaqmq8gxnhdpfsbxgbb2se97"></a>

Let’s say you have configured a campaign displaying a pop-in promoting your latest mobile application and targeting your mobile users only:

* **If you select the deferred loading (default):**\
  The campaign will be downloaded and executed only for targeted visitors (in this case, for visitors on a mobile device). After an initial download from our servers cache, the campaign will be cached for 1 year (if no modifications are made) in the visitor browser for an instant loading each time the visitor sees the campaign.
* **If you select the instant loading:**\
  The campaign will be downloaded for all visitors but executed only for those matching the targeting conditions. It will be cached in the tag for 30 seconds. A heavy campaign can add several KB of data for each visitor that will re-download the campaign when the cache expires (after 30 seconds). This may increase the execution time of the AB Tasty tag.


# The "Comment" section of the campaign creation flow

The Comment feature allows you and all stakeholders to communicate on your campaigns. This will facilitate collaboration with your colleagues (when working on common campaigns) and help you keep track of key information inside AB Tasty.

You can access the Comment feature by clicking on any **test or personalization campaign**. All comments are managed at campaign level.

The comment menu is located in the upper-right corner of your campaign’s creation flow (except the Visual editor) and in the reporting.

The number of comments posted in your campaign will be displayed next to the comment button. A red icon indicates what there are unread comments. You can list them by clicking on the Comments button.

<img src="/files/zyJTp4O8lHryr3lsQLwe" alt="" width="563">

You can post comments as internal notes or to send a comment to someone and notify them. This can be done by tagging them in your comments using the ‘**@**’ sign followed by their name. The tagged user will also receive an email notifying them that they have been tagged in a comment post. The email contains a URL link that redirects the user to the step where the comment has been posted.

<img src="/files/NUwkQyfZuu6c4nIL4JiH" alt="" width="375">

Comments can also be deleted. While the comment’s content will be deleted, the event will remain in the comment history.

The Comments button is available is all the sections of the campaign setup. The section from which a comment is added is displayed on the right of the comment panel, as shown in the screenshot below.

<img src="/files/Yjv1KeVxupePuQKcHQda" alt="" width="375">

Unposted comments are saved so that you can review and post them later.


# Campaign statuses

AB Tasty offers different statuses to enable you to have a better overview of what’s going on your website/applications:

* [Draft](#h_01jb9wn6ny9v8c84p0ytw85q62)
* [In QA](#h_01jb9wn6nypwy5p7nxq23wnxt6)
* [Ready to launch](#h_01jb9wn6nycg6jeem61cr5tzfv)
* [Live](#h_01jb9wn6nymh5615j0x3bp0hf7)
* [Paused](#h_01jb9wn6ny7wkjyp494rt073fz)
* [Analysis](#h_01jb9wn6nzvj4nrcy7qjjvx98t)
* [Ended](#h_01jb9wn6nzcnjpxh9kp85b9zzx)
* [Archived](#h_01jb9wn6nzx09garpee8a69dge)

## Draft <a href="#h_01jb9wn6ny9v8c84p0ytw85q62" id="h_01jb9wn6ny9v8c84p0ytw85q62"></a>

<div align="left"><img src="/files/jsO0T2GGU7V6Fhz9ovQ2" alt="" width="45"></div>

This status is displayed during the campaign creation phase. Once the campaign goes live, you can’t go back to the draft status. While in draft, the campaign remains hidden from visitors.

To create a campaign, you must at least have the Creator role.

<img src="/files/YPIsz6Gh3NsNYvzaGcB6" alt="" width="563">

## In QA <a href="#h_01jb9wn6nypwy5p7nxq23wnxt6" id="h_01jb9wn6nypwy5p7nxq23wnxt6"></a>

![](/files/ZcU0g2Xffb5xat4iFCJu)\
This status is displayed when you enable at least one parameter from the QA step of your campaign and open the QA Assistant to perform the QA of your campaign. During this step, you can check that you are targeted to your campaign, that the changes applied to your campaign are correctly setup and that tracking and transactions work properly.\
To perform the QA of a campaign, you must at least have the Creator role.

<img src="/files/WJHjHHnZOREcslCA3ShP" alt="" width="563">

## Ready to launch <a href="#h_01jb9wn6nycg6jeem61cr5tzfv" id="h_01jb9wn6nycg6jeem61cr5tzfv"></a>

![](/files/MSVnD11LplAGCZWbfgIA)\
After you have performed the QA of your campaign, you can decide that it is ready to be launched but may be waiting for any conditions, such as the end of another campaign or a specific date. When the campaign has this status, it is not visible to your visitors until it is launched.\
To put your campaign in “ready to launch”, you must at least have the Creator role.

<img src="/files/xKMrubkl0fkzjDehlqNn" alt="" width="563">

## Live <a href="#h_01jb9wn6nymh5615j0x3bp0hf7" id="h_01jb9wn6nymh5615j0x3bp0hf7"></a>

![](/files/50ttmmuA5ttJ4TD6hLyb)\
You can decide to apply the Live status to make your campaign active on your website and visible to your targeted segment of visitors.

To be able to launch a campaign, you must at least have the User role.

<img src="/files/XmGJuQf0egCrONVL9KJg" alt="" width="563">

## Paused <a href="#h_01jb9wn6ny7wkjyp494rt073fz" id="h_01jb9wn6ny7wkjyp494rt073fz"></a>

You can apply the Paused status when you want to stop your live campaign. It won’t be visible anymore to your visitors.

To be able to pause your campaign, you must at least have the Creator role (if your campaign has a status other than “Live”), or a User role (if your campaign is “Live”).

<img src="/files/m2yTMrr2xXwCdX8YGw8h" alt="" width="563">

## Analysis <a href="#h_01jb9wn6nzvj4nrcy7qjjvx98t" id="h_01jb9wn6nzvj4nrcy7qjjvx98t"></a>

### ![](/files/1YaHpJcBHJZfeHD5j3ry) <a href="#h_01jb9wn6nzjb0r4j31mp2jg1x3" id="h_01jb9wn6nzjb0r4j31mp2jg1x3"></a>

When your campaign has collected enough data and is ready to be analyzed, you can apply the “analysis” status. The campaign won’t be visible anymore to your visitors.

To apply this status to your campaign, you must at least have the User role.

<img src="/files/WhhJaqP3utTWPctaEYTT" alt="" width="563">

## Ended <a href="#h_01jb9wn6nzcnjpxh9kp85b9zzx" id="h_01jb9wn6nzcnjpxh9kp85b9zzx"></a>

This status reflects that you took a learning from your campaign, that you don’t plan to put live again, and you’re ready to move next.\
To be able to end a campaign, you must at least have the User role.

<img src="/files/aN75ER7z9T5l5NCzJZJo" alt="" width="563">

## Archived <a href="#h_01jb9wn6nzx09garpee8a69dge" id="h_01jb9wn6nzx09garpee8a69dge"></a>

![](/files/vol5fYA88hnnRpGsqoMw)\
If you want to remove the campaign from the campaign list, but still keep it accessible for future reference, this is the appropriate status. Archived campaigns are not visible to visitors.

To archive a campaign, you must at least have the Creator role.

<img src="/files/SqrxHuYdWfAtBDNaiHGk" alt="" width="563">

| **Status**          | **Visible to your targeted segment of visitors**             | **Minimum role to activate the status** |
| ------------------- | ------------------------------------------------------------ | --------------------------------------- |
| Draft               | No                                                           | Creator                                 |
| In QA               | No, only visible to IP, cookie or URL enabled in the QA step | Creator                                 |
| Ready               | No                                                           | Creator                                 |
| Schedule (to play)  | No (until live date is reached)                              | User                                    |
| Schedule (to pause) | Yes (until paused date is reached)                           | User                                    |
| Live                | Yes                                                          | User                                    |
| Paused              | No                                                           | Creator                                 |
| Analysis            | No                                                           | User                                    |
| Ended               | No                                                           | User                                    |
| Archived            | No                                                           | Creator                                 |


# How to exclude IP addresses from your campaigns

You can exclude specific IP addresses from your campaigns. Once excluded, visitors coming from those addresses won't see your campaigns and will not be included in your campaign reporting. For example, you may want to exclude specific bots, probes, technical teams or agencies with whom you are collaborating.

## Excluding IP addresses <a href="#h_01jcgcdrehhssvm45wsbfyzzhk" id="h_01jcgcdrehhssvm45wsbfyzzhk"></a>

To exclude IP addresses, go to the Settings > **Advanced settings** > **IP exclusions**.

You can exclude a single IP address

Or a range of IP addresses

{% hint style="info" %}
Applying IP exclusions at the account level will automatically create a specific trigger in every newly created campaign (targeting step). This trigger is used by the campaign but will not be saved (unless specified in the targeting step) to be used for every campaigns.
{% endhint %}

## Removing excluded IP addresses <a href="#h_01jcgce9vb7a053yzpn8q5c447" id="h_01jcgce9vb7a053yzpn8q5c447"></a>

You can also remove previously set exclusions by clicking on the **‘bin’** icon from the exclusion list.

IP exclusions will automatically exclude the specified IP addresses for each new campaign. Campaigns created before the addition or modification of an IP exclusion will not be affected by the modification.


# How to use MDE Calculator

A Minimum Detectable Effect (MDE) is the minimum uplift you should reach in a given timeline to consider the results of a campaign as statistically significant.

MDE is important in the implementation of an A/B test because it directly influences how long the test needs to run and how large a sample size is required.

The MDE can be calculated using open-source tools, but you can also base it on data calculated directly by AB Tasty.\ <br>

<figure><img src="/files/WvUcJKCe8ZDSnWhqQmdU" alt="" width="563"><figcaption></figcaption></figure>

## MDE calculation methods <a href="#h_01jd2d3wdcr35sjpy51vf821w4" id="h_01jd2d3wdcr35sjpy51vf821w4"></a>

You can either choose to rely on data AB Tasty collected on your previous experiments (that have been live and collected data), **or** enter data you want to let AB Tasty calculate it manually.

<img src="/files/imuVMPlylr0vHfLgdE5O" alt="" width="563">

### AB TASTY based Data <a href="#h_01jkwt7yjaay67qmc7dr7nx9yc" id="h_01jkwt7yjaay67qmc7dr7nx9yc"></a>

#### The form <a href="#h_01jkwt7yjattnm6bvdede420hy" id="h_01jkwt7yjattnm6bvdede420hy"></a>

When clicking “**AB Tasty based data**”, you can search for an experiment that has the exact same configuration as the A/B Test you want to launch.

For example:

* Targeting
* URL Sample
* Primary Goal

You can select several already existing targeting such as:

* Saved Page
* Segment(s)
* Trigger(s)

Note that if you select a Saved page, the URL sample won’t be selectable anymore.

URL Sample is designed to be a "is". Meaning that MDE calculation will compute all the URL containing this Sample. So if you enter <https://www.abtasty.com>, all URLs containing this sample whether or not they include other parameters will be computed in the research. ([https://www.abtasty.com?test=1](https://www.abtasty.com/?test=1), [https://www.abtasty.com?test=2](https://www.abtasty.com/?test=2), [https://www.abtasty.com?test=3](https://www.abtasty.com/?test=3), etc.)\
The Primary goal, has to be an already existing goal (already selected in a campaign that had collected data), otherwise, AB Tasty will not have any data to compare with.

#### The research <a href="#h_01jkwt7yjase5qdvxadze47ccc" id="h_01jkwt7yjase5qdvxadze47ccc"></a>

AB Tasty will then search for all experiments which have been live over the past months with the configuration you selected, and will calculate the MDE based on data collected.

#### The results <a href="#h_01jkwt7yja0h7v405q0azr1gc2" id="h_01jkwt7yja0h7v405q0azr1gc2"></a>

The results are accessible directly through the Reporting menu:

<img src="/files/INbaRLryAH739j3R3N8n" alt="" width="228">

There are three possible results here:

1. Among all the experiments that have been running, we have found a match (A/B test with the same configuration) with enough data to calculate a proper MDE. In this case, you will see a graph with the results. (See an example below)
2. We have found an experiment with the same configuration, but not enough data. We advise you to either create an A/A Test to start collecting data, try another configuration, or manually calculate it using the “Manual calculator” option.
3. We haven’t found any experiment with the same configuration. You can still create an A/A Test to start collecting data, try another configuration or manually calculate it using the “Manual calculator” option.

<figure><img src="https://support.abtasty.com/hc/article_attachments/18485258229788" alt=""><figcaption></figcaption></figure>

The value indicated by the curve is the growth you should reach if you want your test to be statistically significant in the given timeline. Considering that, you might ask yourself if you can reach 6.75% growth in 35 days. If it’s not the case, your experiment might not be worth launching.

#### Next steps <a href="#h_01jkwta57kewcaq8ckhc6a40rj" id="h_01jkwta57kewcaq8ckhc6a40rj"></a>

After analyzing your MDE results, you can create a campaign from the configuration you chose to base the calculation, **or** you can try another configuration.

You can also link the MDE to a specific campaign.

{% hint style="info" %}
Linking a MDE to a campaign enable you to retrieve the MDE calculation inside the report.

* You can link a MDE to only one campaign
* A campaign can have only one MDE linked

Note that if you create the test from the MDE calculation results, it is automatically linked to the AB Test created.
{% endhint %}

### Manual Calculation <a href="#h_01jd2d3wdcybd4776j0y9y0a02" id="h_01jd2d3wdcybd4776j0y9y0a02"></a>

#### The form <a href="#h_01jd2d3wdcgp2b7hh7vvezw5w1" id="h_01jd2d3wdcgp2b7hh7vvezw5w1"></a>

You can still manually calculate the MDE of your future experiments by providing data you can have in your third party tools.

You must indicate the following data:

* Total number of visitors of 14 days
* The reference Conversion rate on your primary goal
* The number of variations you want for your future A/B test

<img src="/files/AYgkd2mOPPXDBv6n8KXD" alt="" width="375">

#### The results <a href="#h_01jd2d3wdcpnabbqwq21dq9jbr" id="h_01jd2d3wdcpnabbqwq21dq9jbr"></a>

The calculation results are displayed as a graph. Its structure is the same as the AB Tasty Based data calculation.

<img src="/files/8aNyiOFHqpRtRLs8N7oW" alt="" width="563">

The value indicated by the curve is the growth you should reach if you want your test to be statistically significant in the given timeline. Considering that, you might ask yourself if you can reach 6.75% growth in 35 days. If it’s not the case, your experiment might not be worth launching.

#### The next step <a href="#h_01jd2d3wdce9ej7wj0k175w4nr" id="h_01jd2d3wdce9ej7wj0k175w4nr"></a>

After analyzing your MDE results, you can either create a campaign or try another configuration and start the process again.

## Use cases <a href="#h_01jd2d3wdcwzwxqt3hmzbbk7za" id="h_01jd2d3wdcwzwxqt3hmzbbk7za"></a>

As a CRO manager, I want to build a test on a specific page of my website, but I’m afraid of the time the statistical significance can take to be reached. Therefore, using the MDE with the AB Tasty based data will help me understand if I should (or shouldn’t) launch my experiment on that perimeter.


# Campaign Scheduler

&#x20;campaign scheduler enables you to **automatically play and pause a campaign at a specific date and time** according to your needs.

Using the campaign scheduler also enables you to save time, especially when you want to set up a recurring campaign.

{% hint style="warning" %}
Scheduling a campaign may impact the campaign readiness if you select recurring slots. Depending on the recurrence you configure, 2 business cycles may coincide with more than 2 weeks.
{% endhint %}

## Campaign Scheduler activation <a href="#id-01gqfe7fg3c7b4vjwepyd0nwyk" id="id-01gqfe7fg3c7b4vjwepyd0nwyk"></a>

You can schedule a campaign to be played and/or paused on a future date from the two following areas of the platform:

* **The test and personalization dashboard:** click the status button and the dropdown list displays the Schedule option.
* **In the sidebar of the campaign creation flow:** click the (schedule) icon.

You can either choose to play and/or pause your campaign once, on a specific date, with [no recurrence](#id-01gqfe7fg3z1rp167f4a43jve0), or to schedule a [recurring](#id-01gqfe7fg3136v5zw26zg8mn49) start and/or end date for your campaign. You can also stop a scheduled campaign.

Once set up, the scheduled campaign will be easily identified on the dashboard thanks to a schedule icon next to the status button.<br>

<figure><img src="/files/iy54yHmlm4b5H5PD1A3z" alt="" width="234"><figcaption></figcaption></figure>

* You can filter your campaigns dashboard on scheduled campaigns from the “All status” filter dropdown.
* You can edit your scheduler parameters on any campaign.

For recurring campaigns, the schedule icon remains even when the campaign is scheduled to pause during the recurrence.

{% hint style="warning" %}
Scheduling campaigns to live or pause status between 23:55 and midnight is not possible in order to account for potential technical delays.

Not preventing it would cause, when scheduling on the edge of 2 days, campaigns to be played or paused the next day it was originally scheduled.
{% endhint %}

<img src="/files/4iWges6cIIunYs1EO6Tg" alt="" width="274">

{% hint style="info" %}
Once you have scheduled a campaign, automatic email notifications are sent to the admin(s) of the account when a campaign is automatically played or paused.
{% endhint %}

## Scheduling a campaign with no recurrence <a href="#id-01gqfe7fg3z1rp167f4a43jve0" id="id-01gqfe7fg3z1rp167f4a43jve0"></a>

To plan a campaign with no recurrence, select Doesn’t repeat the drop-down list.

You can either plan a start date with no end date, an end date with no start date (for instance if your campaign is already live), or a start date (the date your campaign will be launched) as well as an end date (the date your campaign will be paused). To do so:

1. Enable the desired toggle(s).
2. Pick a date from the calendar or enter one manually.
3. Select a time (hour and minutes).
4. Select the time zone from the drop-down list. By default, programming will be based on the time zone configured in your account.
5. Click Save.

<img src="/files/ntUBNPKRKxhBMnm6mMba" alt="" width="297">

{% hint style="warning" %}
If the scheduled campaign contains a [**countdown widget**](/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/ab-tasty-prebuilt-widgets/countdown-widget), make sure the end date of your widget matches your campaign programming. (e.g., if a campaign will be live from 1 PM to 2 PM, the countdown widget must end at 2 PM as well).
{% endhint %}

## Scheduling a recurring campaign <a href="#id-01gqfe7fg3136v5zw26zg8mn49" id="id-01gqfe7fg3136v5zw26zg8mn49"></a>

When scheduling a recurring campaign, you need to define intermittent slots to be repeated in the future as frequently as needed.

### Selecting a recurrence <a href="#id-01gqfe7fg378r0vznwchpvejtr" id="id-01gqfe7fg378r0vznwchpvejtr"></a>

By default, campaign recurrence is inactive and set as Doesn’t repeat. To schedule a recurring campaign, you must select a predefined recurrence among the following:

* Every day: the campaign will be played every day (from Monday to Sunday).
* Every weekday: the campaign will be played every day from Monday to Friday.
* Every weekend: the campaign will be played every Saturday and Sunday.

Or, create a custom recurrence that lets you choose which days you want your campaign to be played and/or paused.

### Defining a start and/or end date and time <a href="#id-01gqfe7fg4dr1zmwsx284g9hwf" id="id-01gqfe7fg4dr1zmwsx284g9hwf"></a>

1. Pick a start date from the calendar or enter one manually. This coincides with the date on which your campaign will be launched for the first time.
2. Select the time range (hour and minutes) during which your campaign will be live, or select All day.
3. Select the date and time you want your campaign to be paused (Ends on), or the number of times after which you want it to be paused (Ends after x time(s)), or select Never ends if you don’t want your campaign to be paused.
4. Select the time zone from the drop-down list, you can also search by typing the name.
5. Click Save.

{% hint style="info" %}
The All day option is only available with a starting date in the future.
{% endhint %}

{% hint style="info" %}
**Good to know:**

* If the campaign is currently live and scheduled to be played at a future date, clicking the Save button automatically pauses the campaign (to restart on the planned date).
* If you schedule a campaign to be played Everyday with the All day option, choose the Doesn’t repeat instead.
  {% endhint %}

## Stopping a scheduled campaign <a href="#id-01gqfe7fg40pyy78cc45kkvam0" id="id-01gqfe7fg40pyy78cc45kkvam0"></a>

Stopping a scheduled campaign may be useful when you want to disable the schedule configuration without changing the current campaign’s status. To do so:

1. From the dashboard, click the status button of your campaign and select the Play or Pause options, depending on the action you want to perform:\
   The Schedule pop-in appears.
2. Click the Stop schedule button:\
   The campaign keeps its current status (live or paused) but the scheduler is deactivated.

It may also be useful when you want to disable the scheduler mode and change the current campaign’s status:

1. From the dashboard, click the status button of your campaign and select the Play or Pause options, depending on the action you want to perform:\
   The Stop schedule or Play schedule pop-in appears.\
   If the campaign is currently live:
2. Click Stop schedule & Pause:

The campaign will be paused and the scheduler deactivated.\
If the campaign is currently paused:

1. Click Stop schedule & Play.
2. The campaign will be played and the scheduler deactivated.

## "Launch" and "Pause" Email Notifications <a href="#id-01gqfe7fg46jxza8enb6cfwjhm" id="id-01gqfe7fg46jxza8enb6cfwjhm"></a>

You can subscribe to email alerts and be notified when a scheduled campaign is automatically launched or paused. To do so go to the [notification center](https://app2.abtasty.com/settings/notifications) and active the subscription.

<figure><img src="https://support.abtasty.com/hc/article_attachments/15531569082268" alt=""><figcaption></figcaption></figure>

## Use cases and triggering rules <a href="#id-01gqfe7fg41man5p4am3e8q5w2" id="id-01gqfe7fg41man5p4am3e8q5w2"></a>

### **Use cases** <a href="#id-01gqfe7fg4ee21nxa0ppwdv570" id="id-01gqfe7fg4ee21nxa0ppwdv570"></a>

Let’s say you have created a marketing campaign (personalization campaign) to promote happy hour discounts on your website, available only for users purchasing between 17:00 and 19:00 every Thursday for one month. When scheduling your campaign, proceed as follows:

1. Select the custom recurrence
2. Select Thursday (T).
3. Pick the date of the first Thursday you want your campaign to start as well as the corresponding time range (e.g., 4 February 2021 from 17:00 to 19:00).
4. Select the date you want your campaign to end (End date) or select Ends after 4 times.\
   In this case, your campaign will be live every Thursday from 17:00 to 19:00 starting on February 4th, 2021, repeating 4 times. Your campaign will be paused on February 25th, 2021 at 7:01.

### **How the scheduler works with QA mode** <a href="#id-01gqfe7fg4dcrhk0kajs248k33" id="id-01gqfe7fg4dcrhk0kajs248k33"></a>

Activating the QA mode on a scheduled campaign means that it will be automatically launched or paused with the QA mode restriction.

For better usage of the QA mode and the scheduler, we recommend following this step:

1. QA your campaign with the QA mode and targeting criteria. You can also use the QA Assistant for this.
2. Once all your verifications are checked, remove the QA mode and pause the campaign
3. Reset the data from the reporting if needed
4. Then schedule your campaign for play and/or pause dates in the future.


# Mutually Exclusive Experiments

The **Mutually Exclusive Experiment** (M2E) feature allows you to run multiple experiments simultaneously on the same audience and with the same primary goal—without introducing UX conflicts or data bias.

➡️ To learn more about the benefits and potential pitfalls of this feature, see read our blog article: [Mutually Exclusive Experiments: Preventing the Interaction Effect](https://www.abtasty.com/blog/mutually-exclusive-experiments/)

## Configuration <a href="#h_01hp749wwcmc9mzdw3dnymvnmg" id="h_01hp749wwcmc9mzdw3dnymvnmg"></a>

### Creating an Exclusion group <a href="#h_01hp749wwckjp07x82ff9bcdrk" id="h_01hp749wwckjp07x82ff9bcdrk"></a>

To create a group:

{% stepper %}
{% step %}
Go to the Campaigns dashboard
{% endstep %}

{% step %}
Click the three dots next to the campaign.
{% endstep %}

{% step %}
Two options are possible: **Add to exclusion group** or **Manage exclusion group**, depending on whether the campaign is already part of a group.
{% endstep %}

{% step %}
To exclude a test campaign from another and create a group, select the option **Add to exclusion group**.&#x20;

A modal appears. You are already located in the group creation option.
{% endstep %}

{% step %}
Give the group a clear name (for example, *Homepage tests* or *Cart improvements*) to help track included campaigns.
{% endstep %}

{% step %}
Open the dropdown menu to select the other campaigns to include.

The list is limited to 12 results by default, but you can use the search bar to find specific experiments.

{% hint style="info" %}
You cannot add a campaign if:

* It is already part of another group
* It is live or has a start date set
* It has already received traffic

To view only eligible tests, enable the **Show available tests only** option.
{% endhint %}

<img src="/files/4Qnsu4mweqckTdnWXaTk" alt="" width="563">
{% endstep %}

{% step %}
Select all the campaigns you want to include in the group.
{% endstep %}

{% step %}
Click **Validate selection** to add the selected campaigns to the group.&#x20;

Traffic will be split across all campaigns in the group.&#x20;

{% hint style="info" %}
The more campaigns you include in a group, the more traffic is split—so reaching statistical significance may take longer. For example, two campaigns may double the time needed to gather reliable data.
{% endhint %}
{% endstep %}

{% step %}
To define traffic manually, toggle on **Custom allocation**. This is useful if some campaigns run on deeper pages with lower traffic.

{% hint style="info" %}
**Custom allocation limitations:**

* You cannot assign more than 100% total traffic
* No campaign can receive 100% of the traffic
* Allocation cannot be changed once the group is locked
  {% endhint %}

<img src="/files/YFpBMzNrE7atECjRKbx5" alt="" width="563">
{% endstep %}

{% step %}
Click **Save** to confirm the configuration.
{% endstep %}
{% endstepper %}

### Adding to an existing Exclusion group <a href="#h_01hp749wwc0587q9hq9dysw8zx" id="h_01hp749wwc0587q9hq9dysw8zx"></a>

If the exclusion group is not locked, you can add additional tests:

{% stepper %}
{% step %}
Go to the Campaigns dashboard
{% endstep %}

{% step %}
Click the three dots next to the campaign.
{% endstep %}

{% step %}
Two options are possible: **Add to exclusion group** or **Manage exclusion group**, depending on whether the campaign is already part of a group.
{% endstep %}

{% step %}
To exclude a test campaign from another and create a group, select the option **Add to exclusion group**.&#x20;

A modal appears.&#x20;
{% endstep %}

{% step %}
Select **Add to existing group** tab.

<img src="/files/hLHHozrvRkoUt4a2hkyg" alt="" width="563">
{% endstep %}

{% step %}
In the drop down list, select an available group (unlocked).

{% hint style="info" %}
To view only eligible groups, enable the **Show available tests only** option.
{% endhint %}
{% endstep %}

{% step %}
Click **Save**

The test will be added to the group and its traffic allocation adjusted accordingly.
{% endstep %}
{% endstepper %}

## Group management <a href="#h_01hp749wwc9qtvy15k9qy9vp8r" id="h_01hp749wwc9qtvy15k9qy9vp8r"></a>

In the Campaigns dashboard, go to the **Exclusion group** tab to view and manage your groups. The number in parentheses indicates how many exclusion groups exist.

Click **Manage** next to a group to view or edit it, depending on its status.

### Unlocked group <a href="#h_01hp749wwdm2rkaqgk41bmfs5q" id="h_01hp749wwdm2rkaqgk41bmfs5q"></a>

An exclusion group remains unlocked until at least one of its campaigns is live. While unlocked, you can:

* Add or remove tests
* Activate **QA** mode (by enabling IP address, URL or cookie targeting) without locking the group

### Locked group <a href="#h_01hp749wwd3w5rmyhxk15p5pf7" id="h_01hp749wwd3w5rmyhxk15p5pf7"></a>

<figure><img src="/files/qUA613RoXjMHfb8xor76" alt="" width="563"><figcaption></figcaption></figure>

Once any campaign in the group is live, the group becomes locked.&#x20;

By clicking  on the manage button, you can still:

* View its configuration
* Delete the group if all tests are paused

You cannot:

* Modify the configuration
* Relaunch paused campaigns from a locked group that has been deleted (you must duplicate them first)

<img src="/files/7Eh4ZVSjEck48KlZCwHT" alt="" width="375">

### Deleting a group <a href="#h_01hp749wwdfaspqtedsq2kydq6" id="h_01hp749wwdfaspqtedsq2kydq6"></a>

To delete a group:

* All campaigns in the group must be paused
* If the group was unlocked, deleting it has no impact on campaign configuration
* If the group was locked, paused campaigns cannot be relaunched to avoid allocation issue— the platform will invite you to duplicate the campaign instead.

## Reporting indication <a href="#h_01hp749wwd39gkj1d7vwtmahgq" id="h_01hp749wwd39gkj1d7vwtmahgq"></a>

In the **Reports** tab, a message appears under the number of visitors to indicate the test was part of an exclusion group. Keep in mind that traffic volumes may differ from standalone experiments.

<img src="/files/KC8UGq3GlblsTRDO9eSC" alt="" width="355">

## M2E allocation functioning <a href="#h_01hyjt139w6np61yy1rvvngx2x" id="h_01hyjt139w6np61yy1rvvngx2x"></a>

When multiple campaigns are mutually exclusive, the way traffic is allocated depends on their targeting and page coverage.

![](/files/AncjVM1wQkcl9u6idZ8C)

This diagram can be described in one sentence: if your targeted page isn’t the same for all campaigns of the group, part of the traffic landing on your website won’t be assigned to the desired campaign if visitors are bouncing.

\
On the Homepage, 33% of the traffic is **allocated** to campaign 1, and 66% to the 2 others. It doesn’t mean that 66% of the traffic will be **assigned** to the other campaigns, as among these visitors, some may not enter the targeting of the other campaigns.

#### Allocation scenarios

| Targeting and page overlap             | Result                                                                                                                                                                                                                                                                                                                                                    |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Same targeting on the same page        | Traffic is evenly distributed across all campaigns of the group. As your targeting conditions are the same, the exact same numbers of visitors will be assigned to each campaign.                                                                                                                                                                         |
| Different targeting on the same page   | Traffic is split evenly accross the group campaigns, but final traffic assignments vary by campaign targeting rules of the group.                                                                                                                                                                                                                         |
| Same targeting on different pages      | As your Exclusion group contains several campaigns, when landing on one of the targeted page, your visitors, even if corresponding to the targeted audience, might be allocated to another campaign. Thus, if bouncing, they will never reach their allocated campaign and the number of visitors being assigned to the reporting will never be the same. |
| Different targeting on different pages | Use separate campaigns instead—M2E adds no value in this case                                                                                                                                                                                                                                                                                             |

## Use cases <a href="#h_01hp749wwdjb2s42tntrczexct" id="h_01hp749wwdjb2s42tntrczexct"></a>

### #1 Avoiding data bias across similar campaigns <a href="#h_01j9v554eada4gp9wfew840s9e" id="h_01j9v554eada4gp9wfew840s9e"></a>

As a User I need to launch several tests at the same time on the same page. Those campaigns shouldn’t enter into UX conflict as they are acting on different elements but my primary goal is the same for all campaigns.

In order to avoid any data biases I’d prefer making them mutually exclusive and do a proper analysis at the end.

### #2 Preventing UX conflicts <a href="#h_01j9v5521dt4e6drafjt8ceybd" id="h_01j9v5521dt4e6drafjt8ceybd"></a>

As a User I need to test different parts of my page and I’m afraid of UX conflict between those parts. Thus, to avoid any bad user experience I would better use the Mutually Exclusive Experiments feature and be more confident during the QA.

### #3 Balancing traffic across different pages <a href="#h_01j9ryye8afwg5aszwfbh1e6fr" id="h_01j9ryye8afwg5aszwfbh1e6fr"></a>

As a User, I need to launch several tests at the same time on my website and all of them have the same primary goal. One campaign applies on the Home page and the other on the Product page. I know that I’ll have way more traffic on the HP than on the PP. Thus, I can use the Custom Allocation functionality of the Exclusion group to assign more traffic to my PP campaign than my HP campaign.

## FAQ <a href="#h_01hp749wwd7qtc037pkjgkpapp" id="h_01hp749wwd7qtc037pkjgkpapp"></a>

<details>

<summary>What type of campaign can be made mutually exclusive?</summary>

You can add to the exclusion group experiments campaigns (test campaigns) such as A/B Test and Multipage Tests

</details>

<details>

<summary>How are cookies affected?</summary>

Once a visitor is assigned to a test in the group, the assignment is stored in a cookie. As long as the cookie persists, the visitor remains assigned to that test.

</details>

<details>

<summary>What happens when my visitor lands on my website?</summary>

The AB Tasty tag randomly assigns the visitor to one of the available tests in the exclusion group.&#x20;

The visitor must meet the targeting criteria to see the test

</details>

<details>

<summary>What about QA?</summary>

We advise you to perform your QA before pushing a campaign to a group.\
If not, when using the QAA, you can assign yourself to the campaign by clicking on the "Force Display" CTA.

\
Also, when looking at ABTasty.results, you might not be assigned by your campaign if it's part of an exclusion group. For such reason, you can see a new rejected reason : `exclusion_group_rejected`.\
To be assigned to the campaign, you can either:

* Remove your AB Tasty cookies and refresh the page (random allocation to campaign will be played again since you'll have a new visitorId)
* Force the display to the campaign thanks to the QAA

</details>

<details>

<summary>What happens to the traffic allocation if I pause a campaign?</summary>

If you pause a campaign in an exclusion group, the traffic allocation remains unchanged. The paused campaign's traffic percentage is still accounted for, preventing disruptions in visitor experience and data integrity when pausing or launching campaigns.

</details>


# How to use Campaign Prioritization

You'll find all useful information about what is personalization prioritization in this [***article***](https://support.abtasty.com/hc/en-us/articles/6729722533660).&#x20;

Using this module means to steps:&#x20;

* [***Identifying conflicts***](#h_01j69n4qsxshmcx8xswgqwdddt)
* [***Creating and publishing prioritization rules***](#id-01j69nd13cferwvjxe2eeq6dtn)

Prioritization is possible for all personalization campaign types : [**Simple Personalization**](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-simple-personalization) (SP), [**Multi-Page Personalization**](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-multipage-personalization) (MPP), [**Multi-Experience Personalizations**](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/personalizations/how-to-create-a-multi-experience-personalization) (MEP).

{% hint style="warning" %}
Note that it is not recommended to prioritize the latter as it already includes a subtests prioritization in itself.
{% endhint %}

## How to identify conflicts <a href="#h_01j69n4qsxshmcx8xswgqwdddt" id="h_01j69n4qsxshmcx8xswgqwdddt"></a>

Before prioritizing your personalization campaigns, you can identify potential conflicts between your campaigns to find out which ones should be prioritized and which priority to apply to each campaign.\
A conflict happens when two or more campaigns either:

* target the same saved page(s) OR the “all pages” option,
* AND Target the same segment, or all visitors,

AND are live at the same time.

### **Main configuration** <a href="#h_01j69n6ybjzvjmaamfy6kbaqya" id="h_01j69n6ybjzvjmaamfy6kbaqya"></a>

To identify potential conflicts between your personalization campaigns, you can use the 2 available filters.\
AB Tasty compares campaigns according to the segment and saved Page(s):

* By default, any segment is included in the *all visitors* segment and any saved Page is included in the *all pages* option.
* **All visitors** is a segment in itself but it also means that no particular segment has been selected, so it matches any segment as well as the *all visitors* segment.
* **All pages** means “all the pages of the website”, including all the saved Pages, so it matches any saved Page as well as the *all pages* option.

### **Filter by campaign** <a href="#h_01j69n6ybj3t4v095ewspt4vxr" id="h_01j69n6ybj3t4v095ewspt4vxr"></a>

This filter is based on a specific campaign, which serves as a **reference**, that you must select from the dropdown list.\
It enables you to display the campaigns that share the same targeting configuration:

* the same segment OR all visitors (because this segment contains all other segments)\
  AND
* the same saved Page(s) OR the “all pages” option (because this option contains all the saved Pages)

### **Filter by segment and/or by saved Page** <a href="#h_01j69n6ybjhgafr83mzjv2a3a3" id="h_01j69n6ybjhgafr83mzjv2a3a3"></a>

This filter works for all campaigns, and not one specifically.\
You must select at least one segment and/or one saved Page from the dropdown lists.\
This means you can either select:

* one or several segments and no saved Page,
* one or several saved Pages and no segment,
* one or several saved Pages and one or several segments.

{% hint style="info" %}
The filters only take into account the saved Pages you configured in the [***Page Builder***](https://support.abtasty.com/hc/en-us/articles/6708677962140) screen and the *all pages* option. If you haven’t configured any, you won’t be able to select a page from the dropdown list. If your campaign targets pages based on an ID/class/element, code or personalized URLs, they won’t appear in the dropdown list and these campaigns won’t be considered (they will be excluded by default).

For example, to find out which campaigns target both the home page and new visitors, when applying the filter, you will only see campaigns that target at least the home page (they can also target other URLs or saved Pages) and at least the new visitors segment (they can also target other segments).
{% endhint %}

{% hint style="warning" %}
Using the filters enables you to identify campaigns which may be in conflict because they target the same segment and/or saved Page(s). However, it doesn’t take into account the trigger and layout.

For example, when using the *Segment and saved Page* filter, you notice that 2 campaigns are displayed on the home page and both target new visitors. However, one has no specific trigger and the other is triggered on exit intent. In this case, the conflict you have identified with the filter does not necessarily affect the user’s experience on the website. It is up to you to decide whether or not you want to prioritize them (or one of them).&#x20;
{% endhint %}

## How to create and publish a prioritization rule <a href="#id-01j69nd13cferwvjxe2eeq6dtn" id="id-01j69nd13cferwvjxe2eeq6dtn"></a>

After [***identifying conflicts between your campaigns***](#h_01J69N4QSXSHMCX8XSWGQWDDDT), you can start prioritizing them, that is to say applying a priority order to your campaigns.\
The prioritization screen displays two columns:

* **No priority applied section** (left column)
* **Priority levels section** (right column)

<figure><img src="https://support.abtasty.com/hc/article_attachments/16449239087516" alt=""><figcaption></figcaption></figure>

Prioritized campaigns are displayed on the right column, in various prioritization level sections. They are split between prioritization levels and constitute the prioritization rule. For more information on these concepts, please refer to [***Prioritizing personalization campaigns***](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-use-campaign-prioritization/prioritization-of-personalizations). \
If a visitor matches the targeting of several prioritized campaigns on a specific page of the website, they will only see the one(s) with the highest priority.\
To make your changes visible in production, you must publish them by clicking the ***Save and apply*** button.

### **Prioritizing campaigns** <a href="#h_01j69n4qsy7m11n3wenjn8wh0j" id="h_01j69n4qsy7m11n3wenjn8wh0j"></a>

To prioritize a campaign, drag and drop it from the left column to the desired priority level.\
**The no priority applied section** (left column) displays the campaigns that have no priority level. That is to say that they will be displayed according to their configured targeting conditions (segment, page, trigger).\
By default, personalization campaigns are not prioritized.

**The priority section** (right column) displays campaigns to which a priority has been applied.\
There is a maximum of 10 priorities: 1 is the highest and 10 the lowest.\
On a same page, visitors matching the targeting of several prioritized campaigns will only see the one(s) with the highest priority.\
*The first 2 levels are mandatory (priority 1 and 2).* For example, if you place one or more campaigns in priority 1, you must have at least one campaign in priority 2. Other priority levels can be empty.\
You can place several campaigns within the same priority level (12 campaigns maximum per priority level). This means that they will be displayed to all visitors matching the targeting of these campaigns. ***However, we recommend placing campaigns that target the same page(s) in different priorities.***

{% hint style="info" %}
You can prepare your prioritization rule and prioritize your paused campaigns before launching them (or scheduling them).\
The prioritization rule does not take paused campaigns into account.
{% endhint %}

### **Publishing the prioritization rule** <a href="#h_01j69n4qsy1vfhcbt61rtz4cyb" id="h_01j69n4qsy1vfhcbt61rtz4cyb"></a>

Once you have placed your campaigns in different priority levels, you can save the prioritization rule by clicking the *Save and apply* button.\
The tag is updated automatically and your changes are deployed in production.\
If you leave without saving, the prioritization rule won’t be saved and won’t be applied to your website.

Generally speaking your prioritization rule must be updated (click the *Save and apply* button) in the following cases:

* when you move one or more campaigns from the non-prioritized column (left) to the priority column (right);
* when you move one or more campaigns to another priority level;
* when you move one or more campaigns from the priority column (right) to the non-prioritized column (left);
* before you change the timeframe, because your changes will not be kept if you return to the original timeframe;
* before you apply filters (filter by campaign or filter by segment and saved Page), because your changes will not be kept when you return to the original view.

### **Deactivating the prioritization rule** <a href="#h_01j69n4qsyfkfrvkw5x37hedjr" id="h_01j69n4qsyfkfrvkw5x37hedjr"></a>

To deactivate the prioritization rule, you can either move all your prioritized campaigns back to the left column (that is to say remove them from the priority column) or pause all your prioritized campaigns. To make these changes active, click *Save and apply*.

For more information about personalization prioritization please refer to the following articles:&#x20;

* [***Tutorial Prioritization of personalizations***](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-use-campaign-prioritization/prioritization-of-personalizations)
* [***FAQ about prioritization***](/help-center/faq/faq-about-prioritization)

## How does it work technically? <a href="#h_01j8sek1bjmdhj69zqkjx9h2mr" id="h_01j8sek1bjmdhj69zqkjx9h2mr"></a>

### **Basic principle** <a href="#id-01j8sekja3qk7rq9b9399xmt58" id="id-01j8sekja3qk7rq9b9399xmt58"></a>

Prioritized personalization campaigns (SP, MPP and MEP) will fall under the priority ranks you give them. These priority ranks, called p-values, will determine if a visitor will see one campaign or another on the same targeting.

Up to 10 priority ranks can be set up.

### **Multi-Page Personalizations and user journey continuity** <a href="#id-01j8sektq9w94ryqsb2j0w67ff" id="id-01j8sektq9w94ryqsb2j0w67ff"></a>

When a prioritized MPP campaign has been seen by the visitor, thus historicized in the cookie, the tag will check this campaign but will not check the lesser priority (aka higher p-value) of other MPPs. The prioritized SP will still be checked by the tag according to their priority.

This ensures that the visitor sees the whole journey of the historicized MPP and does not prevent other prioritized campaigns to be applied except lesser priority MPPs.

Between two historized MPPs we check the priority between them. So if an MPP p-value 1 and a MPP p-value 2 are historized, only the first will be displayed in case of targeting overlap.

### **What about non-prioritized campaigns?** <a href="#id-01j8semz9aevjedxpz2w5m74x4" id="id-01j8semz9aevjedxpz2w5m74x4"></a>

Campaigns that are not prioritized will not be altered by the prioritized campaigns. They will be displayed according to their basic targeting setup (segment, URLs, trigger, frequency…).


# Prioritization of Personalizations

The more mature our customer gets on their personalization strategy the more challenged they are on specific needs to orchestrate their campaigns. That is why we build a service to help you prioritize them, and keep a “top of the class” experience for your end users delivering them a personalized experience that will improve your revenues.

Our prioritization service has two main functionalities:

* **Identify conflicts** between two or more campaigns for you to act consequently
* **Choose a prioritized order** to display them consequently on your website

Our prioritization service works like **a ranking system** that allows you to declare, on a priority scale from 1 to 10, which campaigns should be seen first by your visitors if they are eligible for several of them. It allows you to prevent your visitors from being subjected to multiple campaigns and therefore messages on the same page, thus leading to poor user experience, risk of contradictory messages, and bias in your campaign analysis.

Prioritization is possible for all personalization campaign types : **Simple Personalization** (SP), **Multi-Page Personalization** (MPP), **Multi-Experience Personalizations** (MEP).

Note that it is not recommended to prioritize the latter as it already includes a subtests prioritization in itself.

Please refer to this [***article***](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-use-campaign-prioritization) to learn how to use this feature in details.

## How does it work <a href="#h_01hvvfax6amad23fcc6y3v29kp" id="h_01hvvfax6amad23fcc6y3v29kp"></a>

The answer lies in the way AB Tasty launch and displays the campaigns you create from the platform.

💡 **Reminder**

Let’s recall how the tag works and how it triggers campaigns. The AB Tasty tag is placed on every page of your website. When a visitor loads a page, the tag checks:

* if test or personalization campaigns are targeted on this page
* and if so, for each campaign, if their targeting condition makes the visitor "accepted", namely:
  * if they belong to the user segment chosen in the campaign (for instance "located in NYC”, “on mobile" etc.)
  * and if they have met the specific trigger rules (for instance “visited at least 5 pages”, “coming from Google” etc.)

The visitors will therefore see all the campaigns (test and personalization) created on your account, depending on their specific navigation and behavior on your website. In other words, your visitor can potentially see an unlimited number of campaigns (depending on what you've launched), with the side effects, visuals, and analytics implied by this overexposure.

To impose safeguards, and to indicate what should be triggered without any constraints and what should be constrained, our new prioritization service will help you identify those conflicts, and choose which campaign to display in a conflictual situation.

<img src="/files/0PovXeAdn0d77r0YXlle" alt="" width="563">

## Campaigns conflicts <a href="#h_01hvvfax6atyygb0630b9fp4a0" id="h_01hvvfax6atyygb0630b9fp4a0"></a>

As we saw during our brief introduction, it is important to identify potential conflicts first. As more and more campaigns are being configured to tailor your website to your different audiences, it can be difficult to identify those conflicts without a dedicated tool. Before launching your personalization campaigns, you can now identify those conflicts between campaigns to find out which ones should be prioritized first and which priority level should apply to each campaign compared to one another.

A conflict happens when two or more campaigns either:

* Target the same saved page(s) OR the “all pages” option,
* Target the same segment (configured or “all visitors” one)

Moreover, those campaigns should be both live for the conflict to appear.

If you launch 10 separate personalizations on your homepage, targeting 10 segments of your audience to deliver a fully personalized experience, you run the risk of some of your visitors seeing more than one at a time, simply because it's not always possible to ensure that the segments are fully independent of each other.

Let’s take a simple example to understand that properly. Imagine the two following segments:

* Segment 1: VIP cookie holders
* Segment 2: Geolocated in NYC

VIP AND New York visitors are part of both segments, and will likely see both campaigns targeting VIPs, and those targeting New Yorkers.

Configuring and displaying too many messages can lead to user confusion. Personalization must remain compatible with the UX requirement of simplification and an intuitive understanding of your interface. The best messages being the clearest and most readable, your personalization campaigns can create a lot of "noise" with overlaps, deteriorating your strategy and website performance: this is what we want to avoid.

### **First issue: a deteriorated user experience** <a href="#h_01hvvfax6a1xkn9axzz6k4fcfd" id="h_01hvvfax6a1xkn9axzz6k4fcfd"></a>

A basic example to illustrate that is the overlap of two campaigns which should originally display two different kinds of information for two different audiences. If you choose to use our widget pop-in, a same user that fits into two different segments could be targeted, and then sees two different modals that are triggered at the same time and overload the interface like intrusive pop-ups.

<img src="/files/9wUyaTaPw63MjkMpbwQn" alt="image3.png" width="563">

### **Second issue: conflicting messages** <a href="#h_01hvvfax6aq7dc00mzpm2kq30a" id="h_01hvvfax6aq7dc00mzpm2kq30a"></a>

This case, although rarer, occurs when the 2 messages that are triggered (for example a modal on one side and a banner on the other), display promotional messages or messages related to the benefits you want your audience segments to enjoy. If a user is part of several audience segments at the same time (for instance “appetite for vintage” and “loyalty card holder”), they risk being exposed to 2 special offers that are not necessarily compatible when checking out, and lead to bad user experience affecting your revenue stream.

## Identifying conflicts with the prioritization service <a href="#h_01hvvfax6a0a9xc6pdk8swm2kb" id="h_01hvvfax6a0a9xc6pdk8swm2kb"></a>

As you can see, prioritizing campaigns is essential when adopting an advanced and assumed personalization strategy, and when multiplying personalized messages for optimization purposes. To identify potential conflicts between your personalization campaigns, you can use two available filters: campaign and segments. Those filters recall the potential overlap we could have between two different campaigns.

### **Filter by segment or saved pages** <a href="#h_01j5xa5cmekq5vcs6h7ycwcbct" id="h_01j5xa5cmekq5vcs6h7ycwcbct"></a>

<figure><img src="https://support.abtasty.com/hc/article_attachments/13626702469788" alt=""><figcaption></figcaption></figure>

Applying that filter makes AB Tasty compare campaigns according to the segment or saved Page(s) used inside the targeting section of each personalization campaign configured on the account:

* By default, no filtering option is applied when you open the prioritization page
* The “select a segment” dropdown presents you with the following options:
  * The first option in the segment filter list is the “All visitors” option. This is the default option in the audience section of the targeting. Even if you do not directly configure it inside your account, we consider the audience as a global segment that reaches all your website visitors.
  * The other options that appear in that list are the segment already configured on your account, which you can choose from to display only the campaigns that match your segment selection, and choose a level of prioritization between all of them. You can select multiple segments for you to display as many related campaigns as you would like.
  * At the bottom of the dropdown, you have the "create a segment" option to access the segment creation process.
* The “select a saved page” dropdown presents you with the following options:
  * The first option in the saved page filter list is the “All URLs” option. This is the default option in the URL section of the targeting.
    * The other options that appear in that list are the saved pages already configured on your account, which you can choose from to display only the campaigns that match your saved page selection and choose a level of prioritization between all of them. You can select multiple saved pages for you to display as many related campaigns as you would like.
* At the bottom of the dropdown, you have a “create a saved page” option to access the creation process on AB Tasty settings

{% hint style="info" %}
The filters only take into account the saved Pages you configured in the [***Page***](https://support.abtasty.com/hc/en-us/articles/6401596572060)[ ***Builder***](https://support.abtasty.com/hc/en-us/articles/6401596572060) screen and the all pages option. If you haven’t configured any, you won’t be able to select a page from the dropdown list. If your campaign targets pages based on an ID/class/element, code, or personalized URLs, they won’t appear in the dropdown list and these campaigns won’t be considered (they will be excluded by default).

For example, to find out which campaigns target both the home page and new visitors, when applying the filter, you will only see campaigns that target at least the home page (they can also target other URLs or saved Pages) and at least the new-visitors segment (they can also target other segments). It’s a good opportunity to start building saved pages to ease your targeting configuration💡
{% endhint %}

### **Filter by campaign** <a href="#h_01j5xa6eej5h3kh2nq19ftzha6" id="h_01j5xa6eej5h3kh2nq19ftzha6"></a>

This filter can be used to identify potential conflict based on a specific campaign which serves as a reference, that you must select from the dropdown list.

<figure><img src="https://support.abtasty.com/hc/article_attachments/13626686322588" alt=""><figcaption></figcaption></figure>

It enables you to display the campaigns that share the same targeting configuration:

* The same segment (a specific/configured one or the “all visitors” one)
* The same saved Page(s) (a specific/configured one or the “all pages” option)

{% hint style="warning" %}
Using the filters enables you to identify campaigns that may be in conflict because they target the same segment and/or saved Page(s). However, it doesn’t take into account the trigger and layout.

For example, when using the Segment and saved Page filter, you notice that two campaigns are displayed on the home page, and both target new visitors. However, one has no specific trigger and the other is triggered on exit intent. In this case, the conflict you have identified with the filter does not necessarily affect the user’s experience on the website. It is up to you to decide whether or not you want to prioritize between the two.
{% endhint %}

## Configuration of your prioritization rules <a href="#h_01hvvfax6b51cr6gwa7ym39r2s" id="h_01hvvfax6b51cr6gwa7ym39r2s"></a>

The prioritization screen enables you to prioritize your personalization campaigns when you need to launch several campaigns at the same time, especially when they are in conflict. Prioritization is available for all types of personalization campaigns: simple personalization, multipage personalization, and multi-experience personalization.

By default, all your campaigns are without priority, i.e. they will all be triggered if your visitor respects the targeting rules, namely:

* they’re on the right page of your website - included in the targeting you have defined
* they’re part of the visitor segment you have chosen (segment)
* they have behaved as defined by your trigger rule (trigger)

This unconstrained exposure is perfect for campaigns without a strong visual impact (additional information in the description of your product pages for example) or that absolutely must be seen by everyone (banner showing a reminder of the legal sale dates).

We, therefore, recommend leaving the following campaigns unprioritized:

* All campaigns that aim to correct your website (patch, winning variation after an A/B test, etc.)
* All campaigns that will not generate overexposure or conflict

### **Prioritization configuration** <a href="#h_01j5xab9pxg684fkx764kp2xyf" id="h_01j5xab9pxg684fkx764kp2xyf"></a>

After identifying conflicts between your campaigns, you can start prioritizing them by applying a priority order to all/some of them. You can perform this action on our prioritization screen split into two different columns:

* The left column refers to the “no priority applied” section: you will find here listed all your personalization campaigns that have not been prioritized yet. This list can be affected by the filter you choose from the segment/saved pages filters.
* The right column refers to the “priority level” section: a list of campaigns that have been prioritized

Prioritized campaigns are displayed on the right column, in different prioritization-level sections. They are split between prioritization levels and constitute the prioritization rule that will be applied on your website. If a visitor matches the targeting of several prioritized campaigns on a specific page of your website, they will only see the one(s) with the highest priority level.

There is a maximum of 10 priorities: 1 being the highest and 10 being the lowest. The first 2 levels are mandatory (priority 1 and 2) to have a basic rule set. For example, if you place one or more campaigns in priority 1, you must have at least one campaign in priority 2. Other priority levels can remain empty.

You can place several campaigns within the same priority level (12 campaigns maximum per priority level). This means that they will be displayed to all visitors matching the targeting of these campaigns. However, we recommend placing campaigns that target the same page(s) inside different levels to avoid any conflict.

To prioritize a campaign, you just need to drag and drop it from the left column to the desired priority level.

{% hint style="info" %}
You can prepare your prioritization rule and order your paused campaigns before launching them (or scheduling them). Please note that the prioritization service does not take paused campaigns into account, you need to put your campaign live first so that the prioritization is effective on your website.
{% endhint %}

### **Publishing the prioritization rule** <a href="#h_01j5xabjw42mwc1e9xxkps4xtp" id="h_01j5xabjw42mwc1e9xxkps4xtp"></a>

Once you have placed your campaigns in different priority levels, you can save the prioritization rule by clicking the “Save and apply” button. The tag is updated automatically and your changes are automatically deployed in production.

If you leave without saving, the prioritization rule won’t be saved and won’t be applied live.

Generally speaking, your prioritization rule must be updated (click the Save and apply button) in the following cases:

* when you move one or more campaigns from the non-prioritized column (left) to the priority column (right);
* when you move one or more campaigns to another priority level;
* when you move one or more campaigns from the priority column (right) to the non-prioritized column (left);
* before you change the timeframe, because your changes will not be kept if you return to the original timeframe;
* before you apply filters (filter by campaign or filter by segment and saved Page), because your changes will not be kept when you return to the original view.

### **Disabling the prioritization rule** <a href="#h_01j5xabxcv1xzwrmhjbven5ts7" id="h_01j5xabxcv1xzwrmhjbven5ts7"></a>

To disable any prioritization rule, you can either move all your prioritized campaigns back to the left column (that is to say remove them from the priority column) or pause all your prioritized campaigns. To make these changes active, click the “Save and apply” button.

## How does it work with the tag? <a href="#h_01j8sm1wncd5xyjwekahkkhy8f" id="h_01j8sm1wncd5xyjwekahkkhy8f"></a>

### **Basic principle** <a href="#id-01j8sm1kwkn3sygaq7410sdxty" id="id-01j8sm1kwkn3sygaq7410sdxty"></a>

Prioritized personalization campaigns (SP, MPP and MEP) will fall under the priority ranks you give them. These priority ranks, called p-values, will determine if a visitor will see one campaign or another on the same targeting.

Up to 10 priority ranks can be set up.

### **Multi-Page Personalizations and user journey continuity** <a href="#id-01j8sektq9w94ryqsb2j0w67ff" id="id-01j8sektq9w94ryqsb2j0w67ff"></a>

When a prioritized MPP campaign has been seen by the visitor, thus historicized, the tag will check this campaign but will not check the lesser priority (aka higher p-value) of other MPPs. The prioritized SP will still be checked by the tag according to their priority.

This ensures that the visitor sees the whole journey of the historicized MPP and does not prevent other prioritized campaigns to be applied except lesser priority MPPs.

Between two historized MPPs we check the priority between them. So if an MPP p-value 1 and a MPP p-value 2 are historized, only the first will be displayed in case of targeting overlap.

### **What about the non-prioritized campaigns?** <a href="#id-01j8sm3ezktdt48kt0dc73f219" id="id-01j8sm3ezktdt48kt0dc73f219"></a>

Campaigns that are not prioritized will not be altered by the prioritized campaigns. They will be displayed according to their basic targeting setup (segment, URLs, trigger, frequency…).

## How to use the prioritization to improve your user experience <a href="#h_01hvvfax6bejhe1pq3acpjgrgb" id="h_01hvvfax6bejhe1pq3acpjgrgb"></a>

As you saw through this article, there are many cases when our users need to orchestrate their personalization campaign to fit in a global personalization strategy. The main objective with personalization efforts and investments is to create as many different experiences as there are relevant audiences.

Let’s dive into a "real life" example. Imagine an e-commerce website wanting to send the following messages to its visitors:

* **Campaign 01:** Offer a 20% discount to all visitors, with a banner triggered on the entire website
* **Campaign 02:** Invite Parisian customers to the opening of their new physical store on the shopping cart page
* **Campaign 03:** Patch the disclaimer of the website in the footer (on all pages)
* **Campaign 04:** Offer an additional 10% discount to VIPs on top of the 20% discount for all (modal on the home page)
* **Campaign 05:** Boost newsletter subscription for those who have visited at least 15 pages of the website during their session (triggering on all pages potentially)

First of all, we need to be able to identify the potential issues linked to the simultaneous launch of all these campaigns. It's pretty easy to spot potential frictions because we only have 5 campaigns, but picture the same scenario with 10 times as many campaigns and things quickly become difficult to manage. We advise you then to go through some specific steps to help you in the process.

### **Step 1: Discover** <a href="#h_01j5xacpn6f1v1pjj0sq7nvr84" id="h_01j5xacpn6f1v1pjj0sq7nvr84"></a>

First, let's identify the one campaign in the list that should be displayed all the time, for everyone, regardless of the circumstances and the visitor’s behavior on the website:

**Campaign 03:** Patch the disclaimer of the website in the footer (on all pages).

This campaign should remain on the left side of the screen, not prioritized. To see this campaign, your visitors simply need to match the targeting rules (where, who, when) of the campaign.

### **Step 2: Filter** <a href="#h_01j5xad0454vjs8zr7p94zxjfd" id="h_01j5xad0454vjs8zr7p94zxjfd"></a>

For other campaigns that may conflict with each other, you can use the "Campaign" filter inside the personalization service. To do this, select one of your campaigns, presumably the one deemed most important, for instance:

**Campaign 04:** Offer an additional 10% discount to VIPs on top of the 20% discount for all (modal on the home page)

**Targeted pages:** Home page

**Segment:** VIPs

This campaign offers an additional advantage to VIPs and is likely to trigger sales, and therefore can be considered more important than the other messages.

By choosing this campaign as a reference for your filter, you will be able to discover, in one click, which campaigns are triggered under the same conditions as your campaign 01 (on the same pages AND with the same targeted audience).

In our case, the filter gives the following results:

**Campaign 04:** Your reference, which now appears in green in your

**Segment screen:** VIPs

**Pages:** Home page

* **❌Campaign 02:** Invite Parisian customers to the opening of their new physical store on the shopping cart page\
  This campaign does not appear in the results because it is targeted on the shopping cart page and not on the home page
* **✅ Campaign 03:** Patch the disclaimer of the website in the footer (on all pages)\
  The campaign is targeted on all pages, including the home page, and the all visitors segment includes VIPs by nature.
* **✅ Campaign 01:** Offer a 20% discount to all visitors, with a banner triggered on the entire website\
  The campaign is also targeted on the entire website (including the home page) and the all-visitors segment includes VIPs by nature.
* **✅ Campaign 05:** Boost newsletter registration for non-subscribers who have visited at least 15 pages of the website during their session\
  The campaign is targeted on all pages, including the home page, and isn't targeted on a specific user segment, so on all visitors. The trigger used is "at least 15 page views", however, if the 15th page of your VIP visitor's session happens to be the home page (it could happen), they will see this modal as well as the 04 reference campaign. The risk of conflict is minimal but very real.

👉 This exercise shows that **campaign 04** should be prioritized over **campaigns 1 and 5**.

👉 **Campaign 3**, as we have seen, can be triggered all the time and for all, because not only is it harmless and does not create conflicts with other campaigns, but it is also necessary that everyone sees it (it is a legal message).

👉 **Campaign 2** does not need to be prioritized over campaign 1: they are not targeted on the same pages.

### **Step 3: Prioritize** <a href="#h_01j5xafx1zyn14w5fhb1chs757" id="h_01j5xafx1zyn14w5fhb1chs757"></a>

Now that you have identified the campaigns that need prioritizing, you can proceed as follows:

* leave campaign 03 in the non-prioritized campaigns
* position campaign 04 as priority 1
* position campaigns 01, 02, and 05 as priority 2

This exercise is based on a reference campaign, in this case, the number 04. It is also interesting to repeat this exercise (filtering then making a decision based on a business approach) using the other campaigns as a reference (01, 02, or 05 for example), and to refine the prioritization rule by deciding, perhaps, to separate the 3 campaigns positioned in Priority 2 and to redistribute them with other priority levels (Priority 3 and 4).

### **Effect on use cases** <a href="#h_01j5xag5p70pverc1k8en8cqhv" id="h_01j5xag5p70pverc1k8en8cqhv"></a>

Using the prioritization module will allow you to significantly increase the number of campaigns you can launch at the same time on your website without having to be concerned about potential conflicts.

## Conclusions <a href="#h_01hvvfax6babm5rrghfxhz5s27" id="h_01hvvfax6babm5rrghfxhz5s27"></a>

By using the prioritization service, you will certainly uncover a lot of new use cases, specific to your business or industry, and to your approach of personalization as a way to drive your revenue.

To end this article, we have listed here a few more use cases and tips to guide you in your approach to prioritizing your personalization campaigns:

### **Advices** <a href="#h_01j5xagzk1s1ctb13de3rk8anh" id="h_01j5xagzk1s1ctb13de3rk8anh"></a>

👉 You don’t want to spam your visitors with several messages/popins at once on a specific page.

👉 You don’t want to distort the results of your campaigns (and ensure that every single user will see only one personalization campaign at a time).

👉 You don’t want to visually break a page (when there are several popins triggered on the same page for example).

👉 You want to decide which campaigns must be seen as a priority if the user matches the segment of several campaigns.

### **Tips** <a href="#h_01j5xah7r0jnzrjvz8yss4yrg7" id="h_01j5xah7r0jnzrjvz8yss4yrg7"></a>

👉 Limit the number of campaigns per prioritization level:\
A visitor who triggers a PX level on a page will potentially see all campaigns with that priority on the page they are on.

👉 Each time the page changes, the priority rule check starts from scratch: a visitor who saw a priority 3 campaign on their first page may see a priority 1 campaign on their second session page. Therefore, be vigilant and think "exposure per page".

👉 Keep your A/B tests in mind: even if the strategy and roadmap are different, be careful not to customize a tested page or check that your message will not affect the test results.

👉 Finally, the best personalization campaigns go unnoticed, the most effective messages are the most discreet because they appeal to your visitor's subconscious and do not deteriorate their experience (imagine the same experience in real life, if you were inundated with loud and aggressive messages in a store... you would leave immediately!). So before setting up multiple messages, we recommend building a persuasive and high-quality personalization strategy.

## Glossary <a href="#h_01hvvfax6bdx2vjxr6ryaz64vj" id="h_01hvvfax6bdx2vjxr6ryaz64vj"></a>

<table data-header-hidden><thead><tr><th width="243.74609375"></th><th></th></tr></thead><tbody><tr><td><p><strong>Conflict</strong></p><p><br><br></p></td><td><p>Situation where two or more campaigns target:</p><ul><li>the same saved Page(s) (strictly the same or one of the campaigns targets all the pages),</li><li>AND the same segment (strictly the same segment or one of the campaigns targets all the visitors).</li></ul></td></tr><tr><td><strong>Prioritized campaign</strong></td><td>Campaign placed at a priority level.</td></tr><tr><td><strong>Prioritization level</strong></td><td>Section where you can place the campaigns you want to prioritize. You can have up to 10 prioritization levels.</td></tr><tr><td><strong>Prioritization rule</strong></td><td><p>All the conditions based on which the prioritized campaigns will be displayed for the visitors.</p><p>Made up of a number of prioritization levels and prioritized campaigns split into these prioritization levels.</p></td></tr><tr><td><strong>Non-prioritized campaigns</strong></td><td>Campaigns that have no priority level and thus can be seen by all visitors matching the targeting conditions (segment, page, trigger).</td></tr></tbody></table>

For more information about specific use cases you could experience please refer to our [***FAQ article***](/help-center/faq/faq-about-prioritization).

Please refer to this [***article***](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-use-campaign-prioritization) to learn how to use this feature in details.


# Editors and Widget

The Editor in AB Tasty is your main workspace for creating and customizing website experiences—no coding required.&#x20;

With the Visual Editor, you can simply click on elements on your page to modify text, images, styles, and more, all in real time.&#x20;

For those who prefer more control, the Code Editor lets you directly edit CSS and JavaScript.&#x20;

Features like responsive mode, navigation mode, and a library of widgets make it easy to tailor your site for any device or scenario.&#x20;

Whether you’re making quick changes or building complex variations, the editor is designed to be intuitive and accessible for all users.

Curious to learn more? Explore our articles to help you get the most out of your editing experience


# Visual editor

We've updated the Visual Editor with a fresh look that aligns with our company's branding. This includes new colors, fonts, and icons for a more modern and consistent experience.

## The Quick-Action Bar

When you select an element, the **Quick-Action Bar** appears just below it, offering shortcuts to the most frequently used actions. This allows you to perform common edits without needing to open the full context menu.

<figure><img src="/files/YJTaoxAs8Rv2QrWScRYu" alt="" width="183"><figcaption></figcaption></figure>

The standard actions include:

* **AI Copilot:** Invoke the AI assistant.

<figure><img src="/files/jJyyMukzfjUDHUoKaEwa" alt="" width="375"><figcaption></figcaption></figure>

* **Edit Style:** Open the style editor.

<figure><img src="/files/UQbxRDVUy7GTEdJYKiRN" alt="" width="375"><figcaption></figcaption></figure>

* **Edit Text:** Open the text editor.

<figure><img src="/files/5WqzYWDGWNe7Q4pwEgYX" alt="" width="375"><figcaption></figcaption></figure>

* **Add Tracker:** Add an action tracker to the element.

<figure><img src="/files/yZux9ECfKNuqcAQk8kus" alt="" width="375"><figcaption></figcaption></figure>

* **More Options (`...`):** Click this to open the full context menu.

<figure><img src="/files/ftJQ7QO7uywgQDfLhYTW" alt="" width="316"><figcaption></figcaption></figure>

The **Quick-Action Bar** is adaptive. For example, if you select a widget, the style and text edit icons will be replaced by an icon to open the widget's configuration panel. If an element has already been modified, an icon to access the "active changes" panel will appear.

<figure><img src="/files/37uUjZpUfQbUOUK9SYWA" alt="" width="363"><figcaption></figcaption></figure>

## The SmartOutline Panel

The **SmartOutline** panel, located on the left side of the editor, displays the complete hierarchical structure (DOM) of your page. It is designed to make element selection more precise and powerful.

<figure><img src="/files/niTN2fGo9lkHan5Y2UR4" alt="" width="234"><figcaption></figcaption></figure>

Key features include:

* **Synchronized Selection:** Hovering or clicking an element in the SmartOutline panel will highlight and select it in the Visual Editor, and vice-versa.
* **Precise Targeting:** Easily select elements that are difficult to click on, such as nested or overlapping components.
* **Right-Click Menu:** You can now right-click directly on an element within the SmartOutline panel to open the full context menu, saving you time.
* **Collapsible:** You can collapse the panel to maximize your screen space. The collapsed panel can be moved vertically if it obstructs an element you need to see.


# How to use our Visual Editor - Interactive demo

Welcome to our interactive demo on "How to Use Our Visual Editor."\
This hands-on experience will guide you through the features and functionalities of our intuitive editor, helping you create and customize your campaigns with ease.\
If you prefer a detailed description instead of the demo, feel free to check out our comprehensive article: [Visual editor discovery](/web-experimentation-and-personalization/editors-and-widget/visual-editor/discovering-the-visual-editor).

{% embed url="<https://demo.arcade.software/gcSbmTcQZPNBz91xPRIA?embed=&embed_desktop=inline&embed_mobile=tab&show_copy_link=true>" %}


# Discovering the Visual Editor

{% hint style="warning" %}
To load a website page in the editor and begin your work (to create a variation or a customized message), **the generic AB Tasty tag must be present on your page**.
{% endhint %}

If you can’t install the AB Tasty tag but you absolutely need to load your website in the editor, we provide a [Chrome extension](/web-experimentation-and-personalization/editors-and-widget/chrome-extension).

> To learn how to install the AB Tasty tag, please refer to this [article](broken://pages/kqhGHAgV5lYeW4ItvmBu).

## Discovering the Visual Editor interface <a href="#h_01g90k2dt77jwan2fgp7vb84gn" id="h_01g90k2dt77jwan2fgp7vb84gn"></a>

The URL you’ve filled in on the [**Main Information page**](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step) (or the page used with the [Chrome extension](/web-experimentation-and-personalization/editors-and-widget/chrome-extension), or the HTML you’ve pasted on the Main Information page) should be fully loaded in the Visual Editor.

The AB Tasty visual editor is compatible with most of the market frameworks (e.g. ReactJS, Angular, VueJS, etc.).

### **Loading your page in the visual editor** <a href="#h_01j535z9xn395qwhj2mjswq0b7" id="h_01j535z9xn395qwhj2mjswq0b7"></a>

#### 👉 URL loaded by default <a href="#id-01g9cjm84v139sbwtx58w10ns7" id="id-01g9cjm84v139sbwtx58w10ns7"></a>

When you create a campaign, typically you will use the **Create button** on the campaign dashboard, choose your campaign type, and land on the **Main Information page** where you’ll have to fill in a **Sample URL**.

This URL will be loaded by default and represents **a sample of the page(s) you want to modify** (e.g. one specific product pages that is representative to all your product pages), or can be the only one (e.g. the homepage). During the Targeting step, you’ll declare the exact pages you want your experience to be displayed on.

Sometimes the page does not fully load in the editor. If this happens, you can try to reload the editor by refreshing the page, or use our [Chrome extension](/web-experimentation-and-personalization/editors-and-widget/chrome-extension).

The editor embeds the website HTML in an iframe, so what loads at the moment you open the editor is the code currently published on the website.

Each time you click on one element of the website, the contextual editor will be triggered:

<img src="/files/28CqWRz4BvwxuiwjtciE" alt="" width="242">

The clickable links are deactivated to let you interact properly and change your content with our tool. If you want to activate an element which is only visible after a click, you’ll need the [**Navigation mode**](#id-01g9cjm84x3m9zprxkp4mg56w2)**.**

#### 👉 Chrome extension <a href="#id-01g9cjm84vb5wtkq20a9bs0m3b" id="id-01g9cjm84vb5wtkq20a9bs0m3b"></a>

This option can be useful for logged pages (e.g. those with dynamic content, such as full basket page or account pages with personal information), or in the case of bad loading.

For more information, please refer to our [*article about the AB Tasty Chrome extension*](/web-experimentation-and-personalization/editors-and-widget/chrome-extension).

#### 👉 OuterHTML <a href="#id-01j535yjachejwjfwfqq1g1zka" id="id-01j535yjachejwjfwfqq1g1zka"></a>

This option can be useful for logged pages, such as those with dynamic content, such as full basket page or account pages with personal information, or in case of bad loading.

By default, when you load a page that requires an authentication (e.g. a client account), or a conversion funnel page, the page displayed in the editor will be empty or will show an error because it often requires session information (e.g. products to be displayed in the cart page).

To work around this issue, you need to inject the source code of the page within the Main Information step of the creation flow.

There are two ways to do this:

* Using the **Load Editor with embedded source code** option manually (as shown)
* Using the **Apply HTML** option within the **AB Tasty Chrome extension** (see this [**article)**](/web-experimentation-and-personalization/editors-and-widget/chrome-extension)

The first method with source code consists of pasting the page’s source code directly into AB Tasty. To do this:

* Go to the URL that you want to load in the editor
* Right click on the page, and select Inspect
* In the Elements tab of the console, go to the first line of code: the \<html> tag
* Right click on it, then select Copy → outerHTML. You will get the entire source code of the page with all the scripts and information needed
* Paste this code into the dedicated window within the Main Information step
* Click Save

The page will load in the editor and you can apply your desired changes.

❗️**Caution:** The URL field needs to remain filled with your URL - this is mandatory in order to save and go to the next step

<img src="/files/b5VnwW7QGQury43PnQEu" alt="" width="563">

### **Using the navigation mode** <a href="#id-01g9cjm84x3m9zprxkp4mg56w2" id="id-01g9cjm84x3m9zprxkp4mg56w2"></a>

<img src="/files/qddmUEKr8aj1AKdcJQBs" alt="" width="563">

The navigation mode can temporarily enable you to interact with the website in order to trigger certain elements that wouldn’t be otherwise visible.

To do so :

* Click the pencil button to **Stop editing**
* Navigate on your website
* Click the same button to **Start editing**\
  Your content is now accessible and fixed to let you work on it thanks to the contextual editor.

{% hint style="info" %}
You can also use the shortcut <kbd>**CTRL + M**</kbd> to activate/ deactivate the option, which can be useful if you want to use the modification menu on an element which appears only on hover (e.g. a navigation menu).
{% endhint %}

### **Using the responsive mode** <a href="#id-01j5360j09h58g17yhkdavtj98" id="id-01j5360j09h58g17yhkdavtj98"></a>

If you want to visualize the mobile version of your website, use the Responsive mode at the top of the navigation bar. Each time you choose a different device, the content will adapt to the new resolution.

You can also change the orientation of the device by clicking on the portrait/landscape option at the right.

{% hint style="warning" %}
Working on the mobile view in the editor doesn’t mean that your campaign will only be delivered on mobile devices. To set up such a configuration, you’ll have to choose a segment of mobile users in the [targeting step](https://support.abtasty.com/hc/en-us/articles/4710638053404) or select a trigger using the device option.
{% endhint %}

### **Using the Iframeless mode** <a href="#id-01j5365k218dt3x323pe7ccg17" id="id-01j5365k218dt3x323pe7ccg17"></a>

Some websites are not compatible with the version of the editor that enables the responsive mode. To let them use the editor in any case, we‘ve created an **iframeless option**. Please contact the support to activate it.

## Creating new variations and pages <a href="#h_01j53m9tz40yzpz7t619tt3dy4" id="h_01j53m9tz40yzpz7t619tt3dy4"></a>

### **Adding new variations** <a href="#h_01j5367mj6qfz2jnsyhr11ssz8" id="h_01j5367mj6qfz2jnsyhr11ssz8"></a>

***For tests only: A/B Tests, Multipage Tests, Multivariate Tests***\
When you create a new A/B Test, AB Tasty generates **one variation automatically**.

In the editor, you can navigate between your original version and the new variation(s) on top of the screen. You can create a new variation by clicking on the tab **New Variation +** on the top left.

<div align="left"><img src="/files/VHAxwMn6EeArsTIafW4h" alt="" width="375"></div>

You can also use the menu of each variation and click on duplicate. This way the new variation will embed all the changes you’ve made on the model variation.

You can also use this menu bar to rename your variation. This is important if you want to create several variations, as their name will appear in the reporting and it will be easier to read the results and understand the impact of your changes.

For example, Variation 1 can be renamed “CTA in Blue” and Variation 2 can be renamed “CTA in Green”.

<div align="left"><img src="/files/LFXEo8oZrnfZzo0FqA55" alt="" width="168"></div>

### **Adding new pages** <a href="#h_01j536qk4hw0z57rvdq1dnhq90" id="h_01j536qk4hw0z57rvdq1dnhq90"></a>

***For Multipage campaigns only: Multipage Test and Multipage Personalization***

These types of campaigns are displayed on several pages or sets of pages to propose a complete new experience to the user. For example, a color change in the middle of the homepage, on all product pages for the CTA and also on top of the basket page.

You have the option to declare the number of needed pages in the [Main Information page](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step), but you can also add pages in the editor by clicking on the dropdown on the top left of the navigation banner:

<img src="/files/x85GvWLf0ELrO2baZBAx" alt="" width="563">

### **Adding new experiences** <a href="#id-01g9cjm84xf3bte5hzkqza3qg9" id="id-01g9cjm84xf3bte5hzkqza3qg9"></a>

***For Multiexperience Personalization only***

It is not possible to add experiences directly from the editor. If you need to add an experience, please go back to the [Main Information page](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-set-up-main-information-step).

### **Adding new subtests** <a href="#id-01g9cjm84xrrs2pjc6z3ty7mzf" id="id-01g9cjm84xrrs2pjc6z3ty7mzf"></a>

***For Multivariate Tests only***

These types of campaigns consist of creating several simple A/B Tests in the same campaign and distributing the variations randomly to discover the best combination of changes.

You can have one sub-A/B Test with one variation to test the wording of the CTA, and a second sub-A/B Test with two variations to test the color of the CTA.\
Using the dropdown menu, select subtest 2 to add a new variation. In subtest 1, you’ll keep only one variation.

<img src="/files/1K4JJEPTqIVVaVAcgr3i" alt="" width="563">

### **Other options in the Variation/Experience menu** <a href="#id-01g9cjm84xttwzvnnjj923pjsa" id="id-01g9cjm84xttwzvnnjj923pjsa"></a>

When you click on the Variation/Experience menu, you’ll find the following actions and information:<br>

<figure><img src="/files/LFXEo8oZrnfZzo0FqA55" alt="" width="168"><figcaption></figcaption></figure>

* **Rename**: Give a less generic name to your variation/experience
* **Duplicate**: Save time if your next variation/experience will embed a tiny change from your first variation/experience

{% hint style="info" %}
Duplicate is not available in simple Personalization campaigns that support only one new message to be displayed throughout the campaign.
{% endhint %}

* **Remove**: Only usable only when the conditions are met (at least one variation per Test, at least two experiences per Personalization)
* **Redirect**: Transform your experience into a [Split Test](/web-experimentation-and-personalization/campaign-creation-and-dashboard/how-to-create-a-campaign/experimentations/how-to-create-a-split-testtest-by-redirection) or a Split Personalization (see next paragraph for more details)
* **Preview**: Open your website page to see a preview of the modifications you’ve made.\
  \&#xNAN;**⚠️ Caution: previewing does not mean QAing. To learn about QA, please read our QA guide**
* **ID of your variation/experience**: This can be useful if you want to explore the AB Tasty variables in the developer console and do an expert QA/debug session. To learn more, please refer to [*this article.*](/web-experimentation-and-personalization/qa-step/qa-mode--qa-assistant)

#### Focus on redirect option <a href="#id-01g9cjm84xaq3cphz218c5825n" id="id-01g9cjm84xaq3cphz218c5825n"></a>

A Redirect Test/Personalization (or Split Test/Personalization) enables you to test or personalize a new page created and hosted outside of AB Tasty. Please refer to the [***specific How-to article***](/web-experimentation-and-personalization/editors-and-widget/visual-editor/how-to-use-redirection-option) about redirect option.

## Using the WYSIWYG/Contextual Editor to edit content <a href="#h_01j536zc9bch8z09xtvx5q3gsz" id="h_01j536zc9bch8z09xtvx5q3gsz"></a>

The WYSIWYG/Contextual Editor (What You See Is What You Get) enables you to play with your webpage and make changes on the fly by clicking on the different elements.

The contextual editor enables you to virtually write new lines of code, especially CSS (to modify UI parameters such as the margins, colors, etc.) without any coding knowledge, just by clicking on elements and selecting the modification you want to apply from a list.

This is an example of the contextual editor that opens when you click on an element:

<img src="/files/28CqWRz4BvwxuiwjtciE" alt="" width="242">

The element appears as a title of the block (in this example, “\<h1>”), so every change you make here will affect the button you selected.

To follow-up all your changes on elements (edition, deletion, adding etc.), click on **Active Changes** in the right-hand panel to retrieve all your modifications and access your history.<br>

<div align="left"><figure><img src="/files/zxeC3vt0MHaXfXjckVPT" alt="" width="563"><figcaption></figcaption></figure></div>

### **Selecting the right element to edit** <a href="#h_01j538jn8aqb2sbd5tyxqfr9e4" id="h_01j538jn8aqb2sbd5tyxqfr9e4"></a>

Once the URL is loaded in the visual editor, you'll have to select the blocks you want to edit. Most of the time, you'll have to

#### **Selecting parent or children element** <a href="#id-01g9cjm84xkkmre82cxxcde57p" id="id-01g9cjm84xkkmre82cxxcde57p"></a>

Sometimes the structure of the page’s HTML is complex and blocks overlap and are tied to others. Every change made with the contextual editor will replace the native CSS/HTML, meaning that at this point, **you need to select the right HTML tag** to be able to influence its CSS parameters.

* To go back up in the HTML code, use “**Select a Parent Element**”.
* To go back down, use “**Select a Child Element**”.

<div align="left"><img src="/files/NgCLRu69MnxYi16V154O" alt="" width="311"></div>

In the opened list, you’ll find the elements AB Tasty has detected by their class or ID (CSS parameters we can identify directly from the code).

#### **Selecting same class elements** <a href="#id-01j538ea4danye4f4jaanmzc3b" id="id-01j538ea4danye4f4jaanmzc3b"></a>

Once you’ve selected an element on your page (e.g. in a product list page, the CTA “see article above the picture of an item of the list”), click on Select Same Class Elements to multi-select all the CTAs of the page. This way, the change you make (e.g. change the wording and replace “Read More” with “Discover”) will be applied on every single CTA on the page. You’ll save some time and be 100% sure that your change will be visible every time.<br>

<div align="left"><figure><img src="/files/Y7joJm9ZsabqEAdMWHkD" alt="" width="311"><figcaption></figcaption></figure></div>

### **Editing elements** <a href="#h_01j53arzvx6rgfeqpadj5q560h" id="h_01j53arzvx6rgfeqpadj5q560h"></a>

Once you've selected the right element to edit, you can use the contextual menu and its different options to edit original content and/ or create new content.

### **Page structure** <a href="#id-01jnr3yw57shhvcq8p1x129dss" id="id-01jnr3yw57shhvcq8p1x129dss"></a>

The **page structure sidebar** allows you to select HTML elements based on the page hierarchy. You can expand the HTML body to get the list of all elements. You can click on any element in the page structure to display the context menu for that element.

<figure><img src="https://support.abtasty.com/hc/article_attachments/18870412258332" alt=""><figcaption></figcaption></figure>

You can also search for specific elements using the **search bar**. The result is grouped by type of element.

<div align="left"><img src="/files/MLUXriuINT3IJrUO94eE" alt="" width="238"></div>

For more information about how to create and edit content in the visual editor, please refer to this [specific article](/web-experimentation-and-personalization/editors-and-widget/visual-editor/how-to-create-and-edit-content-in-the-visual-editor).

## Using the WYSIWYG/Contextual Editor to add trackers <a href="#id-01j53mf9z8peparxt5w2n0kh1y" id="id-01j53mf9z8peparxt5w2n0kh1y"></a>

Once your modifications are done, it is important to add trackers in order to track how visitors respond to the changes you make on your website.

For example, if you change the color of a button, you’ll need to track the clicks on it.

To learn how to create trackers in the editor, please refer to this specific [article](/web-experimentation-and-personalization/editors-and-widget/visual-editor/how-to-create-trackers-in-the-editor).

## Adding campaign JavaScript <a href="#id-01j53ndxxr7rbrp16ze9nvmrdf" id="id-01j53ndxxr7rbrp16ze9nvmrdf"></a>

Adding campaign JavaScript is an alternative to create trackers that will be triggered on both original and variations of your campaing. It's useful if your trackers are more complex to set-up.

You can add campaign JavaScript by clicking on the right menu panel:

* If your campaign is an AB Test, a Simple Personalization or a Patch, the option is called Campaign JavaScript
* If your campaign is an Multipages Test, a Multipages Personalization, a Multiexperiences Personalization or a Multipages Patch, the option is called Sub-test JavaScript

In both cases, this code will be executed on all the variations of your campaign: the original one + all the variations. That's why the Campaign/ Sub-test javascript is mostly used to code trackers.

You can tick the option "*Wait for DOM Ready to execute JavaScript*". For more information about the way Javascript can be executed, please refer to the following [article](/account/technical-implementation/javascript-in-ab-tasty/campaign-javascript-execution).

<div align="left"><img src="/files/aKIBAzpIx1GMLxbBA9Jk" alt="" width="563"></div>

## Widget Library <a href="#h_01g90k480qnds6nhx4n5tkmpwf" id="h_01g90k480qnds6nhx4n5tkmpwf"></a>

Widgets are useful to add pre-coded elements and save your team time and expertise.

To discover our full widget library, learn how to use them, and customize them, please read the specific article bout [Widgets](/assets-library/widget-library/creating-and-managing-widgets). To add a widget in the editor, click on the right-hand bar and select Widgets. A library will open - click on the widget you want, then click on Add Widget. \\

<figure><img src="/files/q76xz1SHhyYkEF9DPnBO" alt="" width="563"><figcaption></figcaption></figure>

## Custom Widget Library <a href="#h_01g90k54h8m2k28vj2238tck7n" id="h_01g90k54h8m2k28vj2238tck7n"></a>

Custom widgets are similar to widgets in that they are pre-coded elements you can build and manage through the custom widgets Library. To discover how to build your own custom widgets and build your own library, please refer to this specific [article](https://support.abtasty.com/hc/en-us/articles/14738674669084)***.*** To add a custom widget in the editor, click on the right-hand bar and select "widgets". Then go to the "custom widgets" section. A library will open - click on the custom widget you want or create a new one then click on Add custom widget.

## Active Changes and Undo/Redo <a href="#h_01g90k5pkv8m3wyc1wkd5sakbb" id="h_01g90k5pkv8m3wyc1wkd5sakbb"></a>

By default, every single change is automatically saved. To let you control your changes, in the right-hand sidebar, you will find the “Undo” and “Redo” options.

<div align="left"><img src="/files/E1OtbuWt6D879iTyQKcb" alt="" width="98"></div>

When you click on ***Active Changes***, a new panel is displayed.

This panel lists all the changes that the current variation contains. It does not contain the Trackers that are listed in the "Trackers" panel and whose scope is “trans-variations” (those apply to the whole campaign).

* **Types & subtypes**\
  ![](/files/2tSs2EthOZf47zECmzvE)
* **Who & when**\
  ![](/files/tBNZ6uCm2ggo7bl5EqHQ)
* **Edit, change selector, rename, duplicate, hide/display or delete** - list can change depending the type of modification\
  ![](/files/lWY91qfTBawpQWY8S47Z)
* Batch actions (hide, unhide, delete, create a variation from selection)
* Create a variation from selection\
  ![](/files/Bcvtla7e4zVZJpJWef4w)
* “No additional information”

### **Changes are listed in anti-chronological order** <a href="#h_01j53pprgqxmacmy7790m537xq" id="h_01j53pprgqxmacmy7790m537xq"></a>

In order to be clear and consistent, the latest edited change will always be displayed at the top. All changes are listed in anti-chronological order in the panel.

Every time you edit, rename, duplicate or change the selector of a change, the order is updated and the last edited change is placed at the top. It does not reorder when you hide/display a change.

By default, when a variation contains no change, a default message is displayed to invite users to add changes, whether they are modifications, widgets, JavaScript or CSS code.

Changes prior to the release of this feature don't have last edit date and user information. Instead we display: “No additional Information.”

### **Change Types & Subtypes** <a href="#id-01j53pqf9fk5jd8frcv0s6z491" id="id-01j53pqf9fk5jd8frcv0s6z491"></a>

In order to better understand each change, even after having renamed every single one of them, it is important to keep track of the nature of a change.<br>

<div align="left"><figure><img src="/files/2tSs2EthOZf47zECmzvE" alt="" width="375"><figcaption></figcaption></figure></div>

For each change, you will see an icon, reflecting the type of each respective change:

* **M** for Modifications
* **W** for Widgets
* **JS** for JavaScript
* **CSS** for CSS

In some types, you can also have subtypes.

* **Modifications can be of the following subtypes:** Add HTML, Add Image, Add Link, Add Paragraph, Copy & Paste (after), Copy & Paste (before), Copy & Paste (at the end), Cut & Paste (after), Cut & Paste (before), Cut & Paste (at the end), Edit Element Attributes, Edit HTML, Edit Link, Edit on the Fly, Edit Style, Edit Text, Hide Content of the Element, Hide Element, Hide Same Class Elements, Reorder Elements, Replace Background Image, Replace Image, Replace Responsive Image
* **Widgets** have as many subtypes as there are widgets
* **There can be two types of JavaScript:** Variation JavaScript or Element JavaScript. We have a dedicated article that lists [How to add JavaScript code in AB Tasty](/account/technical-implementation/javascript-in-ab-tasty/javascript-files-execution).
* **CSS does not have subtypes:** it is only CSS and its scope is at the variation level.

When you hover over the icon, you will always see the type and subtype of this change. This comes in handy when you rename a change and the new name no longer contains the notion of type or subtype.

### **Who & When** <a href="#id-01g9cjm84zwxs5affjagnfg4sm" id="id-01g9cjm84zwxs5affjagnfg4sm"></a>

<div align="left"><img src="/files/tBNZ6uCm2ggo7bl5EqHQ" alt="" width="375"></div>

As changes are listed in anti-chronological order, we also display the date and time of the latest edition. We do not display the year but the year is taken into account when ordering the changes.

When hovering over the user icon, the email address of the user is displayed in a tooltip. This way, you can always know who the last person was to make a change.

### **Edit, Change Selector, Rename, Duplicate, Hide/Display or Delete** <a href="#id-01g9cjm84zbxzszhh71bvy5xme" id="id-01g9cjm84zbxzszhh71bvy5xme"></a>

Depending on its type or subtype, each change allows for different actions.

<div align="left"><img src="/files/lWY91qfTBawpQWY8S47Z" alt="" width="375"></div>

* “**Edit**” is the capacity to reopen the dedicated change modal so you can edit this change's parameters again.

For example, a modification such as “Add Text” can be edited again. The text you added can be edited (changed) by adding, removing words. On the other hand, a modification such as “Reorder Elements” cannot be edited. You will have to delete it and redo it if you want to edit it.

* “**Change selector**” is the capacity to modify the “scope” of the modification.

You can define if, for example, an “Edit Style” (such as padding increase or a decreased line-height) will be affected to a single \<div>, to the whole \<body> element, or any parent/child element in between.

* “**Rename**” lets users give a more detailed name to a change than the default name. It is very convenient if you have several changes of the same kind without any specific way to differentiate them.

The default name of a change is based on the subtype of the modification, the widget name, the type of JavaScript change (Variation JavaScript or Element JavaScript) or just “CSS”. If the new name is longer than 35 characters, it will be accepted but truncated with an ellipsis when displayed. Names longer than 300 characters will be rejected by the platform.

* “**Duplicate**” only works for widgets. Essentially, it duplicates a whole configured widget in the variation. By default, the duplicated widget has the same name and is appended with (duplicated) at the end.
* “**Delete**” is available for all types and subtypes of changes. When deleting a change, a confirmation prompt pops up in the Active Changes panel and awaits for a confirmation or a cancellation.
* “**Hide**/**Display**” only applies to the editor level. If a user hides or displays a change, it has no impact on production; it is only here to help you see an element hidden below another one or the space it may take when displayed.

|                             | Edit | Rename | Duplicate | Change selector | Delete |
| --------------------------- | ---- | ------ | --------- | --------------- | ------ |
| CSS                         | x    | x      |           |                 | x      |
| Element JavaScript          | x    | x      |           | x               | x      |
| Variation JavaScript        | x    | x      |           |                 | x      |
| Widget - $WidgetName        | x    | x      | x         |                 | x      |
| Add HTML                    | x    | x      |           | x               | x      |
| Add Image                   | x    | x      |           | x               | x      |
| Add Link                    | x    | x      |           | x               | x      |
| Add Text                    | x    | x      |           | x               | x      |
| Copy & Paste (after)        |      | x      |           |                 | x      |
| Copy & Paste (before)       |      | x      |           |                 | x      |
| Copy & Paste (at the end)   |      | x      |           |                 | x      |
| Cut & Paste (after)         |      | x      |           |                 | x      |
| Cut & Paste (before)        |      | x      |           |                 | x      |
| Cut & Paste (at the end)    |      | x      |           |                 | x      |
| Edit Element Attributes     | x    | x      |           | x               | x      |
| Edit HTML                   | x    | x      |           | x               | x      |
| Edit Link                   | x    | x      |           | x               | x      |
| Edit on the Fly             | x    | x      |           | x               | x      |
| Edit Style                  | x    | x      |           | x               | x      |
| Edit Text                   | x    | x      |           | x               | x      |
| Hide Content of the Element |      | x      |           | x               | x      |
| Hide Element                |      | x      |           | x               | x      |
| Hide Same Class Elements    |      | x      |           | x               | x      |
| Reorder Elements            |      | x      |           |                 | x      |
| Replace Background Image    | x    | x      |           | x               | x      |
| Replace Image               | x    | x      |           | x               | x      |
| Replace Responsive Image    | x    | x      |           | x               | x      |

### **Batch Actions: Hide/Display or Delete** <a href="#id-01g9cjm84zwfsh1fv9k034x4w8" id="id-01g9cjm84zwfsh1fv9k034x4w8"></a>

You can select one or more changes to hide/display or delete. Select the changes you want to make by checking the checkboxes when you hover over each change and hide/display them or delete them by clicking on the respective buttons.

If one or more changes cannot be deleted, they will be bordered in red for 3 seconds, and a notification will display informing you about the number of changes that were not deleted. If this happens, it can be related to a momentarily unavailable API route, as we invite you to try again later.

### **Error notification** <a href="#h_01j53pwv4256kffkpe03mvxr46" id="h_01j53pwv4256kffkpe03mvxr46"></a>

If you have created a modification on a selector that no longer exists, or is no longer present on the page displayed in the editor, we display a hovering warning message to inform you that your changes probably won’t work in production.

<br>

<div align="left"><figure><img src="/files/57l6Yc59GZlvwuMF6Is8" alt="" width="375"><figcaption></figcaption></figure></div>

### **Create a variation from a selection** <a href="#id-01j53pyyfz1e7feey5fw36q94y" id="id-01j53pyyfz1e7feey5fw36q94y"></a>

You have the capacity to create a new variation from a selection of changes.

<div align="left"><img src="/files/Bcvtla7e4zVZJpJWef4w" alt="" width="375"></div>

Select the changes you would like to see in the duplicated variation and click on the “Create Variation from Selection” button on the bottom bar.

The variation is created. The changes are injected in the variation, and you are redirected to the variation.

This feature is not available for campaigns with dynamic allocation that have been put in “play” mode at least once, nor is it available for personalization campaigns.

## Add to targeting option <a href="#id-01j53nemz3tjje6mnfs2csyfdv" id="id-01j53nemz3tjje6mnfs2csyfdv"></a>

You can now choose a specific element within the WYSIWYG/contextual editor, and directly use it in the targeting step of the campaign setup. This way, your campaign will be triggered only if the element exists on the page. It can be useful for page targeting if you URLs don't follow a specific and recognizable pattern. To learn more about this option in the targeting, please refer to the following [article](/web-experimentation-and-personalization/targeting-step/how-to-set-up-a-campaign-targeting).

### **Add to targeting option set-up in the editor** <a href="#h_01j53p3reh6s1vdggef3z20d2j" id="h_01j53p3reh6s1vdggef3z20d2j"></a>

To use this option, select the page element to be set as the “where” condition and click the **Add to targeting** option to send your element’s URL and CSS selector to the **Where** section of the **Targeting** step.

<img src="/files/ESEVbmYcTsfDKM68snft" alt="" width="240">

As soon as you click the **Add to targeting** option, the element configuration will automatically be sent and saved in the **Targeting** step.

A window will appear, allowing you to do one of the following:

* Continue editing your variation(s).\
  You will then still be able to review your targeting configuration later on, in the **Targeting** step.
* Go to the **Targeting** step page and start reviewing it.

![](/files/Ixl9FaMcwXHCjJhr2dFa)\ <br>

{% hint style="info" %}
Depending on the type of campaign you are setting up (test or personalization campaign), the **Editor** step will come before or after the **Targeting** step.\
When configuring a personalization campaign, you start with the **Targeting** step to define precisely the audience you would like to target. In this case, if you configure the "**Where**"section first and then use the **Add to targeting** option in the editor, you will erase your previous configuration and replace it with the newly created one. A window will appear asking you to do so. If you accept, you will need to go back to the **Targeting** step to review the new configuration.
{% endhint %}

### **Add to targeting option set-up in the targeting step** <a href="#id-01j53p47dvmb76sjgqqbamh33g" id="id-01j53p47dvmb76sjgqqbamh33g"></a>

As you are in the **Targeting** step, you will be able to retrieve the information you have sent and saved from the editor through the **Add to targeting** option. The **Where** section is unfolded to let you review these two newly added configuration elements (URL and CSS selector).

<div align="left"><img src="/files/Tjw6beuBfiCCYyIXw8PI" alt="" width="563"></div>

## Switching to the Code Editor <a href="#h_01g90k6qn5qsbdcaqz1vnkn1gy" id="h_01g90k6qn5qsbdcaqz1vnkn1gy"></a>

By clicking on the "Switch to Code Editor" button in the top bar, you’ll open a new tab and land in the Code Editor. To learn more about how to use the Code Editor, please refer to the [Code Editor](https://support.abtasty.com/hc/en-us/articles/6397960464028)[ article](/web-experimentation-and-personalization/editors-and-widget/code-editor).<br>

<div align="left"><figure><img src="/files/4acaESnVlSwrQLWW1TBM" alt="" width="422"><figcaption></figcaption></figure></div>

## Refresh Tag Option <a href="#id-01gqmnt769p8t90sar31jsk1qa" id="id-01gqmnt769p8t90sar31jsk1qa"></a>

Refer to this [*article*](/account/tag-integration/ab-tasty-tag-compilation#h_01hw38hykyyt6h8n85r7fbcvg6) to learn more about the different tag statuses.

* **If your campaign is already live (without QA mode active):**

Clicking on “Refresh Tag” will republish your changes (without any verification beforehand), so use it with caution, only when you discover that a campaign is buggy (e.g. a spelling error in a pop-in, etc.)

* **If your campaign is live “in QA”**

Clicking on “Refresh Tag” will republish your changes, but as your campaign is on QA, it’s completely safe and you can fine tune your campaign in real time.

* **If you campaign is paused**

Clicking on “Refresh Tag” won’t have any consequences for the current campaign. But refreshing the tag will impact all the other live campaigns, so be cautious with this option.

### Troubleshooting area <a href="#h_01hndea817pjn87j1dn0m63w4r" id="h_01hndea817pjn87j1dn0m63w4r"></a>

In case you need support, follow the instructions given in the articles below:

💡 [Why is the editor not loading and how can I force it to open?](/help-center/troubleshooting/troubleshooting-why-is-the-editor-not-loading-and-how-can-i-force-it-to-open)💡 [Avoiding SEO mistakes in a redirection test](/help-center/troubleshooting/troubleshooting-avoiding-seo-mistakes-in-a-redirection-test)


# How to create and edit content in the visual editor

Learn to use the WYSIWYG/Contextual Editor for real-time webpage edits without coding skills. It simplifies A/B testing, personalizations, and UI modifications.

The WYSIWYG/Contextual Editor (What You See Is What You Get) enables you to play with your webpage and make changes on the fly by clicking on the different elements.

The contextual editor enables you to virtually write new lines of code, especially CSS (to modify UI parameters such as the margins, colors, etc.) without any coding knowledge, just by clicking on elements and selecting the modification you want to apply from a list.

For a complete discovery about the visual editor, please refer to this [article](/web-experimentation-and-personalization/editors-and-widget/visual-editor---discovery).

To use the visual editor, you need:

* to be on the campaign flow of an AB Test, a Personalization or a patch
* to have pasted a sample URL in the step 1 of the flow *Main Information*
* to click on the element you want to edit/ remove etc. to make the contextual editor appear:

<img src="/files/Z5UVNRmdssm6b2Hd7VVR" alt="" width="242">

The element appears as a title of the block (in this example, “h1”), so every change you make here will affect the title you selected.

In this specific article, we are going to review all the possible modifications you can perform with the visual editor.

## **Editing elements** <a href="#h_01j53arzvx6rgfeqpadj5q560h" id="h_01j53arzvx6rgfeqpadj5q560h"></a>

In the Edit section, you can edit the following:

<div align="left"><figure><img src="/files/EJB20kmd7VOEm75EVl1Y" alt="" width="216"><figcaption></figcaption></figure></div>

* Style: all the CSS attributes (colors, borders, z-index, margins etc.)
* Text
* HTML: direct modification in the HTML can be dangerous. See more details in the following [section](/web-experimentation-and-personalization/editors-and-widget/visual-editor/discovering-the-visual-editor)).
* Element attributes

Depending on the element you’ve selected, some options may not be available in the list. For example, *Edit Text* won’t appear if you have selected an image - tag \<img> - and *Edit Link* won’t be available if the selected element is not a \<a> tag. Each tag will trigger only those editing options compatible with its type.

### Edit Style <a href="#id-01g9cjm84y0z8686h5v39qr85a" id="id-01g9cjm84y0z8686h5v39qr85a"></a>

The configuration pop-in offers you the option to edit the style the **text**, **color**, **border**, **layout**, and **position** of your selected element.

<img src="/files/ISIynAVP8knmM2rhcmWb" alt="" width="563">

**⭐️ Tip 1:** Pay attention to the element you’re working on. Sometimes you have selected an element whose CSS configuration has inherited a higher parent in the code. To make your changes visible, you must select the correct element at the beginning, and use the select parent or children element option.

**⭐️ Tip 2:** If you want to change the overall look of an element (background color, font color and size, border style and color, etc.), do it all at once before clicking on Save Changes to embed all the modifications relative to the button in one single line of modification.

Click on **Active Changes** in the right-hand panel to retrieve all your modifications and access your history.

All customizable options in the Edit Style pop-in are in English, even if your language choice in the platform is not. We’ve kept the **CSS English vocabulary** to optimize the understanding of each parameter.

While editing, **click on save,** and your modifications will be directly visible in the editor.

> For more information about CSS parameters and how they work regarding each type of tag, please refer to a CSS guide such as <https://web.dev/learn/css/>.

### Edit text <a href="#id-01g9cjm84yry6ebq183m1b9qt1" id="id-01g9cjm84yry6ebq183m1b9qt1"></a>

The original text will appear in a modal. You can directly edit it and make standard CSS changes in this modal, too.

When you finish editing, click on save, and your modifications will be visible in the editor.<br>

<figure><img src="/files/mBZOnGNqZ9IPTeuAK1C4" alt="" width="563"><figcaption></figcaption></figure>

### Edit HTML <a href="#id-01g9cjm84yj20d6rmj94f1zw96" id="id-01g9cjm84yj20d6rmj94f1zw96"></a>

The Edit HTML option in the editor enables you to edit the HTML of a selected element on your page in a code console.

When selecting the element you want to edit, you can refine your selection by using the Select Parent or Select Child options.

<img src="/files/i2MAP0VoVugAinRSxmws" alt="" width="563">

In the code console, the HTML content for the selected element is displayed.

**You can modify it as desired: Add, remove or edit HTML content.**

{% hint style="warning" %}
Your web page may be based on an HTML template that loads **dynamic information**. Using this option will replace the former HTML with the one you have edited for each page that matches both the targeting and the selector for your modification.
{% endhint %}

For example, if you edit the product information (title, size, color, etc.) of a product page, the edited HTML will be replaced ***for every product page that has the same targeting and selector***.

As a result, many different products will have the same title, size, and color (depending on what you edited) when they shouldn’t.

Moreover, JavaScript events that may have been added to the element(s) you edited for your product may have disappeared, as the element(s) they were attached to have been modified, replaced by the new HTML content.

We recommend using the Edit HTML option in the following cases:

* For static pages such as homepages, or static parts of your website such as the navigation or the footer.
* For the smallest HTML parts, as you can avoid side effects (such as overwriting templates or deleting JavaScript events) and any negative impacts on the tag weight.
* For campaigns that target a small part of your traffic, such as one language or one device, to avoid showing your visitors content that isn’t adapted to them.

There are less sensitive options, which can be used in the following use cases:

* **To add new HTML to your page**\
  👉 Use the Add Image, Add Text or Add HTML options in the Visual Editor.
* **To remove existing HTML from your page**\
  👉 Use the Hide Element, Hide the content of the element options in the Visual Editor.
* **To edit existing HTML on your page**\
  👉 Use the Edit Style, Edit Text, Edit Link, Edit Attributes, Replace Image options in the Visual Editor.

In terms of performance, it is preferable to make edits through other options rather than solely relying on the Edit HTML option to make edits (regarding tag weight and your website's rendering) to protect your website’s functionalities and guarantee templates with correct content.

{% hint style="info" %}
Don’t forget to QA your campaign for several pages of your website on different devices and browsers (especially if your campaign should be displayed across devices), and in different environments (e.g. logged in/not logged in) to make sure you have covered all possible scenarios.
{% endhint %}

### Edit Element Attributes <a href="#id-01g9cjm84y86dxanf4htc6vn7k" id="id-01g9cjm84y86dxanf4htc6vn7k"></a>

This option will enable you to modify element attributes (detected in the HTML code), delete some attributes (by clicking on the cross), or add new ones.

To learn more about attributes, please refer to a CSS guide such as <https://web.dev/learn/css/>

While editing, click on Save Changes, then your modifications will be visible in the editor.

<img src="/files/CS51wOuqo3VR34fI8x7o" alt="" width="375">

## Adding elements <a href="#id-01g9cjm84y7mahcwyqsqkhawwb" id="id-01g9cjm84y7mahcwyqsqkhawwb"></a>

The Add option will enable you to enrich your HTML by adding an element that didn’t exist on the original page.

In the Add section, you can add the following:

<div align="left"><img src="/files/iOZGXMyjsf8HZ4khZLMn" alt="" width="212"></div>

* an image
* a block of text
* some HTML
* a link

### **Add an image** <a href="#id-01g9cjm84yqwkfjp0t3kswssmj" id="id-01g9cjm84yqwkfjp0t3kswssmj"></a>

You can add an image by uploading your file directly from your [asset library](https://support.abtasty.com/hc/en-us/articles/13154205646876). We support .jpg, .png, .svg, .webp and .avif files.

<div align="left"><img src="/files/WmrhHmtsGCG7n2bKnKjv" alt="" width="364"></div>

<div align="left"><img src="/files/RcZzBwtQ5vA25hj7qPyL" alt="" width="524"></div>

You can either:

* select an asset from you library
* upload a new item to your library, by URL or by droping your image directly in the area from your computer.<br>

  <div align="left"><figure><img src="/files/RqpN8nUW8WsPnvU2PEGP" alt="" width="375"><figcaption></figcaption></figure></div>

### **Add a Text Element** <a href="#id-01g9cjm84yrxn497y0zne2j337" id="id-01g9cjm84yrxn497y0zne2j337"></a>

You can add a text element by filling it directly in the following pop-in.

While editing, click on Save Changes, then your modifications will be visible in the editor.

<div align="left"><img src="/files/Kli2UHHrkXRBcqgMHRVQ" alt="" width="563"></div>

### **Add HTML** <a href="#id-01g9cjm84ymvnjncf903bwafnp" id="id-01g9cjm84ymvnjncf903bwafnp"></a>

You can add an HTML snippet directly in the following pop-in. AB Tasty creates a parent tag with its own parameter “ID” to help you. This is a good way to add a pre-coded element to your page. You can also declare the selector in which the new tag will be embedded.

While editing, click on Save, then your modifications will be visible in the editor.

<div align="left"><img src="/files/y3TcKEsMqjmMed1MsSvP" alt="" width="563"></div>

### **Add a link** <a href="#id-01g9cjm84y4y5c5q0t7ybfgq6k" id="id-01g9cjm84y4y5c5q0t7ybfgq6k"></a>

You can add a link directly to one element you want to make clickable. Enter the URL in the field and activate the *Open a New Tab* option if desired.

While editing, click on Save Changes.

<div align="left"><figure><img src="/files/MELIFnm2XypkeMsWgxPH" alt="" width="375"><figcaption></figcaption></figure></div>

## Adding Variation Code <a href="#id-01g9cjm84yferga8q6pc6xfbyr" id="id-01g9cjm84yferga8q6pc6xfbyr"></a>

This option lets you customize the CSS and/or the JS you want to execute in your variation/page/experience. This is an alternative to WYSIWYG modifications, particularly for more advanced campaigns.

It can be useful to refine a change you’ve made with the WYSIWYG editor, or help you to more deeply customize the widgets.\
![](/files/agOJKiLPRKKD5McgDR1J)

To help you to use the JS code console, you can access this Code Modal shortcuts [*list*](https://codemirror.net/5/doc/manual.html#commands)*.*

For more information about different types of JavaScript files, please refer to the following [article](/account/technical-implementation/javascript-in-ab-tasty/javascript-files-execution).

## Hiding elements <a href="#id-01g9cjm84ykzv5gj5hvmw9rmy6" id="id-01g9cjm84ykzv5gj5hvmw9rmy6"></a>

There are three sub-options in the Hide option:

<div align="left"><img src="/files/EbKYTmg76wvRb4NCmsVC" alt="" width="215"></div>

* **Hide the element**

This hides the whole element (content + element), meaning that the element that follows in the HTML will automatically replace the hidden element(s) (for example, a tab in a navigation bar, an item in a list, etc.)

* **Hide the content of the element**

This only hides the content of the element, leaving an empty space instead of replacing it with the element that follows.

* **Hide same class elements**

This option is useful if you want to hide a specific element that appears on the page several times.

## Reorder elements <a href="#id-01g9cjm84yy4ss4kvdv8zx2nj3" id="id-01g9cjm84yy4ss4kvdv8zx2nj3"></a>

This option lets you play with a drag and drop functionality to reorder elements that share the same CSS parameters and are all embedded in a master parent element.

For example, reordering items in a list or tabs in a navigation bar.

<div align="left"><img src="/files/mSCA3GKfLwFc226HzZVr" alt="" width="192"></div>

Select one element of a list, click on Reorder elements: a small popin appears (you can move it on the page). Drag your element at its new placement in the list, click on Validate, then your modifications will be visible in the editor. Otherwise click Cancel to go back without saving.

## Copy, Cut and Paste <a href="#id-01g9cjm84yjzjjd1nr3v2zxvfm" id="id-01g9cjm84yjzjjd1nr3v2zxvfm"></a>

To use this option, first you need to cut or copy an element to add it to your clipboard.

You can paste it where you want, so select the element before or after which you wish to paste the clipboard element. You need to select if you want to paste the element before, at the end, or after the place where you want to paste it.

<div align="left"><img src="/files/p9ExaQTzvHjWmKhEosL3" alt="" width="213"></div>


# Visual editor: History and review of modifications

By default, every single change is automatically saved. To let you control your changes, in the right-hand sidebar, you will find the “Undo” and “Redo” options.

<div align="left"><img src="/files/IVI4cPKZb1wvX1nViFGM" alt="" width="96"></div>

When you click on ***Active Changes***, a new panel is displayed.

This panel lists all the changes that the current variation contains. It does not contain the Trackers that are listed in the "Trackers" panel and whose scope is “trans-variations” (those apply to the whole campaign).<br>

<div align="left"><figure><img src="/files/Pn12e7gpIwcykDMOf6Z3" alt="" width="302"><figcaption></figcaption></figure></div>

* Anti-chronological order
* Types & subtypes
* Who & when
* Edit, change selector, rename, duplicate, hide/display or delete
* Batch actions
* Create a variation from selection
* “No additional information”

**Changes are listed in anti-chronological order**

In order to be clear and consistent, the latest edited change will always be displayed at the top. All changes are listed in anti-chronological order in the panel.

Every time you edit, rename, duplicate or change the selector of a change, the order is updated, and the last edited change is placed at the top. It does not reorder when you hide/display a change.

By default, when a variation contains no change, a default message is displayed to invite users to add changes, whether they are modifications, widgets, JavaScript or CSS code.

Changes prior to the release of this feature don't have last edit date and user information. Instead we display: “No additional Information.”

## Change Types & Subtypes <a href="#h_01j2byfkzhgahhzz5btpt0kdx1" id="h_01j2byfkzhgahhzz5btpt0kdx1"></a>

In order to better understand each change, even after having renamed every single one of them, it is important to keep track of the nature of a change.

For each change, you will see an icon, reflecting the type of each respective change:

* M for Modifications
* W for Widgets
* JS for JavaScript
* CSS for CSS

In some types, you can also have subtypes.

* Modifications can be of the following subtypes: Add HTML, Add Image, Add Link, Add Paragraph, Copy & Paste (after), Copy & Paste (before), Copy & Paste (at the end), Cut & Paste (after), Cut & Paste (before), Cut & Paste (at the end), Edit Element Attributes, Edit HTML, Edit Link, Edit on the Fly, Edit Style, Edit Text, Hide Content of the Element, Hide Element, Hide Same Class Elements, Reorder Elements, Replace Background Image, Replace Image, Replace Responsive Image
* Widgets have as many subtypes as there are widgets
* There can be two types of JavaScript: Variation JavaScript or Element JavaScript. We have a dedicated article that lists [the different ways to add JavaScript code in AB Tasty](/account/technical-implementation/javascript-in-ab-tasty/javascript-files-execution).
* CSS does not have subtypes. It is only CSS and its scope is at the variation level.

When you hover over the icon, you will always see the type and subtype of this change. This comes in handy when you rename a change and the new name no longer contains the notion of type or subtype.

## Who & When <a href="#id-01g9cjm84zwxs5affjagnfg4sm" id="id-01g9cjm84zwxs5affjagnfg4sm"></a>

As changes are listed in anti-chronological order, we also display the date and time of the latest edition. We do not display the year but the year is taken into account when ordering the changes.

When hovering over the user icon, the email address of the user is displayed in a tooltip. This way, you can always know who the last person was to make a change.

## Edit, Change Selector, Rename, Duplicate, Hide/Display or Delete <a href="#id-01g9cjm84zbxzszhh71bvy5xme" id="id-01g9cjm84zbxzszhh71bvy5xme"></a>

Depending on its type or subtype, each change allows for different actions.

“**Edit**” is the capacity to reopen the dedicated change modal so you can edit this change's parameters again.

For example, a modification such as “Add Text” can be edited again. The text you added can be edited (changed) by adding, removing words. On the other hand, a modification such as “Reorder Elements” cannot be edited. You will have to delete it and redo it if you want to edit it.

“**Change selector**” is the capacity to modify the “scope” of the modification.

You can define if, for example, an “Edit Style” (such as padding increase or a decreased line-height) will be affected to a single \<div>, to the whole \<body> element, or any parent/child element in between.

“**Rename**” lets users give a more detailed name to a change than the default name. It is very convenient if you have several changes of the same kind without any specific way to differentiate them.

The default name of a change is based on the subtype of the modification, the widget name, the type of JavaScript change (Variation JavaScript or Element JavaScript) or just “CSS”. If the new name is longer than 35 characters, it will be accepted but truncated with an ellipsis when displayed. Names longer than 300 characters will be rejected by the platform.

“**Duplicate**” only works for widgets. Essentially, it duplicates a whole configured widget in the variation. By default, the duplicated widget has the same name and is appended with (duplicated) at the end.

“**Delete**” is available for all types and subtypes of changes. When deleting a change, a confirmation prompt pops up in the Active Changes panel and awaits for a confirmation or a cancellation.

“**Hide**/**Display**” only applies to the editor level. If a user hides or displays a change, it has no impact on production; it is only here to help you see an element hidden below another one or the space it may take when displayed.

|                             | Edit | Rename | Duplicate | Change selector | Delete |
| --------------------------- | ---- | ------ | --------- | --------------- | ------ |
| CSS                         | x    | x      |           |                 | x      |
| Element JavaScript          | x    | x      |           | x               | x      |
| Variation JavaScript        | x    | x      |           |                 | x      |
| Widget - $WidgetName        | x    | x      | x         |                 | x      |
| Add HTML                    | x    | x      |           | x               | x      |
| Add Image                   | x    | x      |           | x               | x      |
| Add Link                    | x    | x      |           | x               | x      |
| Add Text                    | x    | x      |           | x               | x      |
| Copy & Paste (after)        |      | x      |           |                 | x      |
| Copy & Paste (before)       |      | x      |           |                 | x      |
| Copy & Paste (at the end)   |      | x      |           |                 | x      |
| Cut & Paste (after)         |      | x      |           |                 | x      |
| Cut & Paste (before)        |      | x      |           |                 | x      |
| Cut & Paste (at the end)    |      | x      |           |                 | x      |
| Edit Element Attributes     | x    | x      |           | x               | x      |
| Edit HTML                   | x    | x      |           | x               | x      |
| Edit Link                   | x    | x      |           | x               | x      |
| Edit on the Fly             | x    | x      |           | x               | x      |
| Edit Style                  | x    | x      |           | x               | x      |
| Edit Text                   | x    | x      |           | x               | x      |
| Hide Content of the Element |      | x      |           | x               | x      |
| Hide Element                |      | x      |           | x               | x      |
| Hide Same Class Elements    |      | x      |           | x               | x      |
| Reorder Elements            |      | x      |           |                 | x      |
| Replace Background Image    | x    | x      |           | x               | x      |
| Replace Image               | x    | x      |           | x               | x      |
| Replace Responsive Image    | x    | x      |           | x               | x      |

## Batch Actions: Hide/Display or Delete <a href="#id-01g9cjm84zwfsh1fv9k034x4w8" id="id-01g9cjm84zwfsh1fv9k034x4w8"></a>

You can select one or more changes to hide/display or delete. Select the changes you want to make by checking the checkboxes when you hover over each change and hide/display them or delete them by clicking on the respective buttons.

If one or more changes cannot be deleted, they will be bordered in red for 3 seconds, and a notification will display informing you about the number of changes that were not deleted. If this happens, it can be related to a momentarily unavailable API route, as we invite you to try again later.

## Error notification <a href="#id-01g9cjm84z1xbhg63h99wteweg" id="id-01g9cjm84z1xbhg63h99wteweg"></a>

If you alter a nonexistent or removed selector, a warning alerts you that your changes might not work in production. Hover the warning icon to see more details.

<figure><img src="/files/HhrXoaoFaXJ7DLL7gRgT" alt="" width="375"><figcaption></figcaption></figure>

## Create a variation from a selection <a href="#h_01j2bygfwgqk4cdt50gebhrfbq" id="h_01j2bygfwgqk4cdt50gebhrfbq"></a>

One of the most interesting features of this panel is the capacity to create a new variation from a selection of changes.

It is very easy. Select the changes you would like to see in the duplicated variation and click on the “Create Variation from Selection” button on the bottom bar.

The variation is created. The changes are injected into the variation, and you are redirected to the variation.

This feature is not available for campaigns with dynamic allocation that have been put in “play” mode at least once, nor is it available for personalization campaigns.


# Using Evi Content

## Introduction <a href="#h_01jskk335qpdbjpw0h5k30svt4" id="h_01jskk335qpdbjpw0h5k30svt4"></a>

Evi Content is an AI-powered tool designed to simplify the process of creating and modifying website experiences using natural language prompts. Evi is primarily designed for users who wish to modify their campaigns but are not familiar with editing code, or wish to improve their text content. This tutorial will guide you through the steps of using this feature effectively.

## Prerequisites <a href="#h_01jskk335qae9d0hqe7qyt5w3e" id="h_01jskk335qae9d0hqe7qyt5w3e"></a>

* Access to an AB Tasty account with the Evi Content feature enabled
* A campaign created in AB Tasty (Test or Personalization)
* Basic understanding of AB Tasty's Visual Editor

## Step 1: Access Evi Content <a href="#h_01jskk335qa1s7d0enc2akjthw" id="h_01jskk335qa1s7d0enc2akjthw"></a>

1. Open your AB Tasty campaign in the Visual Editor.
2. Select the element you want to modify on your website.
3. Click on **Make a change** in the context menu.<br>

   <div align="left" data-with-frame="true"><figure><img src="/files/xWBzYxsU8lkUjqBEAPpi" alt="" width="120"><figcaption></figcaption></figure></div>

## Step 2: Enter your prompt <a href="#h_01jskk335q47tzek19v0thcc34" id="h_01jskk335q47tzek19v0thcc34"></a>

**Tips for effective use**\
\- Be as specific as possible in your prompts to get the most accurate results.\
\- Start with simple changes and gradually move to more complex modifications as you become familiar with the tool.\
\- Remember that you can always refine your request if the initial result isn't perfect.\
\- Use Evi for creative ideas\
\- it can suggest wording for CTAs or generate multiple design options.\
\
For prompt examples, please refer to the article: [Prompt Inspiration library for Visual Editor Copilot](/web-experimentation-and-personalization/editors-and-widget/visual-editor/using-the-editor-copilot/prompt-inspiration-library-for-visual-editor-copilot)

1. When the Evi interface opens, you'll see an input field asking what you want to do with the selected element.
2. Enter your desired changes using natural language. For example:
   * "Move this menu 3 pixels to the left."
   * "Change the button color to blue and increase its size by 20%."
   * "Change the text color to blue."
3. Click **Go** to validate your request.

<div align="left" data-with-frame="true"><img src="/files/Q4AHijTN86aqD8a7VKAt" alt="" width="303"></div>

## Step 3: Review the changes <a href="#h_01jskk335q1szj75vvx6k29d60" id="h_01jskk335q1szj75vvx6k29d60"></a>

1. The Copilot process your request and generate the necessary modifications. The changes are applied on your selected element to preview them in the Visual Editor and related code is generated.

   <div align="left" data-with-frame="true"><figure><img src="/files/hYe9FBa9E6JfuJSWTc6x" alt="" width="563"><figcaption></figcaption></figure></div>
2. Review the modifications to ensure they match your expectations:
   * If the changes aren't exactly what you wanted, either click on:
     * **Not exactly what I had in Mind,** to refine the request (see Step 4).
     * **Leave Module** to modify your page manually.

## Step 4: Refine the request <a href="#h_01jskk335qxxt88fgwpc9agdhn" id="h_01jskk335qxxt88fgwpc9agdhn"></a>

<div align="left" data-with-frame="true"><img src="/files/TZ8KR7ttCOkIXyKDnhih" alt="" width="563"></div>

If the changes aren't exactly what you wanted, you can refine your request:

1. **Not exactly what I had in Mind,** to refine the request
2. Provide more specific instructions or clarify your initial prompt.

## Step 5: Accept the changes

When you're satisfied with the changes:

1. Click **I like this, validate modification**.
   * A confirmation message appears, and the modifications are added to your campaign variation.
2. Close the Copilot.

## Step 6: Further customization (optional) <a href="#h_01jskk335qty5jn6zqqbg3s1tp" id="h_01jskk335qty5jn6zqqbg3s1tp"></a>

After accepting Evi Content's changes, you can still make manual adjustments using the standard editing options.

<div align="left" data-with-frame="true"><img src="/files/D5JhZJ1A6Gtqu8drxBXJ" alt="" width="231"></div>

For more advanced customization, access the Code Section to directly edit the CSS or JavaScript. Click on **Active Changes** and hover on the change you want to edit, Click on **Menu** and **Edit**:

<div align="left" data-with-frame="true"><figure><img src="/files/DLjHPx2F3BymJBw6RlZE" alt="" width="216"><figcaption></figcaption></figure></div>

## Troubleshooting

### Context limit reached when selecting large areas

#### **Problem**

When you select a large section of your webpage (such as an entire page section, header, or complex container), Evi Content may fail to process your request or return an error indicating that the context limit has been reached.

**Why this happens:** Evi Content analyzes all elements within your selection to understand the structure and apply modifications. When too many elements are included, the amount of information exceeds Evi Content's processing capacity.

#### **Solution**

1. **Refine your selection** - Click on a more specific element within the area you want to modify, rather than selecting the entire container.
2. **Target individual elements** - Instead of selecting a full section, select the specific button, text block, or image you want to change.
3. **Work incrementally** - If you need to modify multiple elements in a large area, make changes one element at a time.

**Example of how to do selection :** Instead of selecting the entire header section, Select the specific navigation menu, logo, or CTA button you want to modify


# Prompt Inspiration library for Evi Content

To learn more about the Evi Content, refer to the article [Using the Evi Content](/web-experimentation-and-personalization/editors-and-widget/visual-editor/using-the-editor-copilot)

## User Engagement  <a href="#h_01jfjhdwpbkdvyfky4mgaev71j" id="h_01jfjhdwpbkdvyfky4mgaev71j"></a>

### Increase time spent on site <a href="#h_01jfjhe02eepewqzpfwb0vecxk" id="h_01jfjhe02eepewqzpfwb0vecxk"></a>

| **Animated Hero Section Headline**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>As a landing page, I want the main headline in the hero section to grab attention when the page loads.</p><ul><li><strong>Effect:</strong> The headline should fade in over 1 second, starting from 0% opacity to 100%.</li><li><strong>Timing:</strong> The animation should begin 500 milliseconds after the page is fully loaded.</li><li><strong>Style:</strong> Add a slight slide-up motion (10 pixels upward) to make the animation more dynamic.</li><li><strong>Behavior:</strong> No animation replay if the user scrolls back to the top.</li></ul> |

| **Progressive Image Reveal in Article Cards**                                                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my blog homepage, I want the featured images in article cards to appear progressively as users scroll.</p><ul><li><strong>Effect:</strong> Apply a fade-in effect combined with a zoom from 95% to 100%.</li><li><strong>Trigger:</strong> The animation should start when at least 50% of the image is visible in the viewport.</li><li><strong>Performance:</strong> Use CSS-only animations to avoid JavaScript performance issues.</li></ul> |

### Boost interaction with key elements <a href="#h_01jfjhpgrp247qbgy3k8jt8p56" id="h_01jfjhpgrp247qbgy3k8jt8p56"></a>

| **Hover Glow Effect on "Read More" Links**                                                                                                                                                                                                                                                                                                                                                                          |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my articles page, I want the "Read More" links to have a subtle glow effect when hovered over.</p><ul><li><strong>Effect:</strong> Create a soft outer glow around the text using a light blue color (#4A90E2).</li><li><strong>Duration:</strong> Smooth transition over 0.3 seconds.</li><li><strong>Behavior:</strong> The glow should disappear immediately when the user moves the mouse away.</li></ul> |

| **Animated Scroll-to-Top Button**                                                                                                                                                                                                                                                                                                                                                                                                                           |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my blog, I want a scroll-to-top button to animate when the user reaches the bottom of the page.</p><ul><li><strong>Effect:</strong> The button should slide in from the right and pulse three times to attract attention.</li><li><strong>Trigger:</strong> Animation starts when the user scrolls past 80% of the page height.</li><li><strong>Behavior:</strong> The button should smoothly scroll the page back to the top when clicked.</li></ul> |

### Make visuals more engaging <a href="#h_01jfjhtjk1fjjyzb8ccsas2187" id="h_01jfjhtjk1fjjyzb8ccsas2187"></a>

| **Add a Parallax Background Effect**                                                                                                                                                                                                                                                                                                                                                                                                         |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want the background image of the hero section to have a parallax scrolling effect.</p><ul><li><strong>Effect:</strong> The background should move at half the speed of the foreground content when scrolling.</li><li><strong>Style:</strong> Add a slight blur to the background to increase the focus on the text.</li><li><strong>Performance:</strong> Ensure the effect does not impact page load speed.</li></ul> |

| **Highlight Section Headings on Scroll**                                                                                                                                                                                                                                                                                                                                                                    |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my long-form article, I want each section heading to animate when it scrolls into view.</p><ul><li><strong>Effect:</strong> The heading should slide in from the left with a fade-in effect.</li><li><strong>Trigger:</strong> Animation should start when the heading is 25% visible in the viewport.</li><li><strong>Duration:</strong> The animation should complete within 0.5 seconds.</li></ul> |

## Conversion Optimization <a href="#h_01jfjhtvxjagefctj9wtbv3nah" id="h_01jfjhtvxjagefctj9wtbv3nah"></a>

### Optimize conversion funnels <a href="#h_01jfjhv5hk3y74n4z63pmtrm3b" id="h_01jfjhv5hk3y74n4z63pmtrm3b"></a>

| **Active Form Field Highlighting**                                                                                                                                                                                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want the active input fields to visually stand out.</p><ul><li><strong>Effect:</strong> Change the border color of the active field to green (#28A745) and add a subtle box shadow.</li><li><strong>Behavior:</strong> The highlight should disappear immediately when the user clicks outside the field.</li><li><strong>Style:</strong> Keep the animation subtle to avoid distracting the user.</li></ul> |

| **Step Highlight in Progress Bar**                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my multi-step registration form, I want the current step to be visually highlighted in the progress bar.</p><ul><li><strong>Effect:</strong> Change the current step's background color to blue (#007BFF) with a slight pulse animation.</li><li><strong>Behavior:</strong> Automatically advance the highlight as users complete steps.</li><li><strong>Style:</strong> Add labels to show the percentage of completion (e.g., "Step 2 of 5 - 40% Complete").</li></ul> |

### Increase click-through rates (CTR) on CTAs <a href="#h_01jfjhvmbvxahx85x76nknn52p" id="h_01jfjhvmbvxahx85x76nknn52p"></a>

| **Animated CTA Button Hover Effect**                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my pricing page, I want the "Get Started" button to animate when hovered over.</p><ul><li><strong>Effect:</strong> The button background should gradually shift from light green (#28A745) to darker green (#1C7D31).</li><li><strong>Duration:</strong> Transition over 0.4 seconds.</li><li><strong>Behavior:</strong> The button should return to its original color instantly when the user moves the mouse away.</li></ul> |

| **Pulsing "Add to Cart" Button**                                                                                                                                                                                                                                     |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my product page, I want the "Add to Cart" button to pulse periodically.</p><ul><li><strong>Effect:</strong> Scale the button to 1.05x its size and back over 1 second.</li><li><strong>Timing:</strong> The animation should repeat every 3 seconds.</li></ul> |

### Reduce cart abandonment <a href="#h_01jfjhwtefmp2q76rtdbg3jeb6" id="h_01jfjhwtefmp2q76rtdbg3jeb6"></a>

| **Visual Feedback for Invalid Fields**                                                                                                                                                                                                                                                                           |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want to provide instant visual feedback for invalid inputs.</p><ul><li><strong>Effect:</strong> The border of invalid fields should flash red (#FF0000) three times.</li><li><strong>Behavior:</strong> Show an error message beneath the field with a red exclamation icon.</li></ul> |

| **Highlight Cart Section on Hover**                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my cart page, I want the summary section to visually stand out when hovered over.</p><ul><li><strong>Effect:</strong> Add a shadow and change the background color to light yellow (#FFF9C4).</li><li><strong>Behavior:</strong> The highlight should disappear smoothly over 0.2 seconds after hover.</li></ul> |

## Personalization <a href="#h_01jfjhxdmc2sgc4wkwy33f33rp" id="h_01jfjhxdmc2sgc4wkwy33f33rp"></a>

### Adapt content to audience segments <a href="#h_01jfjhyknycp6e6yzfgx189z8w" id="h_01jfjhyknycp6e6yzfgx189z8w"></a>

| **Show a Custom Welcome Message for Logged-In Users**                                                                                                                                                                                                                                                                                                                                                                                         |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to display a personalized welcome message for returning users.</p><ul><li><strong>Effect:</strong> Replace the default "Welcome to Our Site" with "Welcome back, \[First Name]!" dynamically.</li><li><strong>Behavior:</strong> The message should appear instantly when the page loads.</li><li><strong>Fallback:</strong> If no name is available, display "Welcome to Our Site!" as the default text.</li></ul> |

| **Change Background Color Based on User Preference**                                                                                                                                                                                                                                                                                                                                                                   |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my profile page, I want the background to reflect the user's theme preference.</p><ul><li><strong>Effect:</strong> If the user prefers dark mode, set the background to #121212 and the text to #FFFFFF.</li><li><strong>Trigger:</strong> The change should occur dynamically when the page is loaded.</li><li><strong>Fallback:</strong> Use the default light theme for users without a preference.</li></ul> |

### Add dynamic elements for engagement <a href="#h_01jfjhyzh8a8rjx52aj3bx7nfr" id="h_01jfjhyzh8a8rjx52aj3bx7nfr"></a>

| **Countdown Timer for Flash Sales**                                                                                                                                                                                                                                                                                                                                                                                                                        |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to display a countdown timer to create urgency for ongoing flash sales.</p><ul><li><strong>Effect:</strong> Display a live countdown showing hours, minutes, and seconds dynamically decreasing.</li><li><strong>Style:</strong> Use bold red text (#FF0000) with a clean font to make it stand out.</li><li><strong>Behavior:</strong> Reset the timer when the sale ends and replace it with a "Sale Ended" message.</li></ul> |

| **Personalized Call-to-Action for Returning Visitors**                                                                                                                                                                                                                                                                                                     |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <ul><li><p>On my product page, I want to tailor the call-to-action text for returning visitors.</p><ul><li><strong>Effect:</strong> Replace "Add to Cart" with "Add Another Item to Your Cart!" if the user has previous purchases.</li><li><strong>Trigger:</strong> Update the text immediately when the page loads for known users.</li></ul></li></ul> |

### Improve relevance of recommendations <a href="#h_01jfjhzh6g5v5yfyn6qawctnxd" id="h_01jfjhzh6g5v5yfyn6qawctnxd"></a>

| **Show Recently Viewed Products**                                                                                                                                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my product pages, I want to display a horizontal carousel of products the user has recently viewed.</p><ul><li><strong>Effect:</strong> Populate the carousel with the last 5 products the user clicked on.</li><li><strong>Behavior:</strong> Allow users to scroll through the carousel horizontally.</li><li><strong>Fallback:</strong> If no history is available, display the top 5 most popular products.</li></ul> |

| **Display Location-Based Promotions**                                                                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my homepage, I want to show special offers based on the user’s location.</p><ul><li><strong>Effect:</strong> Show "Free Shipping to \[City]!" dynamically based on the user’s IP address.</li><li><strong>Style:</strong> Use a banner with bold, localized messaging at the top of the page.</li></ul> |

## User Experience (UX) <a href="#h_01jfjhzt5ecj3pa06rx4ppzdfc" id="h_01jfjhzt5ecj3pa06rx4ppzdfc"></a>

### Simplify user journeys <a href="#h_01jfjhzxv70z0w78tfmtsz088n" id="h_01jfjhzxv70z0w78tfmtsz088n"></a>

| **Auto-Scroll to the First Error in Forms**                                                                                                                                                                                                                                                                                                            |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my contact form, I want the page to automatically scroll to the first invalid input when users submit the form.</p><ul><li><strong>Effect:</strong> Add a smooth scroll effect to bring the invalid input into view.</li><li><strong>Behavior:</strong> Highlight the input with a red border and display an error message beneath it.</li></ul> |

| **Add Smart Autofill for Address Fields**                                                                                                                                                                                                                                                                                          |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my checkout form, I want address fields to auto-suggest based on user input.</p><ul><li><strong>Effect:</strong> Show a dropdown of matching addresses dynamically as users type.</li><li><strong>Behavior:</strong> Populate the remaining fields (city, state, ZIP) automatically when a suggestion is selected.</li></ul> |

### Enhance accessibility <a href="#h_01jfjj0b991hvxe1xyk9w85r9q" id="h_01jfjj0b991hvxe1xyk9w85r9q"></a>

| **Add Keyboard Navigation for Menus**                                                                                                                                                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my navigation bar, I want users to navigate menu items using the keyboard.</p><ul><li><strong>Effect:</strong> Highlight the current menu item with a blue border when using the Tab key.</li><li><strong>Behavior:</strong> Ensure Enter activates the menu item, and Escape closes any dropdowns.</li></ul> |

| **Improve Readability with Adjustable Font Sizes**                                                                                                                                                                                                                                                                                                 |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my article pages, I want users to adjust the font size for better readability.</p><ul><li><p></p><ul><li><strong>Effect:</strong> Add small, medium, and large size buttons that dynamically change the font size.</li><li><strong>Behavior:</strong> Maintain the chosen size even when users navigate to another page.</li></ul></li></ul> |

### Reduce friction and improve usability <a href="#h_01jfjj0tzy33an55aez6whadva" id="h_01jfjj0tzy33an55aez6whadva"></a>

| **Add Real-Time Validation for Email Fields**                                                                                                                                                                                                                                                                                                 |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>On my signup form, I want the email field to validate user input as they type.</p><ul><li><strong>Effect:</strong> Display a green checkmark when the email format is valid, and a red warning icon when invalid.</li><li><strong>Behavior:</strong> Show the validation feedback immediately without requiring form submission.</li></ul> |

| **Add Loading Indicators to Buttons**                                                                                                                                                                                                                                                                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| <p>On my checkout page, I want the "Place Order" button to display a loading spinner when clicked.</p><ul><li><strong>Effect:</strong> Replace the button text with a spinner icon and disable the button until the action completes.</li><li><strong>Behavior:</strong> Revert to the original text once the order is successfully placed or an error occurs.</li></ul> |




---

[Next Page](/llms-full.txt/1)

