SQL for Ecommerce Owners – Part 2. – Tag your site

First things first. You have to add Google Analytics 4 events to your site, because GA4 have the ability to send raw data to BigQuery (GA360 can do it, too, but it is a bit pricey 🙂 )

If you don’t have Google Analytics 4 property, just go to admin and create a new property. By default it is a GA4, so just add one.

The following steps assume you have Google Tag Manager on your site and have implemented EnhancedEcommerce by dataLayer. We reuse the dataLayer structure and create the new schema for GA4. It almost similar, but needs some modification.

If you don’t use Google Tag Manager just skip this post and stayed tuned for the next one, where we connect Google Analytics 4 with Google BigQuery. For GA4 tagging, just click on this link.

To convert the existing Enhanced Ecommerce dataLayers to GA4 schema you should add Simo Ahava’s custom variable template. It recognizes and converts automatically the existing dataLayer to the new schema.

It is simple, here is mine:

This variable adds the necessary modifications to the dataLayer. So the next step is to read it.

It generates the item array inside the ecommerce dataLayer, so here is how we can retrieve the data

Not so complicated, thanks Simo! 🙂

New datalayer events

In order to read the right data from items array (this is from the custom variable template) you have to create new dataLayer events. Why? Because at the moment when the enhanced ecommerce event fired the items parameter is not available, so we have to add some new one which fires later, so the items array has data.

Not a rocketscience, just capture the enhanced ecommerce events and transform it to GA4 event names.

Here it is the custom HTML you have to add:

I use GTM4WP, so the EEC event names comes from the WP plugin. If you have WordPress/WooCommerce I highly recommend to use it.

I’ve just added these few EEC events, you can add more or less.

The Trigger contains the EEC event names listed in the IF-s.

Here it is the script:

<script>
var event = {{Event}};

if ( event ) {
  if (event == "gtm4wp.addProductToCartEEC"){
    dataLayer.push({'event': 'add_to_cart'});
  }
  if (event == "gtm4wp.removeFromCartEEC"){
    dataLayer.push({'event': 'remove_from_cart'});
  }
  if (event == "gtm4wp.productClickEEC"){
    dataLayer.push({'event': 'select_item'});
  }
  if (event == "gtm4wp.orderCompletedEEC"){
    dataLayer.push({'event': 'purchase'});
  }
}
</script>

If you have it, “just” create the new triggers and tags.

The GA4 event tags

The custom variable provides the dataLayer with the events, so let’s use them.

The example below is the select item (when a user clicks on an item), but you have repeat the setup on every other event.

Start with the trigger

Now, we have the trigger, we should create the tag.

The Event name is ‘select_item’ the parameter key is ‘item’ and the value of it the variable we’ve created earlier ‘dL – ecommerce.items’

Hit save and test it!

It looks OK, so repeat the steps on every other event and publish the container version.

Purchase

The purchase it a bit different, the items array is not enough, we should add more parameters

See you on the next episode 🙂