Inline onclick event tracking about minimal-analytics

[wpsumo]

@jahilldev Many thanks, I think it makes sense to stick to new track{}. When you look how the data is displayed in GA4 it aligns better.

[wpsumo]

@DavidKuennen @idarek can I bug you guys as well in this.

Above should work with the normal GA 4 script. Wouldn't it work out of the box with minimal as well? No auto tracking just tracking sent on click. Or is there something else that is missing in @jahilldev version?

[jahilldev]

Hey @wpsumo,

Provided you've set defineGlobal: true in the config options for @minimal-analytics/ga4, you should be able to do something like the following:

<a href="https://website.com" onclick="track({ /*[...]*/ })">Click</a>

Obviously providing the relevant options to track that are required (see docs for schema).

It's also worth noting that this package automatically records generic anchor and button clicks for analysing how users are interacting with your site. If you look through your events you should see something like the following:

Each click event is accompanied by generic attributes defined on that element, such as class, id and href. This can be used to build detailed reports on exactly which elements users are interacting with via clicks.

Hope that helps 👍

[wpsumo]

@jahilldev Many thanks very helpful.

It's also worth noting that this package automatically records generic anchor and button clicks for analysing how users are interacting with your site. If you look through your events you should see something like the following:

Each click event is accompanied by generic attributes defined on that element, such as class, id and href. This can be used to build detailed reports on exactly which elements users are interacting with via clicks.

Thanks but not even made the switch from universal, was sticking as long as I could! :D This would be too generic for the use case of these events, but thanks for sharing, all btn or hrefs have the same class for example. What we are coming from is that we track events like:

Not exactly like below but get the idea
Action = which link in the list /list/brand1/
Label = Where on the page which CTA specially
Category = A static value of position so we can track and filter in different way of CTR on the /brand/ and individually how the brand behaves depending on the position.

So converting this to track would be something like this right?

The new track confuse a bit, but just to get used and test it. But coming from Universal and the normal GA script to insert action and label and category directly as the value and not having a label for each event and then value.

<a href="https://website.com" onclick="track({ type: 'user_conversion', event: { 'ep.placement_cta': example cta, 'epn.position: '4', 'ep.brand: '/brand-example/', });">Click</a>

[jahilldev]

Hey @wpsumo,

If you'd prefer to stick with the standard GA way of doing explicit tracking calls, I posted a compatibility function in another issue, see below:
#30 (comment) and #30 (comment).

That way, you can continue using the standard G tag method but using the minimal script.

If you're not using build tooling, or a node environment, you can swap the import at the very top for the globally defined track function mentioned above. E.g:

const GA_ID = 'G-XXXXXXXX';

window.gtag = (method, ...args) => {
  if(method === 'config' && args[0] === GA_ID) {
    window.track(GA_ID) // page_view

    return;
  }

  /*[...]*/
}

[wpsumo]

@jahilldev Many thanks, just not following the way to keep using standard google tag methods for events tracking while using minimal script as.

Am I understanding it like this and autotrack is needed if I run it locally?

So also like this :

window.minimalAnalytics = {
  trackingId: 'G-XXXXXXXXXX',
  autoTrack: true, // <-- init tracking
};

const GA_ID = 'G-XXXXXXXX';

window.gtag = (method, ...args) => {
  if(method === 'config' && args[0] === GA_ID) {
    track(GA_ID) // page_view

    return;
  }

  if(method === 'event') {
    track({ type: args[0], event: args[1] }); // custom event

    return;
  }
  
  /* etc, etc :) */
};

And then I can use:

gtag('event', 'login', {'ep.user': 'John Smith'});

Still recommended to use ep. and epn.?

<a class="button" href="#" onclick="gtag('event', <action>, {
		  'event_category': <category>,
		  'event_label': <label>
		});">
	<span class="button_label">Start now
	</span>
</a>

[jahilldev]

Hey @wpsumo,

Yes, you'll need defineGlobal: true (to access window.track) and autoTrack: true if you want page views to be automatically recorded.

<script>
  window.minimalAnalytics = {
    trackingId: 'G-XXXXXXXXXX',
    autoTrack: true,
    defineGlobal: true,
  };
</script>

And yes, you'll still need to prefix all event details with either ep. (string) or epn. (number) to ensure GA correctly parses those values.

The second link I posted is from another user that shared his working solution, which handles the value type for you:
#30 (comment)

It's worth noting that UA and GA4 handle events very differently; There is no action or category, rather just events with attached meta data (ep.brand, for example). I believe there are some good articles out there that explain how GA4 has changed, and how best to collate reports based on these events within the GA4 UI.

There's a bit of a learning curve, so good luck!

[jahilldev]

Great, sounds good. I'm going to close this issue for now, feel free to open another if you need to 👍