GTM - Add to cart event tracking for Shopify

index.html

<!-- Example button element. Note class "product-add-to-cart" is not all button elements  -->
<button type="button" class="button button-green button-block product-add-to-cart">Add to cart</button>

<script>
  // Global DataLayer declaration
	window.dataLayer = window.dataLayer || [];

	// Fetch all Add to cart button elements
	var AddToCartButtons = document.querySelectorAll('.<GLOBAL_ATC_BUTTON_CLASS>');

	// Add event listener to each button element
	AddToCartButtons.array.forEach(addToCartButton => {

		// Listen to button click event
		addToCartButton.addEventListener('click', function(event) {
			window.dataLayer.push({ 'ecommerce': null });

			// Push event info
			window.dataLayer.push({
			'event': 'add_to_cart',
			'ecommerce': {
					'items': [{
					'item_id': '{{ product.id }}',
					'item_name': '{{ product.title | remove: "'" | remove: '"' }}',
					'item_brand': '{{ product.vendor | remove: "'" | remove: '"' }}',
					'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}',
					'item_variant': '{{ product.selected_variant.sku }}',
					'currency': '{{ shop.currency }}',
					'price': '{{ product.price  | times: 0.01}}'
					}]
				}
			});
		})
	});
</script>