How to programatically send an event to GA4 without Google Tag Manager?

Question

I would like to send a custom event to the new Google Analytics programatically, without defining it in the GTM first.

I am using Google Tag Manager and according to this article: https://developers.google.com/analytics/devguides/collection/ga4/translate-events

It is only possible by defining an event in the GTM itself. I can not do that and would like to keep doing this using the old method, where you could just do:

        if ("ga" in window) {
            var tracker = ga.getAll()[0];
            if (tracker) {
                tracker.send("event", eventCategory, eventAction);
            }
        }

How can I achieve this effect using JavaScript with the new Google Analytics (GA4)?

window.gtag is undefined as I'm using GTM, and window.ga is undefined as I'm using GA4. The only tag configured in the GTM is "Google Analytics: GA4 Configuration".

Cumae

Answer 1

Another way of doing it (especially if you use the GTM Configuration Tag to deploy your GA4 over your site, as gtag requires you to use the gtag.js deployed) is through GTM dataLayer:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
    'event': 'aSpecificEventName',
    'form_type_DL': 'contact_us'
});

And then configure in GTM a new variable 'form_type_DL', configure a new trigger based on a custom event, defining the event name as (in my case) 'aSpecificEventName' and finally, set in GTM a new GA4 Event tag, with your new trigger recently created sending the event name and event parameters as you like, for example one of the parameters can be form_type and its value would be {{form_type_DL}}, the one sent through our dataLayer push that will contain 'contact_us'.

So the right order of the steps would be:

1. Define your new variables in GTM with a specific variable name(only if you need to send a specific value to GA4)
2. Create and configure your custom event-driven trigger with a specific event name
3. Create a new GA4 Event-driven tag adding your previously-created trigger and adding your parameter value(of any event parameter you decide to use if ever needed) as the variable previously created.
4. Finally, set in your code the dataLayer push, making sure the event value is the same as the trigger event name and the variables matches your variables.

Going further on this explanation to have a better understanding of what we do, if we take a closer look at the gtag.js code we are suggested to manually install:

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XYZXYZXYZ"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-XYZXYZXYZ');
    </script>

The gtag() function we are supposed to do to push a GA4 event does a dataLayer.push(), so it's a way of simplifying/automating the process I first explained.

https://developers.google.com/analytics/devguides/collection/ga4/events?client_type=gtag https://support.google.com/tagmanager/answer/7582054?hl=en

Salot

Answer 2

Inspired by Dhanan Jaya Kumar's answer, but used snake case since this seems to be what GA4 expects. For example, page titles will only appear in the real time view if snake case is used.

gtag("event", "page_view", {
    page_title: "test",
    page_location: window.location.href
});

See documentation: https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag

Radiation

Answer 3

You have to use this syntax (and you have to use gtag snippet in page):

gtag('event', 'login', {
  'method': 'Google'
});

https://developers.google.com/analytics/devguides/collection/ga4/events?client_type=gtag

Timehonored

Have you tried it and it didn't work? – Timehonored

Answer 4

These are the steps I've followed to implement in Google Analytics 4

gtag("event", "Pageview", {
    pageTitle: page.title,
    date: moment(new Date()).format("DD-MM-YYYY HH:mm:ss")
});

Quickstep