How can I track and send custom events with the new Google Analytics 4 (gtag.js)?

Question

I have an old website that's using the old Google Analytics code from last decade, and I need help using the new GA4.

Old Code (2016)

To send custom events and pageviews to Google, I would use the global ga() function from their <script> snippet:

// Event
ga('send', 'event', {
    eventAction: 'click',
    eventCategory: 'social',
    eventLabel: 'twitter'
});

// Pageview
ga('send', {
    hitType: 'pageview',
    page: 'Video page',
    title: 'Intro video'
});

New Code (2022)

Google Analytics says that all old properties will stop working on July 1, 2023, so we need to switch to the new Google Analytics 4 property, the <script> snippet in the header has changed a bit, now it creates gtag():

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

But upon trying to use gtag("send") like I used to, it looks like nothing gets transmitted to Google anymore. I've tried looking it up, but all tutorials/articles still demonstrate the old approach. How can I send custom events using the new GA4?

Quixote

Answer 1

Instead of using "send", the recommended name is "event" official docs. Also, the recommended parameters should use an underscore, like event_category:

// Send custom event
gtag("event", "click", {
    "event_category": "social",
    "event_label": "twitter"
});

// Pageview event
gtag('event', 'page_view', {
    "page_title": "landing-page",
});

If you're manually sending custom pageviews, make sure you disable the initial pageview upon landing to avoid counting it twice, as explained in the "Manual Pageviews" section by adding send_page_view: false to your initial config call in the header <script>:

gtag('config', 'TAG_ID', {
    send_page_view: false
});

You can check that something is being sent locally by opening your Network Tab and looking at the payload of each collect network request:

Sources:

• Events documentation
• Pageviews documentation

Quixote

This seem to work fine, but how do you see the event_category and event_label in GA4? It seems that only the action name is visible everywhere. – Italian

Answer 2

This is the syntax to send an event with GA4:

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

Here you can see the documentation for the events.

Alternatively, if you want to test the hits and if the events are being sent with which data, you can use the Google Tag Assistant to review that.

Goforth

Should this work because the event_label, i.e, a encoded URL is (Not Set) in GA. I want to see URL's in the is report: gtag('config', 'UA-123456789-1'); gtag('event', 'Page Load', { 'event_category': 'JavaScript Widgets', 'event_label': 'testdomain.com/test-iframe', 'value': 1 }); – Unstrap

my gtag.js is loaded in iframe but doesn't call https://www.google-analytics.com/g/collect after, while it calls that collection point normally in regular webpages – Piece

This seem to work fine, but how do you see the event_category and event_label in GA4? It seems that only the action name is visible everywhere. – Italian