JS | GA4 ecommerce example lite

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
  <title>Title</title>

<script>
dataLayer = window.dataLayer || [];
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'CAD',
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Either name or ID is required, I prefer both
       'currency' : 'CAD',
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Widgets',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'currency' : 'CAD',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Spidgets',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
(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','GTM-XXX');
</script>

</head>


<body>

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

  <article>

   <header>
    <h1>Site name</h1>
    <h2>Tag line</h2>
  </header>
<dl>
    <dt>Triblend Android T-Shirt</dt>
    <dd>
        <ul>
            <li>Price: $15.55</li>
            <li>Category: Widgets</li>
            <li>ID: 12345</li>
        </ul>
        <button class="add_to_cart" data-item_id="12345">Add to cart</button>
    </dd>

    <dt>Donut Friday Scented T-Shirt</dt>
    <dd>
        <ul>
            <li>Price: $33.75</li>
            <li>Category: Spidgets</li>
            <li>ID: 67890</li>
        </ul>
        <button class="add_to_cart" data-item_id="67890">Add to cart</button>  // data-item_id identifies the right data layer list item
    </dd>
</dl>
</article>


<script>
    var addTCs = document.querySelectorAll('.add_to_cart');
    var thisItemEcomm = {};

    function getMatchingEcommerceObject(x){
        var list = dataLayer[0].ecommerce.impressions; // TODO: use v5 from https://pastebin.com/kbRrkPJJ, because it's not guaranteed to be in dataLayer[0]
        for (var i=0; i<list.length; i++){
            if(list[i].id == x){
                thisItemEcomm = list[i];
            }
        }
        return thisItemEcomm;
    }


    addTCs.forEach(
        function(el){
            el.addEventListener(
                "mousedown",
                function(){
                    dataLayer.push({
                        'event' : 'add_to_cart',
                        'ecommerce' : getMatchingEcommerceObject(this.dataset.item_id)
                    });
                });
    });
</script>
  </body>

</html>