9

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?

2 Answers 2

16

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:

3

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.

2
  • 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 }); Sep 2, 2022 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 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.