Inline onclick event tracking

[wpsumo]

@jahilldev Bugging you here in a new thread instead.

I look for a html onclick action, so we dont have to run the javascript event listner globally when its not needed. We run it only when the user clicks on the action.

@jahilldev Any process on inline event tracking like the onclick="ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel');"

Basically all I want is to do as you had in universal Event: ma.trackEvent('Category', 'Action', 'Label', 'Value')

How would it look for example on a link element.

<a href="https://example.com/link/">Visit</a>

or am I seeing this wrong and this should work?

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

[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!

[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.

[jahilldev]

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

[TykkiD]

So i read this conversation but still abit confused. This was my old script with ma.trackEvent, which is not working anymore.

if (typeof gtag === "function") {
gtag("event", "Click", { event_category: gaEvent });
} else if (typeof ga === "function") {
ga("send", "event", gaEvent, "Click");
} else if (ma && typeof ma.trackEvent === "function") {
ma.trackEvent(gaEvent, 'Click');
}

I tried to change this old MA code to this:

track({ type: 'Click', event: {'event_category': gaEvent} });

The "Click" works but the event does not sent the parameter. What am i doing wrong here?

[wpsumo]

@TykkiD @jahilldev Didn't play with the track() yet sorry so even I need to refresh my head regarding this.

But I think it would be good with a few code examples in the readme for the track() writing it out fully for better understanding.

You can continue using these old category and label an acitons just by using below I think.

gtag('event', 'click', {
      'event_category': 'category name',
      'event_label': 'event label name',
      'event_action': 'event action name'
    });

But it's better to use the new track() and use custom meta with ep and epn.

@jahilldev You understand it the best. Can you share a full code example of this? Is this correct?

// Simply by naming it the same as universal
track({ type: 'click', event: { 
'ep.category': 'category string',
'ep.label': 'label string',
'ep.action': 'action string',
'epn.custom_value': 123
 });

[wpsumo]

Do we also need to set it up as Custom definitions within GA > Admin > Property >Data display > Custom definitions ?