Google Analytics gtag.js - Ecommerce - Sending product click Event

Question

Decided to use Google's recommended new method of installing Google Analytics: "gtag.js"

I've followed the instructions for measuring "Enhanced Ecommerce" and as part of that build, here's my code to measure a product click:

gtag('event', 'select_content', {
  "content_type": "product",
  "items": [
    {
      "id": "TEST-SKU-1",
      "name": "Test Product",
      "list_name": "Home Page",
      "category": "For Testing",
      "list_position": 1,
      "price": 8.76
    }
  ]
});

I then added that code on the link to the product like this:

<a href="/for-testing/test-product-1" onclick="gtag('event', 'select_content', { 'content_type': 'product', 'items': [{ 'id': 'TEST-SKU-1', 'name': 'Test Product', 'list_name': 'Home Page', 'category': 'For Testing', 'list_position': 1, 'price': 8.76 }] });">

It shows up inside Google Analytics Events (it works), but it shows up with an Event Category/Action/Label of "engagement"/"select_content"/"product". After doing some research, it looks like Google is auto-magically building the Event for me, based off of some new "standard way" they want to do things :-(

QUESTION: How do I override the gtag.js defaults for Event Category/Action/Label it uses when I send a "Product Click"?

NOTE: I realize that I can swap out gtag.js for analytics.js or I could use jQuery's post() method and send this directly via Google Analytics' Measurement Protocol but that is NOT my question... I need to figure out "the new correct non-hacky way of doing this"... preferably.

Pseudo Pseudo · Accepted Answer · 2020-06-28T22:48:39

After lots of hacking, inspecting, and painfully time consuming trial & error, I think I got it figured out... One word of caution: This is what I came up with after finding zero info on this subject, so no, I'm NOT 100% certain I've considered everything here. If you know something I don't, please comment below. For those going as insane as I did trying to figure this out, here's what I'm doing:

When you install Google Analytics via the new/default "gtag.js" it actually installs the old "analytics.js" stuff behind the scenes, and it looks like the "gtag.js" is using the "analytics.js" to run code, kinda like a dumbed down wrapper for it.

So what this means is that if you don't like how "gtag.js" is doing something, without editing/hacking/installing/changing anything... all of the old "analytics.js" stuff is available, as long as you remember to do a ga('create'... before the command.

So as a very basic example, here's how you would send a "Test" Event on a link click:

<a href="/" onclick="ga('create', 'UA-123456-7', 'auto'); ga('send', 'event', 'TestCategory', 'TestActionGoHome', 'TestLabel');">Go Home Test</a>

So that's the answer to my original question: Do it the "old way" because it is the "old way" under the hood anyway.

Google Analytics gtag.js - Ecommerce - Sending product click Event

1 Answers