Vue-Analytics异常排查：需按主机名切换GA ID但无数据上报

Hey there! Let’s dig into why your vue-analytics setup isn’t sending data beyond localhost—multi-domain, per-customer GA ID setups have a few common gotchas, so let’s walk through the fixes step by step:

1. Fix the Timing of GA ID Initialization #

vue-analytics loads early in the Vue lifecycle, so if you’re setting the GA ID after the plugin initializes, it won’t pick up the change. Try initializing the plugin dynamically before creating your Vue instance, like this:

import Vue from 'vue';
import VueAnalytics from 'vue-analytics';
import VueSession from 'vue-session';

// Map each customer domain to its GA ID
const gaIdMap = {
  'customer1.yourdomain.com': 'UA-XXXXXXXXX-1',
  'customer2.yourdomain.com': 'UA-XXXXXXXXX-2',
  // Add all your customer domains here
};

// Grab the current hostname and match it to the right GA ID
const currentHost = window.location.hostname;
const currentGaId = gaIdMap[currentHost] || 'UA-DEFAULT-FALLBACK'; // Add a fallback for unexpected domains

// Initialize dependencies first
Vue.use(VueSession);

// Now launch vue-analytics with the dynamic ID
Vue.use(VueAnalytics, {
  id: currentGaId,
  // Double-check auto-tracking is enabled (default is true, but confirm)
  autoTracking: {
    page: true,
    screenview: true
  },
  // Enable debug mode to see what’s happening in dev tools
  debug: {
    enabled: process.env.NODE_ENV !== 'production',
    trace: true,
    sendHitTask: process.env.NODE_ENV !== 'production'
  }
});

// Finally, create your Vue app instance
new Vue({
  el: '#app',
  // ... rest of your app config
});

2. Update GA Property Settings #

Even with the right ID, GA might block hits from external domains:

• Go to your GA property’s Admin > Property Settings > Tracking Info > Referral Exclusion List and add each customer domain. This prevents your own domains from being marked as referrals, which can stop hits from being recorded.
• Ensure "Allow manual tagging to override auto-tagging" is enabled (under Tracking Code settings) to avoid conflicts with auto-generated tags.

3. Check for CSP or CORS Blockages #

Strict Content Security Policy (CSP) rules on customer domains might block GA scripts or hit requests. Open your browser’s DevTools Console for CSP errors, and add these directives to your CSP header if needed:

script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com;
img-src 'self' https://www.google-analytics.com;
connect-src 'self' https://www.google-analytics.com;

4. Verify Hits Are Being Sent (DevTools Check) #

Open Chrome DevTools > Network tab, filter for collect (GA hits are sent to https://www.google-analytics.com/collect). Load your app on a customer domain and confirm:

• A /collect request is being sent
• The tid parameter in the request matches the expected GA ID for that domain
• The request returns a 200 OK status

If no request shows up, double-check that auto-tracking isn’t disabled and the GA ID is correctly mapped.

5. Fix Vue Router Integration (If Used) #

If you’re using Vue Router, make sure vue-analytics tracks page changes properly by passing the router instance to the plugin:

Vue.use(VueAnalytics, {
  id: currentGaId,
  router: router, // Pass your Vue Router instance here
  autoTracking: {
    page: true
  }
});

6. Note for GA4 Users #

If you’re using GA4 instead of Universal Analytics, vue-analytics uses measurementId instead of id:

Vue.use(VueAnalytics, {
  measurementId: currentGaId, // For GA4 properties
  // ... other configs
});

Give these steps a shot—chances are one of them will get your data flowing to the correct GA properties!

内容的提问来源于stack exchange，提问作者Sloan Holzman