How do I add the GA4 ecommerce dataLayer to WooCommerce?

Question

I am busy with implementing the GA4 ecommerce dataLayer in my WooCommerce site. There are a few plug-ins which can implement the dataLayer for Universal Analytics (e.g. this one, for $99 per year), but I can't find anything for GA4.

This is the dataLayer for the purchase event (source):

dataLayer.push({
  'event': 'purchase',
  'ecommerce': {
    'purchase': {
      'transaction_id': 'T12345',
      'affiliation': 'Online Store',
      'value': '35.43',
      'tax': '4.90',
      'shipping': '5.99',
      'currency': 'EUR',
      'coupon': 'SUMMER_SALE',
      'items': [{
        'item_name': 'Triblend Android T-Shirt',
        'item_id': '12345',
        'item_price': '15.25',
        'item_brand': 'Google',
        'item_category': 'Apparel',
        'item_variant': 'Gray',
        'quantity': 1,
        'item_coupon': ''
      }, {
        'item_name': 'Donut Friday Scented T-Shirt',
        'item_id': '67890',
        'item_price': '33.75',
        'item_brand': 'Google',
        'item_category': 'Apparel',
        'item_variant': 'Black',
        'quantity': 1
      }]
    }
  } 
});

Can anyone help me out to put the variables in it?

Answer 1

Found it already i guess:

    <script type='text/javascript'>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'purchase',
'ecommerce': {
'purchase': {
  'transaction_id': '<?php echo $order->get_order_number(); ?>',
  'affiliation': '<?php echo get_option("blogname"); ?>',
  'value': '<?php echo number_format($order->get_subtotal(), 2, ".", ""); ?>',
  'tax': '<?php echo number_format($order->get_total_tax(), 2 ,".", ""); ?>',
  'shipping': '<?php echo number_format($order->calculate_shipping(), 2 , ".", ""); ?>',
  'currency': 'EUR',
   <?php if($order->get_used_coupons()) : ?>
  'coupon': '<?php echo implode("-", $order->get_used_coupons()); ?>',
  <?php endif; ?>
  'items': [
  <?php
                                 foreach ( $order->get_items() as $key => $item ) :
                                    $product = $order->get_product_from_item($item);
                                    $variant_name = ($item['variation_id']) ? wc_get_product($item['variation_id']) : '';
                                ?>
                                {
    'item_name': '<?php echo $item['name']; ?>',
    'item_id': '<?php echo $item['product_id']; ?>',
    'item_price': '<?php echo number_format($order->get_line_subtotal($item), 2, ".", ""); ?>',
    'item_brand': '',
    'item_category': '<?php echo strip_tags($product->get_categories(', ', '', '')); ?>',
    'item_variant': '<?php echo ($variant_name) ? implode("-" , $variant_name->get_variation_attributes()) : ''; ?>',
    'quantity': <?php echo $item['qty']; ?>,
    'item_coupon': ''
  },
  <?php endforeach; ?>
  ]
}
});
</script>

Answer 2

Just in case anyone else needs a WordPress plugin that can integrate WooCommerce with GA4. There is a solution that can do that using Google Tag Manager:

https://wordpress.org/plugins/gtm-ecommerce-woo/

It covers the purchase and add_to_cart events and takes care of populating those values.