Installing Google Analytics 4 on Webflow | Blue Frog Docs

Installing Google Analytics 4 on Webflow

Complete guide to installing and configuring Google Analytics 4 (GA4) on your Webflow website.

Installing Google Analytics 4 on Webflow

Google Analytics 4 (GA4) is the latest version of Google's analytics platform. This guide covers multiple methods to install GA4 on your Webflow site, from the simplest native integration to advanced custom implementations.

Prerequisites

Before installing GA4 on Webflow, you need:

  1. A Webflow account with access to Project Settings
  2. A Google Analytics 4 property - Create one in Google Analytics
  3. Your GA4 Measurement ID (format: G-XXXXXXXXXX)
  4. A published Webflow site (tracking only works on published sites, not in Designer preview)

Webflow offers a built-in Google Analytics integration for basic tracking needs.

Step 1: Access Site Settings

  1. Open your Webflow project
  2. Click the Settings icon (gear icon) in the left sidebar
  3. Navigate to Integrations tab

Step 2: Add GA4 Measurement ID

  1. Find the Google Analytics section
  2. Paste your GA4 Measurement ID (format: G-XXXXXXXXXX)
  3. Click Save Changes

Step 3: Publish Your Site

  1. Click Publish in the top right
  2. Select your publishing destination
  3. Confirm publication

Limitations of Native Integration

  • Basic tracking only: Page views are tracked automatically
  • No custom events: Cannot track forms, clicks, or custom interactions
  • Limited configuration: Cannot customize GA4 settings
  • No ecommerce tracking: Webflow Ecommerce events not automatically tracked

Use native integration if: You only need basic page view tracking and don't require custom events or ecommerce tracking.

Installing GA4 via custom code provides full control over tracking configuration.

Step 1: Get Your GA4 Tag Code

  1. Go to Google Analytics
  2. Navigate to Admin > Data Streams
  3. Click your Web data stream
  4. Click View tag instructions
  5. Select Install manually
  6. Copy the full Global site tag (gtag.js) code

The code looks like this:

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

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

Step 2: Add Code to Webflow Project Settings

  1. In your Webflow project, go to Project Settings
  2. Navigate to Custom Code tab
  3. Paste the GA4 code into the Head Code section
  4. Click Save Changes

Step 3: Publish and Test

  1. Publish your site
  2. Visit your published site (not Designer preview)
  3. Verify tracking is working (see Testing section below)

Benefits of Custom Code Installation

  • Full GA4 features: Access to all GA4 configuration options
  • Custom events: Easily add custom event tracking
  • Enhanced measurement: Control automatic event tracking
  • Ecommerce tracking: Full ecommerce implementation support

For sites with multiple marketing tags or complex tracking requirements, install GA4 through Google Tag Manager.

See our dedicated guide: Installing Google Tag Manager on Webflow

Benefits of GTM Installation

  • Centralized tag management: Manage GA4 and other tags in one place
  • No code deployments: Add/edit tags without republishing Webflow
  • Advanced tracking: Complex event tracking and custom dimensions
  • Team collaboration: Multiple team members can manage tags

Method 4: Memberstack Integration (For Membership Sites)

If you use Memberstack for user authentication, you can enhance GA4 tracking with user data.

Prerequisites

  • Memberstack installed and configured on your Webflow site
  • GA4 installed via Custom Code or GTM (not native integration)

Step 1: Install Base GA4 Tracking

First, install GA4 using Method 2 (Custom Code) or Method 3 (GTM) above.

Step 2: Add Memberstack User ID to GA4

Add this code after your GA4 installation code:

<script>
  // Wait for Memberstack to load
  window.$memberstackDom.ready.then(function(member) {
    if (member.loggedIn) {
      // Set User ID in GA4
      gtag('config', 'G-XXXXXXXXXX', {
        'user_id': member.id
      });

      // Set custom dimensions for member data
      gtag('set', 'user_properties', {
        'membership_plan': member.planConnections[0]?.planId || 'none',
        'member_status': 'logged_in'
      });
    }
  });
</script>

Replace G-XXXXXXXXXX with your actual Measurement ID.

Step 3: Track Memberstack Events

Track important membership events:

<script>
  window.$memberstackDom.ready.then(function(member) {
    // Track login
    window.$memberstackDom.on('memberLogin', function(member) {
      gtag('event', 'login', {
        'method': 'memberstack',
        'member_id': member.id
      });
    });

    // Track signup
    window.$memberstackDom.on('memberSignup', function(member) {
      gtag('event', 'sign_up', {
        'method': 'memberstack',
        'member_id': member.id
      });
    });

    // Track logout
    window.$memberstackDom.on('memberLogout', function() {
      gtag('event', 'logout', {
        'method': 'memberstack'
      });
    });
  });
</script>

Privacy Considerations

  • User consent: Ensure you have consent before tracking user IDs
  • Privacy policy: Update your privacy policy to reflect user tracking
  • Data retention: Configure GA4 data retention settings appropriately

Configuration Options

Enhanced Measurement

Enhanced measurement automatically tracks common interactions. Configure in Google Analytics:

  1. Go to Admin > Data Streams
  2. Click your web stream
  3. Click Enhanced measurement
  4. Toggle specific events:
    • Page views: Automatically tracked
    • Scrolls: Track 90% scroll depth
    • Outbound clicks: Track external link clicks
    • Site search: Track search queries
    • Video engagement: Track YouTube videos
    • File downloads: Track PDF and file downloads

Custom Configuration Parameters

Customize GA4 behavior by modifying the gtag('config') call:

<script>
  gtag('config', 'G-XXXXXXXXXX', {
    'cookie_prefix': 'webflow',
    'cookie_domain': 'yourdomain.com',
    'cookie_expires': 63072000, // 2 years in seconds
    'anonymize_ip': true,
    'allow_google_signals': true,
    'send_page_view': true
  });
</script>

Common parameters:

  • cookie_prefix: Prefix for GA cookies (useful for multi-site tracking)
  • cookie_domain: Domain for cookies (use your root domain)
  • cookie_expires: Cookie expiration in seconds
  • anonymize_ip: Anonymize IP addresses for privacy
  • allow_google_signals: Enable Google signals (remarketing)
  • send_page_view: Control automatic page view tracking

Debug Mode

Enable debug mode to see GA4 events in real-time:

<script>
  gtag('config', 'G-XXXXXXXXXX', {
    'debug_mode': true
  });
</script>

Remove debug mode before going to production.

Testing Your Installation

Method 1: Real-time Reports

  1. Go to Google Analytics
  2. Select your GA4 property
  3. Navigate to Reports > Realtime
  4. In a separate browser tab, visit your published Webflow site
  5. You should see your visit appear in real-time

Method 2: GA4 DebugView

  1. Enable debug mode (see above)
  2. Go to Admin > DebugView in GA4
  3. Visit your site
  4. See events fire in real-time with full parameter details

Method 3: Browser Developer Tools

  1. Open your published site
  2. Press F12 to open Developer Tools
  3. Go to Network tab
  4. Filter by collect or google-analytics
  5. Reload the page
  6. You should see GA4 requests being sent

Method 4: Google Tag Assistant (Chrome Extension)

  1. Install Google Tag Assistant
  2. Visit your published site
  3. Click the Tag Assistant icon
  4. Verify GA4 tag is firing correctly

Troubleshooting

GA4 Not Tracking

Problem: No data appears in GA4 Real-time reports.

Solutions:

  1. Verify site is published: Tracking only works on published sites, not in Webflow Designer
  2. Check Measurement ID: Ensure ID format is G-XXXXXXXXXX (not UA- or GTM-)
  3. Clear cache: Clear browser cache and hard reload (Ctrl+Shift+R)
  4. Check ad blockers: Disable ad blockers and privacy extensions
  5. Wait 24-48 hours: Standard reports can take up to 48 hours to populate

Duplicate Page Views

Problem: Seeing double page views in GA4.

Causes:

  • GA4 installed both via native integration AND custom code
  • Multiple GA4 tags in custom code
  • GA4 installed in both Project Settings and GTM

Solutions:

  1. Remove GA4 from Webflow native integration
  2. Search custom code for multiple GA4 installations
  3. Choose ONE method: native, custom code, or GTM

Tracking Works Locally But Not on Custom Domain

Problem: GA4 works on webflow.io subdomain but not custom domain.

Solutions:

  1. Republish to custom domain: Ensure site is fully published
  2. Check DNS settings: Verify custom domain DNS is properly configured
  3. Clear CDN cache: Webflow's CDN may be caching old code
  4. Update cookie domain: Set cookie_domain to your root domain

Events Not Appearing

Problem: Custom events not showing in GA4.

Solutions:

  1. Check event syntax: Ensure proper gtag('event', 'event_name') format
  2. Wait for processing: Events can take a few minutes to appear
  3. Use DebugView: Enable debug mode to see events immediately
  4. Check event name: Event names are case-sensitive and have specific rules

Page-Level Tracking

To add GA4 tracking to specific pages only:

  1. Go to Pages panel in Webflow Designer
  2. Click the page you want to track
  3. Click the gear icon next to the page name
  4. Go to Custom Code tab
  5. Add GA4 code to Head Code
  6. Publish the page

Note: This creates duplicate tracking if you also have site-wide GA4 installed.

Webflow-Specific Tracking Considerations

Webflow Hosting CDN

Webflow uses a global CDN that caches your site. After adding GA4:

  1. Publish changes: Always publish after adding tracking code
  2. Hard refresh: Use Ctrl+Shift+R to bypass cache when testing
  3. Wait for propagation: CDN updates can take a few minutes globally

Webflow Designer vs. Published Site

  • Designer preview: GA4 does NOT fire in the Webflow Designer preview
  • Editor mode: GA4 does NOT fire in Editor mode
  • Staging subdomain: GA4 DOES fire on your webflow.io staging site
  • Custom domain: GA4 DOES fire on your published custom domain

Webflow Forms

See Webflow-Specific GA4 Events for detailed form tracking implementation.

Webflow Ecommerce

See Webflow Ecommerce + GA4 Tracking for complete ecommerce implementation.

Webflow CMS

To pass CMS field data to GA4, use custom dimensions and events. See Event Tracking Guide for details.

Privacy and Compliance

Implement cookie consent before loading GA4:

<!-- Example consent implementation -->
<script>
  // Check if user has consented
  if (localStorage.getItem('analytics_consent') === 'granted') {
    // Load GA4
    (function() {
      var script = document.createElement('script');
      script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
      script.async = true;
      document.head.appendChild(script);

      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    })();
  }
</script>

GDPR Compliance

For EU visitors:

  1. Obtain consent before loading GA4
  2. Anonymize IP addresses: Set anonymize_ip: true
  3. Respect Do Not Track: Honor browser DNT signals
  4. Update privacy policy: Clearly disclose GA4 usage
  5. Configure data retention: Set appropriate retention in GA4 settings

CCPA Compliance

For California visitors:

  1. Provide opt-out: Allow users to opt out of tracking
  2. Update privacy policy: Disclose data collection practices
  3. Honor opt-out requests: Respect user preferences

Next Steps

↑ Back to top
// SYS.FOOTER