请求修复：网站电话事件上报Google Analytics失效问题

Hey there! I’ve run into this exact problem dozens of times since Google sunset the old Universal Analytics (UA) analytics.js library—let’s get your phone click tracking working again with the modern GA4 setup.

Why Your Old Code Broke #

Chances are your original code relied on analytics.js, the legacy library for Google Universal Analytics. Google stopped collecting UA data in July 2023, and has since discontinued support for the library entirely. That’s why your phone event tracking stopped working. The fix is to switch to Google Analytics 4 (GA4) using the gtag.js library, which is the current supported standard.

Step 1: Make Sure GA4’s gtag.js is Loaded #

First, confirm your site has the GA4 base script installed. If not, add this to your site’s <head> section (replace G-YOUR_GA4_MEASUREMENT_ID with your actual GA4 ID from your Google Analytics account):

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

  gtag('config', 'G-YOUR_GA4_MEASUREMENT_ID');
</script>

Step 2: Replace Your Phone Event Tracking Code #

Here’s a drop-in replacement for your old click-tracking code, optimized for GA4:

// Track clicks on all tel: links
document.querySelectorAll('a[href^="tel:"]').forEach(phoneLink => {
  phoneLink.addEventListener('click', function(e) {
    // Send the event to GA4
    gtag('event', 'phone_call_clicked', {
      event_category: 'Phone Interactions',
      event_label: this.href.replace('tel:', ''), // Captures the phone number
      value: 1 // Optional: Set a value if tracking conversion worth
    });
  });

  // Optional: Add touchstart listener for mobile compatibility
  phoneLink.addEventListener('touchstart', function(e) {
    gtag('event', 'phone_call_clicked', {
      event_category: 'Phone Interactions',
      event_label: this.href.replace('tel:', ''),
      value: 1
    });
  });
});

Key Notes About the New Code: #

• phone_call_clicked: This is a custom event name—you can rename it to something that makes sense for your site (e.g., contact_phone_click).
• event_category & event_label: These are custom parameters that help you filter and analyze phone clicks in GA4’s reports.
• Mobile touch support: The touchstart listener ensures the event fires even if the user’s device navigates away before the click event triggers.

How to Verify It’s Working #

1. Open your GA4 account and go to Reports > Realtime—you should see the phone_call_clicked event pop up when you click a phone link.
2. Use Chrome’s Tag Assistant extension to debug and confirm the event is being sent correctly.

内容的提问来源于stack exchange，提问作者Dave Lalande