Back to homepage

GA4 with GTM

Published on 26/07/2021
GTM? ga? gtag? GA4? Which way is the right/better way?

Cool…

In a nut shell, to make GA tracking with GTM, you'll connect many bits and parts. GA and GTM are in revolution so things are mixed with the old and new. Also their docs are referencing to each other. So it's actually quite confusing - at least to me.

What you'll probably want to read about

I've known some GTM, GA and dataLayer knowledge already. But when I got a task to solve why revenue wasn't tracked in GA, I couldn't give the straight answer. Part of the reason was my colleague pointed to a bit wrong direction - I was asked to convert the value of order total from string to number. I achieved that but the test result shows that wasn't the problem - despite we got an instruction from Google help desk saying the data type may be the problem.

To achieve revenue tracking, you are gonna follow one of these 2 official articles depending on which tool you'll go with.

GA: https://developers.google.com/analytics/devguides/collection/ga4/ecommerce
GTM dataLayer: https://developers.google.com/tag-manager/ecommerce-ga4
GTM UA Tag

GA / gtag

BUT! Maybe have a look at the GA method with gtag first cuz I think it's how things work behind the scene. In the code block below, you can see gtag() is called to create a purchase event with JSON-ish data.

gtag is from the Google Analytics Universal Analytics JavaScript library. I assume you've had gtag installed. The code block below can push a purchase event to GA.

gtag("event", "purchase", {
  currency: "USD",
  transaction_id: "T_12345",
  value: 21.09,
  affiliation: "Google Store",
  coupon: "SUMMER_FUN",
  shipping: 3.33,
  tax: 2.22,
  items: [
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 5,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "green",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    },
    {
      item_id: "SKU_12345",
      item_name: "Stan and Friends Tee",
      affiliation: "Google Store",
      coupon: "SUMMER_FUN",
      currency: "USD",
      discount: 2.22,
      index: 7,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Adult",
      item_category3: "Shirts",
      item_category4: "Crew",
      item_category5: "Short sleeve",
      item_list_id: "related_products",
      item_list_name: "Related Products",
      item_variant: "black",
      location_id: "L_12345",
      price: 9.99,
      quantity: 1
    }
  ],
});

What is GTM?

GTM is Google Tag Manager. To start using GTM, you also place some code snippets to your website template so GTM get's loaded on wherever it'll be needed. GTM is like a manager or container of JS plugin, service - especially tracking services like Google Analytics and Hotjar. Triggers can execute tags to execute services.

dataLayer and Tags

In this official article you'll see it's recommended to let dataLayer to carry data. However, custom JavaScript is also OK.

Similar to what you've seen above, here you push data to dataLayer by .push() method.

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

That's not done yet! Then you'll need to create a Tag to pick up data in dataLayer. By the way, you may now realize that Tags can pick up data in custom JavaScript variable too. For example, you can put order total to window.customerOrderObject.total.

But in this example I use dataLayer and here's how you'll set up the tag.

purchase tag.png

Parameter names should match what ever you see IN GTAG code snippet. That means, in your dataLayer, the variable name of the property for order total doesn't have to be value as shows in the example. It can be anything! Then you'll just need to connect the right property in dataLayer or custom JavaScript to the tag.

In this case, you can see {{DL - Order Total}}. Whatever wrapped in double curly brackets are GTM variable and here's how I set it up in the case at my work.

variable.png

There's a mysterious script I didn't find but that script pushes something like this to dataLayer.

{
  "event": "purchase",
  "eventModel": {
    ...
    total: 123
    ...
  }
}

So I had to set up the tag and variable like that to make it work.

I believe so far with this example and some compare and contrast you can understand a bit better of GA, GTM, dataLayer and how to connect them to make things work. In a word, things need to match so that data can flow to the wanted place.


Be the first
to get my latest blog
Comments