CODEWITHSUNDEEP
javascriptgoogle-analyticsgoogle-analytics-4
M -
M -

Reputation: 28497

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

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?

Upvotes: 23

Views: 23120

Answers (2)

M -
M -

Reputation: 28497

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:

enter image description here

Sources:

Upvotes: 33

Rod
Rod

Reputation: 419

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.

Upvotes: 9

Related Questions