# Recommendation banner with tag and custom JS

Recos Tag enables you to code your own recommendation banners and send automagically events to your analytics based on HTML attributes.

## Setup <a href="#h_01jhg3y5qve4c1qn2tt1n10avf" id="h_01jhg3y5qve4c1qn2tt1n10avf"></a>

To start seeing analytics events flowing with Recos Tag and be able to monitor your Recos performances in the upcoming days :

* Be sure that your Recos Tag is up and running by testing that recos exist in your global context by typing in your console

```
recos
```

* Enrich the HTML of your recommendation banners data attributes as explained below

[Enriching Recommendations Banner HTML to send events to DataLayer through Recos Tag](/recommendations-and-merchandising_deprecated/recommendations/recommendation-banner/introduction/enriching-recommendations-banner-html-to-send-events-to-datalayer-through-recos-tag.md)

* Setup your Tag Manager to send Recos events to the analytics tool

[Setting up GTM to send Recos Datalayer Events](/recommendations-and-merchandising_deprecated/recommendations/recommendation-banner/introduction/setting-up-gtm-to-send-recos-datalayer-events.md)

* Check that Recos Event are sent to GA4

[Check that Recos events are sent to GA4 through GTM](/recommendations-and-merchandising_deprecated/recommendations/recommendation-banner/introduction/check-that-the-events-arrive-correctly-in-ga.md)

## How it works <a href="#h_01jhg477ngzr8e7cesfmfw87nh" id="h_01jhg477ngzr8e7cesfmfw87nh"></a>

Recos Tag

* captures the events of:
  * the appearance of any element with a
    * **data-reco-id=\[RECO\_ID]** attribute\
      where RECO\_ID is the id you can find in the top right corner of your experience configure tab![Image without caption](https://image-forwarder.notaku.so/aHR0cHM6Ly93d3cubm90aW9uLnNvL2ltYWdlL2h0dHBzJTNBJTJGJTJGcHJvZC1maWxlcy1zZWN1cmUuczMudXMtd2VzdC0yLmFtYXpvbmF3cy5jb20lMkZjZjFjZDNjZC02OWMzLTQ0ZTQtODg0YS0zMzM5NTllZTA3YmIlMkZmZTAwZmQzNi0xM2Y3LTRmNzQtYjYwOS02M2EyMjczNGJiM2UlMkZVbnRpdGxlZC5wbmc_dGFibGU9YmxvY2smc3BhY2VJZD1jZjFjZDNjZC02OWMzLTQ0ZTQtODg0YS0zMzM5NTllZTA3YmImaWQ9MjI3MTJjYmItNmUyMC00NGI0LWIxYTYtMGVmMGZjZDE4NzhlJmNhY2hlPXYyJndpZHRoPTEzNjAuMDE3NDU2MDU0Njg3NQ==)
    * the click of any element with a
      * **data-reco-click=\[ACTION\_ID]** attribute\
        where ACTION\_ID is one of the following actions

### Recos Analytic Events Actions <a href="#h_01jhg4vcc5rkdbr5ntm48q659j" id="h_01jhg4vcc5rkdbr5ntm48q659j"></a>

| go\_to\_page         | go\_to\_page when an item is clicked                                                     |
| -------------------- | ---------------------------------------------------------------------------------------- |
| add\_to\_cart\_item  | add\_to\_cart\_item when an item is added to cart in a recommendation                    |
| add\_to\_cart\_items | add\_to\_cart\_items when all the items recommended are added to cart (likes in bundles) |
| close                | when an experience is closed                                                             |
| convert\_XXX         | when a conversion button is clicked (XXX can be anything)                                |

* enriches the event with all the data contained in the attributes of the element’s surrounding :<br>
  * reco\_id : from the first data-reco-id value detected in a parent element
  * item\_id : from the first data-item-id value detected in a parent element
  * item\_ids : from all the data-item-id in the children of the first parent element that has an reco-id
  * debug\_mode : if data-reco-debug attribute is set to true
* pushes it to the dataLayer
* those events then trigger events sent to the Analyttics Tool (this trigger is settup in GTM)

## How does this get reported in your analytics tool <a href="#h_01jhg4vcc5cgm5zd7p23j5efh8" id="h_01jhg4vcc5cgm5zd7p23j5efh8"></a>

[Recos Analytics Event format](/recommendations-and-merchandising_deprecated/recos-and-merch-analytics/recos-analytics-event-format.md)

## What is the cost generated by the volume of tracking events? <a href="#h_01jhg4wwwsvmw80219q6fpv8v0" id="h_01jhg4wwwsvmw80219q6fpv8v0"></a>

[The impact of BigQuery exports in terms of cost](/recommendations-and-merchandising_deprecated/recos-and-merch-analytics/the-impact-of-bigquery-exports-in-terms-of-cost.md)


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/recommendations-and-merchandising_deprecated/recommendations/recommendation-banner/introduction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.