diff --git a/GoogleTagManager.php b/GoogleTagManager.php
index 05dc9c3..9fd903a 100755
--- a/GoogleTagManager.php
+++ b/GoogleTagManager.php
@@ -27,6 +27,7 @@ class GoogleTagManager extends BaseModule
     public const GOOGLE_TAG_VIEW_ITEM = 'google_tag_view_item';
     public const GOOGLE_TAG_VIEW_LIST_ITEM = 'google_tag_view_list_item';
     public const GOOGLE_TAG_TRIGGER_LOGIN = 'google_tag_trigger_login';
+    public const GOOGLE_TAG_PURCHASE = 'google_tag_purchase';
 
     /**
      * @throws PropelException
diff --git a/Hook/Theme/GoogleTagManagerThemeHook.php b/Hook/Theme/GoogleTagManagerThemeHook.php
new file mode 100644
index 0000000..8db032b
--- /dev/null
+++ b/Hook/Theme/GoogleTagManagerThemeHook.php
@@ -0,0 +1,55 @@
+<?php
+
+declare(strict_types=1);
+
+namespace GoogleTagManager\Hook\Theme;
+
+use GoogleTagManager\Service\DataLayerProvider;
+use GoogleTagManager\Service\GtmConfig;
+use Thelia\Core\Hook\Theme\ThemeHookInterface;
+use Twig\Environment;
+
+final readonly class GoogleTagManagerThemeHook implements ThemeHookInterface
+{
+    public function __construct(
+        private Environment $twig,
+        private GtmConfig $config,
+        private DataLayerProvider $dataLayerProvider,
+    ) {
+    }
+
+    public function supports(string $hookName): bool
+    {
+        return \in_array($hookName,
+            [
+                'layout.head.bottom',
+                'layout.body.top',
+                'layout.body.bottom',
+                'product.bottom'
+            ], true);
+    }
+
+    public function render(string $hookName, array $parameters): string
+    {
+        $containerId = $this->config->getContainerId();
+
+        if( empty($containerId) ) {
+            return '';
+        }
+
+        $productId = $parameters['product']['id'] ?? null;
+        return match ($hookName) {
+            // The dataLayer pushes must come before the container script loads gtm.js.
+            'layout.head.bottom' => $this->dataLayerProvider->renderHead()
+                .$this->twig->render('@GoogleTagManagerModule/theme-hook/script.html.twig', [
+                    'containerId' => $containerId,
+                ]),
+            'layout.body.top' => $this->twig->render('@GoogleTagManagerModule/theme-hook/noscript.html.twig', [
+                'containerId' => $containerId
+            ]),
+            'layout.body.bottom' => $this->dataLayerProvider->renderJsInit(),
+            'product.bottom' => $productId ? $this->dataLayerProvider->trackProduct($productId) : '',
+            default => '',
+        };
+    }
+}
diff --git a/Listener/GoogleTagListener.php b/Listener/GoogleTagListener.php
index fcf8d24..a906d04 100644
--- a/Listener/GoogleTagListener.php
+++ b/Listener/GoogleTagListener.php
@@ -11,6 +11,7 @@
 use Thelia\Core\Event\Customer\CustomerCreateOrUpdateEvent;
 use Thelia\Core\Event\Customer\CustomerLoginEvent;
 use Thelia\Core\Event\Loop\LoopExtendsParseResultsEvent;
+use Thelia\Core\Event\Order\OrderEvent;
 use Thelia\Core\Event\TheliaEvents;
 use Thelia\Model\CurrencyQuery;
 use Thelia\Model\Lang;
@@ -32,6 +33,8 @@ public static function getSubscribedEvents(): array
             GoogleTagManager::GOOGLE_TAG_VIEW_ITEM => ['getViewItem', 128],
             TheliaEvents::CUSTOMER_LOGIN => ['triggerLoginEvent', 128],
             TheliaEvents::CUSTOMER_CREATEACCOUNT => ['triggerRegisterEvent', 128],
+            // Runs after the core Order::create (priority 128) which sets the placed order.
+            TheliaEvents::ORDER_PAY => ['trackPurchase', 64],
             TheliaEvents::getLoopExtendsEvent(
                 TheliaEvents::LOOP_EXTENDS_PARSE_RESULTS,
                 'product'
@@ -39,6 +42,28 @@ public static function getSubscribedEvents(): array
         ];
     }
 
+    /**
+     * Stores the placed order id in session, consumed by DataLayerProvider::renderHead
+     * on the confirmation page to push the purchase/payment/shipping dataLayer events.
+     * The Flexy checkout confirmation page carries no order_id in the request.
+     */
+    public function trackPurchase(OrderEvent $event): void
+    {
+        $request = $this->requestStack->getCurrentRequest();
+
+        // Tracking must never break the payment flow: ORDER_PAY can be dispatched outside a
+        // web context (CLI, payment callback), where RequestStack::getSession() would throw.
+        // getPlacedOrder() is safe here — Order::create either sets it or throws at priority 128.
+        if (null === $request || !$request->hasSession()) {
+            return;
+        }
+
+        $request->getSession()->set(
+            GoogleTagManager::GOOGLE_TAG_PURCHASE,
+            $event->getPlacedOrder()->getId()
+        );
+    }
+
     /**
      * @throws \JsonException|PropelException
      */
diff --git a/Readme.md b/Readme.md
index f4abe0f..2e664fc 100755
--- a/Readme.md
+++ b/Readme.md
@@ -7,53 +7,73 @@ This module is made to use the Google Tag Manager / Google Analytics 4.
 ### Composer
 
 ```
-composer require thelia/google-tag-manager-module:~2.1.0
+composer require thelia/google-tag-manager-module:^4.0
 ```
 
 ## Usage
 
 You need to configure the id from your Google tag manager account in the thelia administration panel.\
-It should look like ```GTM-XXXX```.
+It should look like ```GTM-XXXX```. Nothing is rendered while this id is empty.
 
-This module renders its scripts through Twig functions you place in your front theme.
+The module injects its scripts through **theme hooks**: as long as your front theme declares the
+hook points below, there is nothing to add to your templates.
 
-| Function | Where | What it outputs |
-|----------|-------|-----------------|
-| `{{ gtm_head() }}` | in `<head>` | GTM container script + dataLayer pushes (page view, view_item, purchase…) |
-| `{{ gtm_body() }}` | right after `<body>` | GTM `<noscript>` fallback |
-| `{{ gtm_js_init() }}` | before `</body>` | `select_item` / `add_to_cart` event listeners |
-| `{{ gtm_track_product(product.id) }}` | product page template | registers the viewed product (enables the `view_item` event) |
+| Theme hook | Where the theme declares it | What the module renders |
+|------------|-----------------------------|-------------------------|
+| `layout.head.bottom` | in `<head>` | GTM container script + dataLayer pushes (`page_view`, `view_item`, `view_item_list`, `login`, `view_cart`, `begin_checkout`, `purchase`…) |
+| `layout.body.top` | right after `<body>` | GTM `<noscript>` fallback |
+| `layout.body.bottom` | before `</body>` | `select_item` / `add_to_cart` event listeners |
+| `product.bottom` | product page, with a `product` parameter | registers the viewed product (enables the `view_item` event) |
 
-### Adding the functions to your front template
-
-In your base layout (e.g. `templates/frontOffice/<your-theme>/base.html.twig`):
+The `work` front-office theme declares all four out of the box:
 
 ```twig
-<head>
-    {{ gtm_head() }}
-    {# ... #}
-</head>
-<body>
-    {{ gtm_body() }}
-    {# ... #}
-    {{ gtm_js_init() }}
-</body>
+{# templates/frontOffice/work/base.html.twig #}
+{{ theme_hook('layout.head.bottom', {breadcrumb}) }}
+{{ theme_hook('layout.body.top') }}
+{{ theme_hook('layout.body.bottom') }}
+
+{# templates/frontOffice/work/product.html.twig #}
+{{ theme_hook('product.bottom', {product: product}) }}
 ```
 
-In your product page template (e.g. `templates/frontOffice/<your-theme>/product.html.twig`),
-inside the body — this is required for the `view_item` event:
+`product.bottom` must receive the product, otherwise the `view_item` event is silently skipped.
 
-```twig
-{{ gtm_track_product(product.id) }}
-```
+### Themes without theme hooks
+
+If your theme does not declare those hook points, the same rendering is available as Twig functions
+you place yourself:
+
+| Function | Where | Equivalent to |
+|----------|-------|---------------|
+| `{{ gtm_head() }}` | in `<head>` | the dataLayer pushes of `layout.head.bottom` |
+| `{{ gtm_js_init() }}` | before `</body>` | `layout.body.bottom` |
+| `{{ gtm_track_product(product.id) }}` | product page template | `product.bottom` |
+
+**Do not use both mechanisms at once.** `gtm_head()` is already called by the template rendered on
+`layout.head.bottom`, so adding it to a theme that declares that hook pushes `page_view` twice.
 
-To track products added to the cart, you need to implement this js event on the "Add to cart" buttons.
-```js 
-const event = new CustomEvent("addPseToCart", {
-    detail: {
-          pse: pseId,
-          quantity
-    },
- });
- document.dispatchEvent(event);
+Two caveats on this fallback: `gtm_head()` outputs the dataLayer pushes only — you have to add the
+GTM container `<script>` and the `<noscript>` iframe to your layout yourself — and there is no Twig
+function for the `<noscript>` fallback.
+
+### Tracking add to cart / remove from cart
+
+The `add_to_cart` and `remove_from_cart` events are driven by two JS custom events you dispatch from
+your "Add to cart" / "Remove from cart" buttons:
+
+```js
+document.dispatchEvent(new CustomEvent('addPseToCart', {
+    detail: { pse: pseId, quantity },
+}));
+
+document.dispatchEvent(new CustomEvent('removePseFromCart', {
+    detail: { pse: pseId, quantity },
+}));
 ```
+
+### Tracking select_item on listings
+
+On listing views (`category`, `brand`, `search`, `folder`, `content`, `page`) the module binds the
+`select_item` event to product links matching `a.ProductCard, .ProductCard a`. Adapt
+`templates/frontOffice/default/assets/js/getItem.js` if your theme uses different markup.
diff --git a/Service/DataLayerProvider.php b/Service/DataLayerProvider.php
index a0811f3..4dd2647 100644
--- a/Service/DataLayerProvider.php
+++ b/Service/DataLayerProvider.php
@@ -19,20 +19,22 @@
 use Symfony\Component\EventDispatcher\EventDispatcherInterface;
 use Symfony\Component\HttpFoundation\RequestStack;
 use Thelia\Domain\Taxation\TaxEngine\TaxEngine;
+use Twig\Environment;
 
 /**
  * Decides which dataLayer events must be pushed for the current page (based on the
  * current `_view`), and produces the corresponding markup using {@see GtmTagRenderer}.
  * This holds the orchestration logic that used to live in the front hook.
  */
-class DataLayerProvider
+final readonly class DataLayerProvider
 {
     public function __construct(
-        private readonly GoogleTagService         $googleTagService,
-        private readonly GtmTagRenderer           $renderer,
-        private readonly TaxEngine                $taxEngine,
-        private readonly RequestStack             $requestStack,
-        private readonly EventDispatcherInterface $eventDispatcher,
+        private GoogleTagService         $googleTagService,
+        private GtmTagRenderer           $renderer,
+        private TaxEngine                $taxEngine,
+        private RequestStack             $requestStack,
+        private EventDispatcherInterface $eventDispatcher,
+        private Environment              $twig,
     ) {
     }
 
@@ -41,7 +43,6 @@ public function renderHead(): string
         $request = $this->requestStack->getCurrentRequest();
         $session = $request?->getSession();
         $view = $request?->attributes->get('_view', $request->query->get('_view', $request->request->get('_view')));
-
         $html = $this->renderer->dataLayerPush($this->googleTagService->getTheliaPageViewParameters());
 
         if (\in_array($view, ['category', 'brand', 'search'], true)) {
@@ -57,7 +58,9 @@ public function renderHead(): string
             $session->set(GoogleTagManager::GOOGLE_TAG_TRIGGER_LOGIN, null);
         }
 
-        if ('order-delivery' === $view) {
+        $view = $request?->attributes->get('_route', $request->query->get('_route', $request->request->get('_route')));
+
+        if ('checkout_delivery' === $view) {
             $cart = $session?->getSessionCart($this->eventDispatcher);
             $country = $this->taxEngine->getDeliveryCountry();
 
@@ -65,11 +68,14 @@ public function renderHead(): string
             $html .= $this->renderer->dataLayerPush($this->googleTagService->getCheckOutData($cart?->getId(), $country));
         }
 
-        if ('order-placed' === $view
-            && $orderId = $request?->attributes->get('order_id', $request->query->get('order_id', $request->request->get('order_id')))) {
+        // Only on the /pay page for now. The placed order id is captured in session by
+        // GoogleTagListener::trackPurchase (the request carries no order_id here).
+        if ('checkout_pay' === $view
+            && null !== $orderId = $session?->get(GoogleTagManager::GOOGLE_TAG_PURCHASE)) {
             $html .= $this->renderer->dataLayerPush($this->googleTagService->getPurchaseData((int) $orderId));
             $html .= $this->renderer->dataLayerPush($this->googleTagService->getPaymentInfo((int) $orderId));
             $html .= $this->renderer->dataLayerPush($this->googleTagService->getShippingInfo((int) $orderId));
+            $session->set(GoogleTagManager::GOOGLE_TAG_PURCHASE, null);
         }
 
         return $html;
@@ -79,22 +85,23 @@ public function renderJsInit(): string
     {
         $request = $this->requestStack->getCurrentRequest();
         $view = $request?->attributes->get('_view', $request->query->get('_view', $request->request->get('_view')));
-
         $html = '';
 
-        if (\in_array($view, ['category', 'brand', 'search'], true)) {
-            $html .= $this->renderer->renderSelectItem();
+        if (\in_array($view, ['category', 'brand', 'search', 'folder', 'content', 'page'], true)) {
+            $html .= $this->twig->render('@GoogleTagManagerModule/theme-hook/getItems.html.twig');
         }
 
-        return $html.$this->renderer->renderAddToCart();
+        // Always loaded: a listing page may also carry an add-to-cart button.
+        return $html.$this->twig->render('@GoogleTagManagerModule/theme-hook/addToCart.html.twig');
     }
 
     /**
      * Stores the viewed product id in session, consumed by GoogleTagListener::getViewItem
      * to resolve the [google_tag_view_item] ShortCode at response time.
      */
-    public function trackProduct(int|string|null $productId): void
+    public function trackProduct(int|string|null $productId): string
     {
         $this->requestStack->getCurrentRequest()?->getSession()?->set(GoogleTagManager::GOOGLE_TAG_VIEW_ITEM, $productId);
+        return '';
     }
 }
diff --git a/Service/GoogleTagService.php b/Service/GoogleTagService.php
index f436188..b0917d1 100644
--- a/Service/GoogleTagService.php
+++ b/Service/GoogleTagService.php
@@ -81,7 +81,6 @@ public function getTheliaPageViewParameters(): false|string
 
         $event = new GoogleTagPageViewEvent($result, $user, $view);
         $event = $this->dispatcher->dispatch($event);
-
         return json_encode($event->getResult(), JSON_THROW_ON_ERROR | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
     }
 
@@ -366,7 +365,7 @@ public function getPaymentInfo(int $orderId): false|string|null
                 'payment_type' => $paymentType,
                 'items' => $this->getOrderProductItems($order, $order->getOrderAddressRelatedByInvoiceOrderAddressId()->getCountry())
             ]
-        ], JSON_THROW_ON_ERROR);
+        ],  JSON_THROW_ON_ERROR | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP);
     }
 
     /**
diff --git a/Service/GtmTagRenderer.php b/Service/GtmTagRenderer.php
index ab9f9e6..aac65fd 100644
--- a/Service/GtmTagRenderer.php
+++ b/Service/GtmTagRenderer.php
@@ -15,34 +15,19 @@
 
 namespace GoogleTagManager\Service;
 
-use Thelia\Tools\URL;
+use Twig\Environment;
 
 /**
  * Builds the raw GTM markup fragments (container, noscript, dataLayer pushes, JS listeners).
  * Stateless rendering primitives — the "what to render for the current page" decision lives
  * in {@see DataLayerProvider}.
  */
-class GtmTagRenderer
+final readonly class GtmTagRenderer
 {
-    public function renderContainer(string $containerId): string
-    {
-        return '<!-- Google Tag Manager -->'
-            ."<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':"
-            ."new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],"
-            ."j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src="
-            ."'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);"
-            ."})(window,document,'script','dataLayer','".$containerId."');</script>"
-            .'<!-- End Google Tag Manager -->';
-    }
-
-    public function renderNoscript(string $containerId): string
-    {
-        return '<!-- Google Tag Manager (noscript) -->'
-            ."<noscript><iframe src='https://www.googletagmanager.com/ns.html?id=".$containerId."' "
-            ."height='0' width='0' style='display:none;visibility:hidden'></iframe></noscript>"
-            .'<!-- End Google Tag Manager (noscript) -->';
-    }
 
+    public function __construct(
+        private Environment $twig,
+    ){}
     /**
      * dataLayer push of a JSON payload built by {@see GoogleTagService}.
      * The payloads are JSON-encoded with JSON_HEX_APOS|JSON_HEX_QUOT, so they are safe
@@ -54,8 +39,9 @@ public function dataLayerPush(false|string|null $data): string
             return '';
         }
 
-        return '<script>window.dataLayer = window.dataLayer || [];'
-            ."dataLayer.push({ ecommerce: null });dataLayer.push(JSON.parse('".$data."'));</script>";
+        return $this->twig->render('@GoogleTagManagerModule/theme-hook/push.html.twig',[
+            'data' => $data
+        ]);
     }
 
     /**
@@ -64,79 +50,8 @@ public function dataLayerPush(false|string|null $data): string
      */
     public function shortCodePush(string $shortCodeTag): string
     {
-        return '<script>window.dataLayer = window.dataLayer || [];'
-            ."dataLayer.push({ ecommerce: null });dataLayer.push(JSON.parse('[".$shortCodeTag."]'));</script>";
-    }
-
-    public function renderSelectItem(): string
-    {
-        $url = URL::getInstance()?->absoluteUrl('/googletagmanager/getItem');
-
-        return <<<HTML
-<script>
-document.addEventListener("DOMContentLoaded", function(e) {
-    const products = document.querySelectorAll("a.SingleProduct, .SingleProduct a");
-    let processLinkClick = async function(e) {
-        let targetUrl;
-        if (window['google_tag_manager']) {
-            e.preventDefault();
-            targetUrl = e.currentTarget.href;
-            if (undefined === targetUrl) {
-                targetUrl = e.currentTarget.getElementsByTagName('a')[0].href;
-            }
-            const response = await fetch('$url', {
-                method: "POST",
-                headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
-                body: JSON.stringify({ productUrl: targetUrl })
-            })
-            const resultJson = await response.json();
-            window.dataLayer = window.dataLayer || [];
-            window.dataLayer.push({ ecommerce: null });
-            window.dataLayer.push({
-                event: 'select_item',
-                ecommerce: { items: JSON.parse(resultJson) },
-                eventCallback: function() { window.location = targetUrl; },
-                eventTimeout : 2000
-            });
-        }
-    };
-    for (let i = 0; i < products.length; i++) {
-        products[i].addEventListener('click', processLinkClick, false);
-    }
-});
-</script>
-HTML;
-    }
-
-    public function renderAddToCart(): string
-    {
-        $url = URL::getInstance()?->absoluteUrl('/googletagmanager/getCartItem');
-
-        return <<<HTML
-<script>
-let getCartItem = async function(e) {
-    const response = await fetch('$url', {
-        method: "POST",
-        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
-        body: JSON.stringify({ pseId: e.detail.pse, quantity: e.detail.quantity })
-    })
-    return await response.json();
-}
-let addPseToCart = async function(e) {
-    const resultJson = await getCartItem(e)
-    window.dataLayer = window.dataLayer || [];
-    window.dataLayer.push({ ecommerce: null });
-    window.dataLayer.push({ event: 'add_to_cart', ecommerce: JSON.parse(resultJson) });
-}
-let removePseFromCart = async function(e) {
-    const resultJson = await getCartItem(e)
-    window.dataLayer = window.dataLayer || [];
-    window.dataLayer.push({ ecommerce: null });
-    window.dataLayer.push({ event: 'remove_from_cart', ecommerce: JSON.parse(resultJson) });
-}
-document.addEventListener('addPseToCart', addPseToCart);
-document.addEventListener('removePseFromCart', removePseFromCart);
-</script>
-HTML;
+        return $this->twig->render('@GoogleTagManagerModule/theme-hook/push.html.twig', [
+            'data' => '['.$shortCodeTag.']'
+        ]);
     }
 }
diff --git a/Twig/GoogleTagManagerExtension.php b/Twig/GoogleTagManagerExtension.php
index 1f117af..7a2ddfc 100644
--- a/Twig/GoogleTagManagerExtension.php
+++ b/Twig/GoogleTagManagerExtension.php
@@ -17,23 +17,18 @@
 
 use GoogleTagManager\Service\DataLayerProvider;
 use GoogleTagManager\Service\GtmConfig;
-use GoogleTagManager\Service\GtmTagRenderer;
 use Twig\Extension\AbstractExtension;
 use Twig\TwigFunction;
 
 /**
  * Exposes the GTM rendering to Twig templates. Call these functions in your front theme
  * (the module no longer relies on Thelia hooks):
- *   - {{ gtm_head() }}          in <head>
- *   - {{ gtm_body() }}          right after <body>
- *   - {{ gtm_js_init() }}       before </body>
  *   - {{ gtm_track_product(product.id) }}  in the product page template
  */
 class GoogleTagManagerExtension extends AbstractExtension
 {
     public function __construct(
         private readonly GtmConfig          $config,
-        private readonly GtmTagRenderer     $renderer,
         private readonly DataLayerProvider  $dataLayerProvider,
     ) {
     }
@@ -42,7 +37,6 @@ public function getFunctions(): array
     {
         return [
             new TwigFunction('gtm_head', [$this, 'head'], ['is_safe' => ['html']]),
-            new TwigFunction('gtm_body', [$this, 'body'], ['is_safe' => ['html']]),
             new TwigFunction('gtm_js_init', [$this, 'jsInit'], ['is_safe' => ['html']]),
             new TwigFunction('gtm_track_product', [$this, 'trackProduct'], ['is_safe' => ['html']]),
         ];
@@ -54,16 +48,7 @@ public function head(): string
             return '';
         }
 
-        return $this->dataLayerProvider->renderHead().$this->renderer->renderContainer($this->config->getContainerId());
-    }
-
-    public function body(): string
-    {
-        if (!$this->config->isEnabled()) {
-            return '';
-        }
-
-        return $this->renderer->renderNoscript($this->config->getContainerId());
+        return $this->dataLayerProvider->renderHead();
     }
 
     public function jsInit(): string
diff --git a/templates/frontOffice/default/assets/js/addToCart.js b/templates/frontOffice/default/assets/js/addToCart.js
new file mode 100644
index 0000000..3e5918b
--- /dev/null
+++ b/templates/frontOffice/default/assets/js/addToCart.js
@@ -0,0 +1,29 @@
+document.addEventListener('addPseToCart', addPseToCart);
+document.addEventListener('removePseFromCart', removePseFromCart);
+
+async function getCartItem(e) {
+    const response = await fetch(window.GTM_ADD_TO_CART, {
+        method: "POST",
+        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
+        body: JSON.stringify({ pseId: e.detail.pse, quantity: e.detail.quantity })
+    })
+    return await response.json();
+}
+
+async function addPseToCart(e) {
+    const resultJson = await getCartItem(e);
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({ ecommerce: null });
+    window.dataLayer.push({ event: 'add_to_cart', ecommerce: JSON.parse(resultJson) });
+}
+
+async function removePseFromCart(e) {
+    const resultJson = await getCartItem(e);
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({ ecommerce: null });
+    window.dataLayer.push({ event: 'remove_from_cart', ecommerce: JSON.parse(resultJson) });
+}
+
+
+
+
diff --git a/templates/frontOffice/default/assets/js/getItem.js b/templates/frontOffice/default/assets/js/getItem.js
new file mode 100644
index 0000000..4c91eee
--- /dev/null
+++ b/templates/frontOffice/default/assets/js/getItem.js
@@ -0,0 +1,39 @@
+document.addEventListener('DOMContentLoaded', () => {
+    if (!window.dataLayer) return;
+
+    document.querySelectorAll('a.ProductCard, .ProductCard a').forEach(product => {
+        product.addEventListener('click', processLinkClick, false);
+    });
+});
+
+async function processLinkClick(e) {
+    const targetUrl = e.currentTarget?.href ?? e.currentTarget.getElementsByTagName('a')[0]?.href;
+
+    // Nothing to track and nothing to restore: let the browser handle the click.
+    if (!targetUrl) return;
+
+    e.preventDefault();
+
+    // The click must always navigate: a slow, failing or unreachable tracking endpoint
+    // cannot be allowed to swallow it.
+    try {
+        const response = await fetch(window.GTM_GET_ITEM_URL, {
+            method: 'POST',
+            headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
+            body: JSON.stringify({ productUrl: targetUrl }),
+            signal: AbortSignal.timeout(2000)
+        });
+
+        if (response.ok) {
+            window.dataLayer.push({ ecommerce: null });
+            window.dataLayer.push({
+                event: 'select_item',
+                ecommerce: { items: JSON.parse(await response.json()) }
+            });
+        }
+    } catch (error) {
+        console.error('GTM select_item tracking failed', error);
+    } finally {
+        window.location.href = targetUrl;
+    }
+}
diff --git a/templates/theme-hook/addToCart.html.twig b/templates/theme-hook/addToCart.html.twig
new file mode 100644
index 0000000..704932d
--- /dev/null
+++ b/templates/theme-hook/addToCart.html.twig
@@ -0,0 +1,4 @@
+<script>
+    window.GTM_ADD_TO_CART = '{{ path('googletagmanager_product_data_get_cart_item') }}';
+</script>
+<script src="{{ module_asset('GoogleTagManager', 'assets/js/addToCart.js') }}"></script>
diff --git a/templates/theme-hook/getItems.html.twig b/templates/theme-hook/getItems.html.twig
new file mode 100644
index 0000000..188a528
--- /dev/null
+++ b/templates/theme-hook/getItems.html.twig
@@ -0,0 +1,4 @@
+<script>
+	window.GTM_GET_ITEM_URL = '{{ path('googletagmanager_product_data_get_item') }}';
+</script>
+<script src="{{ module_asset('GoogleTagManager', 'assets/js/getItem.js') }}"></script>
diff --git a/templates/theme-hook/noscript.html.twig b/templates/theme-hook/noscript.html.twig
new file mode 100644
index 0000000..ea5b896
--- /dev/null
+++ b/templates/theme-hook/noscript.html.twig
@@ -0,0 +1,5 @@
+<!-- Google Tag Manager (noscript) -->
+<noscript>
+	<iframe src="https://www.googletagmanager.com/ns.html?id={{containerId}}" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+</noscript>
+<!-- End Google Tag Manager (noscript) -->
diff --git a/templates/theme-hook/push.html.twig b/templates/theme-hook/push.html.twig
new file mode 100644
index 0000000..f7868b9
--- /dev/null
+++ b/templates/theme-hook/push.html.twig
@@ -0,0 +1,5 @@
+<script>
+	window.dataLayer = window.dataLayer || [];
+	dataLayer.push({ ecommerce: null });
+    dataLayer.push(JSON.parse('{{ data|raw }}'));
+</script>
diff --git a/templates/theme-hook/script.html.twig b/templates/theme-hook/script.html.twig
new file mode 100644
index 0000000..545db03
--- /dev/null
+++ b/templates/theme-hook/script.html.twig
@@ -0,0 +1,14 @@
+<!-- Google Tag Manager -->
+<script>
+    (function (w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
+        var f = d.getElementsByTagName(s)[0],
+            j = d.createElement(s),
+            dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', '{{ containerId }}');
+</script>
+<!-- End Google Tag Manager -->