How to add Data Layers for GTM using JS without mixing with HTML

[compsoul.dev]

Hi everyone,

I’m trying to add data layers for GTM using JavaScript, without mixing the JS layer with the HTML layer, which is why I’ve taken this approach. However, it seems like not every layer can be added this way.

My ideal solution would be to create a separate .tpl file for each event, where I could fetch the data via AJAX after the event is triggered and send it to Google. However, I implemented a less labor-intensive approach, and I’m facing a problem with the final event: the "purchase" event. I'm not sure how to fetch that data purely from the JS layer.

Does anyone have any ideas on how to solve this? I know I could add the necessary code in the .tpl file, but that’s my last resort and not the most desirable solution.

Here are the solutions I’ve used for other events:
 

(function() {
  prestashop.on("updateCart", function (event) {
      const cartProducts = event.resp.cart.products,
            addedProductId = Number(event.resp.id_product),
            addedProductAttributeId = Number(event.resp.id_product_attribute),
            addedQuantity = event.resp.quantity,
            reason = event.reason.linkAction;
            
      const addedProduct = cartProducts.find(function(product) {
          return Number(product.id_product) === addedProductId && 
                 Number(product.id_product_attribute) === addedProductAttributeId;
      });

      if (addedProduct && reason == "add-to-cart") {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
              'event': 'add_to_cart',
              'ecommerce': {
                  'items': [{
                      'item_name': addedProduct.name,
                      'item_id': addedProduct.id_product,
                      'item_variant': addedProduct.id_product_attribute,
                      'price': addedProduct.price_amount,
                      'quantity': addedQuantity,
                  }]
              }
          });

          console.log('Dane produktu zostały dodane do Data Layer:', window.dataLayer);
      }
  });
})();

(function() {
    document.body.addEventListener('click', function(event) {
        if (event.target.href && prestashop.urls && prestashop.urls.pages && prestashop.urls.pages.order && event.target.href === prestashop.urls.pages.order) {
            
            if (prestashop.cart && prestashop.cart.products) {
                const cartProducts = prestashop.cart.products;
                const totalValue = prestashop.cart.totals.total.amount;
                const currency = prestashop.currency.iso_code;
                const coupon = prestashop.cart.vouchers.length > 0 ? prestashop.cart.vouchers[0].name : '';
  
                window.dataLayer = window.dataLayer || [];
                window.dataLayer.push({
                    'event': 'begin_checkout',
                    'ecommerce': {
                        'currency': currency,
                        'value': totalValue,
                        'coupon': coupon,
                        'items': cartProducts.map(function(product) {
                            return {
                                'item_name': product.name,
                                'item_id': product.id,
                                'coupon': coupon,
                                'discount': product.reduction || 0,
                                'item_brand': product.manufacturer_name,
                                'item_category': product.category,
                                'item_variant': product.id_product_attribute,
                                'price': product.price_amount,
                                'quantity': product.cart_quantity
                            };
                        })
                    }
                });
  
                console.log('Zdarzenie begin_checkout zostało wypchnięte do Data Layer', window.dataLayer);
            }
        }
    });
  })();

(function() {
  prestashop.on("updateCart", function (event) {
      const reason = event.reason.linkAction,
            resp = event.resp;

      if (reason == "delete-from-cart" && resp.success) {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
              'event': 'remove_from_cart',
              'ecommerce': {
                  'items': [{
                      'item_id': resp.id_product,
                      'item_variant': resp.id_product_attribute,
                  }]
              }
          });
      }
  });
})();

(function() {
  if (prestashop.page && prestashop.page.page_name === 'cart') {
      if (prestashop && prestashop.cart && prestashop.cart.products && prestashop.currency) {
          const cartProducts = prestashop.cart.products,
                totalValue = prestashop.cart.totals.total.amount,
                currency = prestashop.currency.iso_code;

          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
              'event': 'view_cart',
              'ecommerce': {
                  'currency': currency,
                  'value': totalValue,
                  'items': cartProducts.map(function(product) {
                      return {
                          'item_name': product.name,
                          'item_id': product.id,
                          'item_variant': product.id_product_attribute,
                          'price': product.price_amount,
                          'quantity': product.cart_quantity,
                          'item_url': product.url,
                          'item_brand': product.manufacturer_name,
                          'item_category': product.category
                      };
                  })
              }
          });
      }
  }
})();

(function() {
  const jsonScripts = document.querySelectorAll('script[type="application/ld+json"]');

  jsonScripts.forEach(function(script) {
      try {
          const jsonData = JSON.parse(script.textContent);

          if (jsonData['@type'] === 'ItemList') {
              window.dataLayer = window.dataLayer || [];
              window.dataLayer.push({
                  'event': 'view_item_list',
                  'ecommerce': {
                      'items': jsonData.itemListElement.map(function(item) {
                          return {
                              'item_name': item.name,
                              'item_url': item.url,
                              'position': item.position
                          };
                      })
                  }
              });

              console.log('Dane produktu zostały dodane do Data Layer:', window.dataLayer);
          }
      } catch (error) {
          console.error('Błąd parsowania JSON-LD:', error);
      }
  });
})();

(function() {
  const jsonScripts = document.querySelectorAll('script[type="application/ld+json"]');

  jsonScripts.forEach(function(script) {
      try {
          const jsonData = JSON.parse(script.textContent);

          if (jsonData['@type'] === 'Product') {
              window.dataLayer = window.dataLayer || [];
              window.dataLayer.push({
                  'event': 'view_item',
                  'ecommerce': {
                      'items': [{
                          'item_name': jsonData.name,
                          'item_id': jsonData.mpn || jsonData.sku,
                          'item_brand': jsonData.brand ? jsonData.brand.name : undefined,
                          'item_category': jsonData.category,
                          'price': jsonData.offers ? Number(jsonData.offers.price) : undefined,
                          'currency': jsonData.offers ? jsonData.offers.priceCurrency : undefined,
                          'item_url': jsonData.offers ? jsonData.offers.url : undefined,
                          'item_image': jsonData.offers && jsonData.offers.image ? jsonData.offers.image[0] : undefined
                      }]
                  }
              });

              console.log('Dane produktu zostały dodane do Data Layer:', window.dataLayer);
          }
      } catch (error) {
          console.error('Błąd parsowania JSON-LD:', error);
      }
  });
})();

Thanks in advance for any suggestions!