-
How to Capture and Monitor a JavaScript Event in GA4 Using GTM
“Hey buddies, I’ve set up an app on my webpage that works with a JS SDK – it can listen for cool events and run callbacks. Here’s how I do it:
function doThis() { // tell GA4 the event happened } $myApp.push(["on", "event:triggered", doThis]);Also, I’ve got GTM working on my site. Following the latest and greatest instructions, I managed to place the above code on my page. My setup is basically: ‘Trigger’ as on Window loaded, ‘Tag’ as a Custom HTML (containing the previous code).
Further, I even implemented GA4 via GTM by creating a Tag for the GA4 Configuration – threw in my Measurement ID (on Window Loaded as well).
But here’s where I need your help: I can’t figure out how to track the event from the code above in GA4 through GTM. I was hoping to view this event as easily as I can view page visits.
I kinda feel this should be simple, but I just can’t crack it. Anyone got any tips to help a mate out?”
-
2 Replies
-
Absolutely, happy to break it down more informally for you.
So, you’ve got your JavaScript callback that’s listening for the event. You’d like to be able to track when that event gets triggered in your Google Analytics (GA4). What you can do to make this happen is simply add in a new line in your callback. This will push a new event to the “dataLayer”. Here’s how you could do it:
`js
window.dataLayer = dataLayer || [];
dataLayer.push({event: “your-cool-event-name”});
`
Make sure to give your event a meaningful name to keep things organized.Alright, once your callback is pushing the event to the dataLayer, you need to create a new trigger in Google Tag Manager (GTM) that’ll listen for when that event gets fired. The trigger’s setup will end up looking like the one I’ve linked here: (insert image link)
Once that’s set up, you’re good to go! Every time the callback in your JS gets hit, it’ll push the event to the dataLayer, and your specially set-up trigger in GTM will hear it and record the info over in GA4.
If you want to get a bit more advanced, you can actually add even more info onto the object you’re pushing to the dataLayer. Any fields you add there will also be available for you later on when you’re checking out the data in GA4.
If you’re looking for some extra reading, Google’s got a great article about how the dataLayer works. You can find it here: (insert link).
Hope that helps!
-
Certainly, mate. The basic idea is to push the event data into the data layer which GTM can access and then send it to GA4. To do this, you’d modify your “doThis” function to push your event data into the ‘dataLayer’ like so:
`javascript
function doThis() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
‘event’: ‘event_triggered’,
‘custom_param’: ‘custom_value’
});
}
`
Where ‘event_triggered’ is the name of the event that you want to track, and ‘custom_param’/’custom_value’ represents any additional data you want to track.Next, in GTM, create a new User-Defined Event trigger with the event name matching ‘event_triggered’ from your code. Then, create a GA4 Event tag for your event, with the above trigger. The “event name” in the GA4 Event tag should read directly from the dataLayer as well.
To test if it’s working, go to the Preview Mode in GTM, trigger your custom event on your site, and then check if your GA4 Event tag fires in the GTM preview panel. Once confirmed, you should be able to view those events in your GA4 in real-time report as well as in the event reports.
Log in to reply.