如何使用新的 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?

Answer 1

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:

Sources:

• Events documentation
• Pageviews documentation

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.