> For the complete documentation index, see [llms.txt](https://docs.abtasty.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.abtasty.com/commerce/search/how-to-enable-search-reporting.md).

# How to enable Search Reporting

Search reporting lets you track the performance of your on-site search (displays, clicks, add-to-carts, conversions) directly in your favorite analytics tool (e.g. GA4).

To do this, you just need to make sure that Search events are sent to your website's DataLayer through the AB Tasty tag.

**Before you start:**

{% hint style="warning" %}
This page documents the new GA4/DataLayer-based Search tracking for Commerce platform (distinct from the legacy `abtasty_search` / `abtasty_search_result` custom events described in "Search widget events", which relate to the historical AB Tasty/Ariane collection). 
{% endhint %}

### Enabling Search reporting

{% stepper %}
{% step %}

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

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

{% step %}

#### Configure analytics in your tag

Search events reuse the same DataLayer channel as Merchandising and Recommendation events. Your **Technical Support Engineer** (**TSE**) or internal tech team simply needs to add this key to the `config.json` file of your tag configuration (skip this step if it's already set for Merchandising/Recommendations):

```json
"analytics": {
  "ga4EventsToDataLayer": true
}
```

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

{% step %}

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

If your Recommendation or Merchandising reporting is already configured, Search events will be captured the same way once the additional variable `search_query` is included (see GTM setup guide [here](https://docs.abtasty.com/recommendations-and-merchandising_deprecated/recommendations/recommendation-banner/introduction/setting-up-gtm-to-send-recos-datalayer-events)). 

Otherwise, your TSM or internal tech team can follow the existing Recos GTM setup (same trigger, same event structure) and add the Search-specific variables listed further down this page.
{% endstep %}

{% step %}

#### Test it

Open your site → open the browser console → type `dataLayer`. 

You should see events like:

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

If you see them, it means Search events are being correctly sent to GA4.

{% hint style="info" %}
**Need help?**\
Contact your **Technical Success Manager (TSM)** to confirm or validate the configuration.
{% endhint %}
{% endstep %}
{% endstepper %}

### How to set up HTML on your website?

There are two different ways to implement Search, and the HTML setup differs depending on which one you're using:

1. **Search widget** - AB Tasty renders the search UI end-to-end. No HTML attributes are needed (see below).
2. **100% API implementation** - you build your own search UI on top of the Search API. HTML attributes are needed, following the same convention already used for Recommendations/Merchandising 100% API (see below).

#### **Search widget** 

Unlike Merchandising banners, the Search widget is fully rendered and managed by AB Tasty end-to-end. There is no HTML attribute to add on your page. The widget reads the query typed by the visitor and the results it displays directly from its own internal state, and pushes the corresponding events to the DataLayer automatically without relying on markup added by your team.

#### 100% API implementation

If you are building your own search UI on top of the Search API (see "Using search with API") instead of using the AB Tasty Search widget, the same approach as for Recommendations and Merchandising 100% API applies: your development team adds the required HTML attributes to your own search results markup, and the recos-tag (configured by your TSE) detects them and handles the DataLayer push automatically. You do not push to the DataLayer yourself.

**Required attributes:**

| Attribute           | Description                                                                | Example                                  |
| ------------------- | -------------------------------------------------------------------------- | ---------------------------------------- |
| `Data-search-uuid`  | Strategy identifier, always equals to "search"                             | `<div data-search-uuid=”search”>`        |
| `Data-search-value` | The search query entered by the visitor                                    | `<div data-search-value="polo">`         |
| `Data-search-click` | On all clickable zones, possible values are `add_to_cart` and `go_to_page` | `<button data-reco-click="add_to_cart">` |
| `Data-item-id`      | Product identifier, on each product tile                                   | `<div data-item-id="SKU123">`            |

### How to configure GTM / GA4?

The configuration follows the same principle as Recommendations and Merchandising tracking, with a dedicated set of DataLayer variables for Search.&#x20;

If you already have Recommendation or Merchandising analytics events configured in GA4, you can reuse the same trigger and GA4 Event tag. Simply add the Search-specific variables below.&#x20;

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 DataLayer variables

Create these seven variables:

| Variable name     | Data Layer variable name |
| ----------------- | ------------------------ |
| `reco_id`         | `recos.reco_id`          |
| `reco_name`       | `recos.reco_name`        |
| `action_id`       | `recos.action_id`        |
| `item_id`         | `recos.item_id`          |
| `item_ids`        | `recos.item_ids`         |
| `search_query`    | `recos.search_query`     |
| `non_interaction` | `recos.non_interaction`  |

You can access them in GTM via the data path `recos.VARIABLE_NAME`.

{% hint style="info" %}
Unlike Merchandising, Search events do not include `event_id` or `category_id` . There is no need to create these two variables specifically for Search.
{% endhint %}
{% endstep %}

{% step %}

#### Create a GA4 Event Tag

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

### **Example events in the DataLayer**

**Show event** (search results displayed)

```json
{
  "event": "ab_recos_12345",
  "recos": {
    "reco_name": "",
    "reco_id": "search",
    "action_id": "show",
    "item_id": "",
    "item_ids": "[\"SKU123\",\"SKU456\"]",
    "search_query": "sunscreen",
    "non_interaction": false
  }
}
```

**Click event** (product clicked from the results)

```json
{
  "event": "ab_recos_67890",
  "recos": {
    "reco_name": "",
    "reco_id": "search",
    "action_id": "go_to_page",
    "item_id": "SKU123",
    "item_ids": "[\"SKU123\",\"SKU456\"]",
    "search_query": "sunscreen",
    "non_interaction": false
  }
}
```

**Add-to-cart event** (product added to cart from the results)

```json
{
  "event": "ab_recos_54321",
  "recos": {
    "reco_name": "",
    "reco_id": "search",
    "action_id": "add_to_cart",
    "item_id": "SKU123",
    "item_ids": "[\"SKU123\",\"SKU456\"]",
    "search_query": "sunscreen",
    "non_interaction": false
  }
}
```

#### **Available Event actions**

| Action ID     | When is it triggered?                                                  |
| ------------- | ---------------------------------------------------------------------- |
| `show`        | When search results are displayed to the visitor                       |
| `go_to_page`  | When a product in the search results is clicked                        |
| `add_to_cart` | When a visitor adds a product to cart directly from the search results |

### How to test my reporting tracking?

* Open your website
* Open the browser console
* Type: `dataLayer`

You should see events like `ab_recos_xxxx` containing `reco_id: "search", action_id` and `search_query`.

If these appear → the tracking setup is working. You can then check results in GA4 > DebugView.

{% hint style="info" %}
**Search query behavior**\
On the reference implementation, `search_query` reflects the live value as the visitor types (e.g. a `show` event can fire with a partial query such as "creme solai" before the visitor finishes typing "creme solaire"), not only the final submitted term. Keep this in mind when building reports. You may want to group or normalize partial queries.
{% endhint %}

### Notes & limitations

* Activating this does not interfere with your existing analytics setup.
* Search queries may occasionally contain personal data if a visitor mistypes personal information into the search bar. Confirm this collection is covered by the client's privacy policy and consent settings before enabling it.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.abtasty.com/commerce/search/how-to-enable-search-reporting.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.