Installing Google Analytics 4 on Carrd | OpsBlu Docs

Installing Google Analytics 4 on Carrd

Complete guide to installing and configuring Google Analytics 4 (GA4) on your Carrd website using embed elements.

Google Analytics 4 (GA4) is the latest version of Google's analytics platform. This guide covers how to install GA4 on your Carrd site using the Embed element.

Prerequisites

Before installing GA4 on Carrd, you need:

  1. A Carrd Pro account (Pro Lite, Pro Standard, or Pro Plus)
  2. A Google Analytics 4 property - Create one in Google Analytics
  3. Your GA4 Measurement ID (format: G-XXXXXXXXXX)
  4. A published Carrd site (tracking only works on published sites)

Note: GA4 tracking is not available on free Carrd accounts because custom code requires Carrd Pro.

Step 1: Get Your GA4 Tracking Code

  1. Go to Google Analytics
  2. Select your GA4 property
  3. Navigate to Admin (gear icon at bottom left)
  4. Under Property, click Data Streams
  5. Click your Web data stream
  6. Click View tag instructions
  7. Select Install manually
  8. Copy the Global site tag (gtag.js) code

The code will look 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>

Important: Copy the ENTIRE code block including both <script> tags.

Step 2: Add GA4 to Your Carrd Site

  1. Open your Carrd site in the editor
  2. Click the + (Controls) button on the left
  3. Select General > Embed
  4. Place the embed element at the top of your page (before any other content)
  5. Click on the embed element you just added
  6. In the embed settings, select Code as the embed type
  7. Paste your GA4 tracking code into the code field
  8. Click Done
  9. Click Publish to publish your site

Method 2: Hidden Embed (Cleaner Approach)

For a cleaner implementation that doesn't affect your page layout:

  1. Add an Embed element as described above
  2. After pasting the GA4 code, click Style in the embed settings
  3. Add this CSS to hide the embed:
display: none;
  1. Click Done
  2. Click Publish

This keeps your tracking code hidden and doesn't create any visible elements.

Step 3: Verify Installation

Using GA4 Realtime Reports

  1. Publish your Carrd site (tracking doesn't work in preview mode)
  2. Go to Google Analytics
  3. Select your GA4 property
  4. Navigate to Reports > Realtime
  5. In a new browser tab, visit your published Carrd site
  6. Return to GA4 Realtime - you should see your visit appear within 30 seconds

Using Browser Developer Tools

  1. Open your published Carrd site (not preview)
  2. Press F12 to open Developer Tools
  3. Go to the Network tab
  4. Filter by collect or google-analytics
  5. Reload the page
  6. Look for requests to https://www.google-analytics.com/g/collect

If you see these requests, GA4 is working correctly.

Using Google Tag Assistant

  1. Install Google Tag Assistant Chrome extension
  2. Visit your published Carrd site
  3. Click the Tag Assistant icon
  4. Verify that GA4 tag is firing
  5. Check that the Measurement ID is correct

Configuration Options

Enhanced Measurement

GA4's 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 automatic events:
    • Scrolls: Tracks 90% scroll depth (useful for Carrd's one-page design)
    • Outbound clicks: Tracks clicks to external links (important for Carrd)
    • Site search: Not applicable for most Carrd sites
    • Video engagement: Tracks embedded YouTube videos
    • File downloads: Tracks PDF and file downloads

Recommended for Carrd:

  • ✓ Enable Scrolls (measure engagement on one-page layouts)
  • ✓ Enable Outbound clicks (track clicks to external links)
  • ✓ Enable File downloads (if you have downloadable files)
  • ✗ Disable Site search (most Carrd sites don't have search)

Custom Configuration Parameters

Modify the gtag('config') call to customize GA4 behavior:

<!-- 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', {
    'cookie_domain': 'yourdomain.com',
    'cookie_expires': 63072000, // 2 years in seconds
    'anonymize_ip': true,
    'send_page_view': true
  });
</script>

Useful parameters for Carrd:

  • cookie_domain: Set to your custom domain
  • cookie_expires: Cookie lifetime (default is 2 years)
  • anonymize_ip: Anonymize IP addresses for privacy
  • send_page_view: Control automatic page view tracking

Debug Mode

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

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

View events in Admin > DebugView in GA4.

Remember: Remove debug_mode: true before going to production.

Carrd-Specific Considerations

Single-Page Tracking

Carrd sites are one-page by design, which affects GA4 tracking:

  • One page view per visit: Users don't navigate between pages
  • Scroll depth is critical: Use scroll tracking to measure engagement
  • Section tracking: Consider tracking scrolls to different sections
  • Time on site: More important metric than page views
  • Exit tracking: Track outbound link clicks to measure conversions

Preview vs. Published

Important difference:

  • Preview mode: GA4 does NOT fire in Carrd's preview mode
  • Published site: GA4 ONLY works on your published site

Always test GA4 on your published Carrd site, not in preview.

Custom Domain vs. Carrd Subdomain

GA4 works on both:

  • Carrd subdomain: yoursite.carrd.co (works immediately after publishing)
  • Custom domain: yourdomain.com (works after DNS propagates)

If testing on a custom domain, ensure DNS is fully configured.

Mobile-First Design

Carrd is optimized for mobile, so verify GA4 works on mobile:

  1. Publish your Carrd site
  2. Visit on a mobile device
  3. Check GA4 Realtime reports
  4. Verify mobile traffic appears

Most Carrd site visitors will be mobile users.

Performance Impact

GA4 is lightweight, but consider:

  • Baseline: Carrd sites are extremely fast (95+ PageSpeed scores)
  • GA4 impact: Minimal (~5-10KB), loads asynchronously
  • Total impact: Usually <0.1s additional load time
  • Recommendation: GA4 is worth the minimal performance cost

Troubleshooting

GA4 Not Tracking

Problem: No data appears in GA4 Realtime reports.

Solutions:

  1. Verify Carrd Pro: Ensure you have a Pro plan (Lite, Standard, or Plus)
  2. Check site is published: GA4 only works on published sites, NOT preview
  3. Verify Measurement ID: Format must be G-XXXXXXXXXX (not UA- or GTM-)
  4. Check embed placement: Embed should be at top of page
  5. Clear cache: Hard reload browser (Ctrl+Shift+R)
  6. Disable ad blockers: Test with ad blockers and privacy extensions disabled
  7. Wait 24-48 hours: Standard reports can take up to 48 hours to populate

Tracking Works on Carrd Subdomain But Not Custom Domain

Problem: GA4 works on yoursite.carrd.co but not yourdomain.com.

Solutions:

  1. Wait for DNS propagation: Custom domains can take 24-48 hours to fully propagate
  2. Verify domain connection: Check that custom domain is properly connected in Carrd settings
  3. Update cookie domain: Set cookie_domain parameter in GA4 config
  4. Clear browser cache: Hard refresh on custom domain
  5. Test in incognito: Use private browsing to avoid cache issues

Events Not Appearing in GA4

Problem: Page views work, but custom events don't appear.

Solutions:

  1. Check event syntax: Ensure proper gtag('event', 'event_name') format
  2. Wait for processing: Events can take a few minutes to appear in Realtime
  3. Use DebugView: Enable debug mode to see events immediately
  4. Verify embed order: Event tracking embeds should come AFTER GA4 installation embed
  5. Check JavaScript errors: Open browser console (F12) and look for errors

Duplicate Page Views

Problem: Seeing double page views in GA4.

Causes:

  • GA4 installed multiple times in different embeds
  • GA4 in both GTM and direct embed

Solutions:

  1. Search all embeds: Check if GA4 code appears in multiple embed elements
  2. Check GTM: If using GTM, remove direct GA4 installation
  3. Choose one method: Either direct installation OR GTM, not both

Advanced Setup

Implement cookie consent before loading GA4:

<!-- Consent mode implementation -->
<script>
  // Set default consent state
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  gtag('consent', 'default', {
    'analytics_storage': 'denied',
    'ad_storage': 'denied'
  });

  // Update consent when user accepts
  function grantConsent() {
    gtag('consent', 'update', {
      'analytics_storage': 'granted',
      'ad_storage': 'granted'
    });
  }
</script>

<!-- Then load GA4 -->
<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>

Call grantConsent() when user accepts cookies.

User ID Tracking

Track logged-in users across sessions:

<script>
  // Set user ID (if you have user authentication)
  gtag('config', 'G-XXXXXXXXXX', {
    'user_id': 'USER_ID_HERE'
  });
</script>

Privacy note: Only use User ID tracking with proper consent and privacy disclosures.

Custom Dimensions

Set custom dimensions for Carrd-specific data:

<script>
  gtag('config', 'G-XXXXXXXXXX', {
    'custom_map': {
      'dimension1': 'page_type',
      'dimension2': 'user_type'
    }
  });

  // Send custom dimension data
  gtag('event', 'page_view', {
    'page_type': 'landing_page',
    'user_type': 'visitor'
  });
</script>

Configure custom dimensions in Admin > Custom Definitions in GA4 first.

Multiple Carrd Sites

If you manage multiple Carrd sites:

Option 1: Separate Properties

Create a separate GA4 property for each site:

  • Pros: Isolated data, easier to manage individually
  • Cons: Must switch between properties to view data
  • Best for: Completely different projects or clients

Option 2: Single Property with Data Streams

Use one GA4 property with multiple data streams:

  • Pros: All data in one place, cross-site analysis
  • Cons: Need to filter data by site
  • Best for: Related sites or personal portfolio of projects

Option 3: Single Property with Custom Dimensions

Use one GA4 property and custom dimensions to identify sites:

<script>
  gtag('config', 'G-XXXXXXXXXX', {
    'custom_map': {'dimension1': 'site_name'}
  });

  gtag('event', 'page_view', {
    'site_name': 'Portfolio Site'
  });
</script>
  • Pros: Unified reporting, flexible filtering
  • Cons: Requires custom dimension setup
  • Best for: Portfolio of similar sites

Privacy and Compliance

GDPR Compliance

For EU visitors:

  1. Obtain consent before loading GA4
  2. Anonymize IP addresses: Set anonymize_ip: true
  3. Update privacy policy: Disclose GA4 usage
  4. Implement consent banner: Use a cookie consent solution
  5. Configure data retention: Set appropriate retention in GA4 settings (Admin > Data Retention)

CCPA Compliance

For California visitors:

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

Privacy-Focused Alternatives

If privacy is a primary concern:

  • Plausible Analytics: Privacy-friendly, GDPR-compliant, simple
  • Fathom Analytics: Privacy-first, no cookie banners needed
  • Simple Analytics: GDPR-compliant, minimal

All can be installed on Carrd using embed elements.

Next Steps

Additional Resources

Nach oben