docs(integration): how to track add2cart event (#1349)

---------
Co-authored-by: Gerardo Vázquez <[email protected]>
Co-authored-by: Luisac <[email protected]>

packages/x-components/static-docs/build-search-ui/web-archetype-integration-guide.md

@@ -213,6 +213,7 @@ out further information about:
 - **Functions supported by the [X API object](#x-api)** to initialize Interface X
 - Notes on how to set up [**the preview of query results**](#dynamic-query-results-preview) for
   determined queries at the pre-search stage
+- [**Tracking options for add to cart events**](#tracking-events-for-add-to-cart-on-product-detail-pages) from product detail pages
 
 ### Snippet configuration
 
@@ -405,3 +406,64 @@ instance:
   });
 </script>
 ```
+
+### Tracking events for add to cart on product detail pages
+
+Empathy Platform Interface X allows you to track shoppers' add-to-cart interactions from any product detail page (PDP) in your commerce store, regardless of whether your commerce store is running on a **single-page application or not**.
+
+#### Tracking add-to-cart events on non-SPA webpages
+To track your shoppers' add-to-cart interactions from any PDP based on a non-spa structured webpage, follow these steps:
+
+1. Add the `productId` parameter when initializing the script.
+
+    ```html
+    window.InterfaceX.init({
+        instance: "instanceName",
+        lang: "es",
+        documentDirection: "ltr",
+        scope: 'desktop',
+        currency: "EUR",
+        consent: true,
+        isSPA: false,
+        queriesPreview: []
+            {
+                query: 'coats',
+                title: 'Winter Coats'
+            }
+        ],
+        callbacks: {
+            UserClickedAResult: function(a, b, e, t) {}
+        },
+        productId: '11776347-ES' // Add this parameter
+    })
+    ```
+
+2. Call the `InterfaceX.addProductToCart('11776347-ES')` function to track the event when the add-to-cart button is clicked.
+
+    ```html
+    yourCommerceStoreEnvironment.addToCartButton.addEventListener('click', () =>
+      InterfaceX.addProductToCart('11776347-ES');
+   );
+   ```
+
+
+#### Tracking add-to-cart events on SPA webpages
+To track your shoppers' add-to-cart interactions from any PDP based on a SPA structured webpage, follow these steps:
+
+1. Call the `InterfaceX.bus.emit('PDPIsLoaded')` function any time a new PDP-type page is loaded.
+
+
+    ```html
+    if (yourCommerceStoreEnvironment.isPDP && window.initX.isSpa) {
+      InterfaceX.bus.emit('PDPIsLoaded')
+    }
+    ```
+
+2. Call the `InterfaceX.addProductToCart()` function to track the event when the add-to-cart button is clicked:  
+
+
+    ```html
+    yourCommerceStoreEnvironment.addToCartButton.addEventListener('click', () =>
+      InterfaceX.addProductToCart();
+    );
+    ```