14

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?

M -
  • 26,908
  • 11
  • 49
  • 81

2 Answers2

25

Instead of using "send", the recommended name is "event" see here for official docs. Also, the recommended parameters should use underscore, like event_category (although you could use your own custom ones):

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

// Pageview
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', 'X-XXX123456', {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:

enter image description here

Sources:

M -
  • 26,908
  • 11
  • 49
  • 81
  • 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. – ZTefter Jun 05 '23 at 14:26
5

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.

Rod
  • 349
  • 3
  • 10
  • 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': 'https://www.testdomain.com/test-iframe', 'value': 1 }); – James Wilson Sep 02 '22 at 22:22
  • 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 – Dee Jan 11 '23 at 14:09
  • 2
    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. – ZTefter Jun 06 '23 at 06:13