Install Google Analytics 4 on Tilda

There are three main methods to install GA4 on your Tilda website, each with different capabilities and use cases.

Method Comparison

Method 1: Site Settings (Recommended)

Install GA4 globally across your entire Tilda site.

Setup Steps

1. Get Your GA4 Measurement ID

   • Go to Google Analytics
   • Create a GA4 property if you haven't already
   • Copy your Measurement ID (format: G-XXXXXXXXXX)

2. Access Tilda Site Settings

   • Log in to your Tilda dashboard
   • Open your site
   • Click Site Settings (gear icon in top right)
   • Go to Analytics tab

3. Add GA4 Code

   Paste this code in the Analytics field:

   <!-- Google Analytics 4 -->
   <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', {
       'send_page_view': true,
       'cookie_flags': 'SameSite=None;Secure'
     });
   </script>
   

   Replace G-XXXXXXXXXX with your actual Measurement ID.

4. Save and Republish

   • Click Save
   • Click Publish (top right)
   • Republish all pages to apply changes

5. Verify Installation

   • Open your published site
   • Open GA4 Realtime report
   • Navigate your site
   • Verify pageviews appear within 30 seconds

What Gets Tracked (Site Settings Method)

Automatic Events:

• page_view - All page views
• scroll - Scroll depth (90%)
• first_visit - First-time visitors
• session_start - New sessions

Requires Additional Code:

• Form submissions
• Button clicks
• Link clicks
• Video plays
• Custom events

See GA4 Event Tracking for implementing custom events.

Method 2: HTML Block (Page-Specific)

Add GA4 to specific landing pages or track different properties per page.

When to Use HTML Block

• Different GA4 properties for different pages
• A/B testing tracking setups
• Landing pages with unique tracking needs
• Pages with specific conversion goals

Setup Steps

1. Open Page Editor

   • Go to your Tilda page
   • Click Edit page

2. Add HTML Block

   • Click + Add Block
   • Choose Other category
   • Select HTML (T123)

3. Insert GA4 Code

   <!-- Google Analytics 4 -->
   <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', {
       'page_title': 'Landing Page Name',
       'page_location': window.location.href
     });
   
     // Track when page is ready
     $(document).ready(function() {
       console.log('GA4 tracking initialized on:', document.title);
     });
   </script>
   

4. Position Block

   • Drag HTML block to top of page (before other content)
   • This ensures tracking loads early

5. Save and Publish

Advantages of HTML Block Method

• Easy to add/remove per page
• No need to republish entire site
• Visual editor shows block location
• Can combine with page-specific event tracking

Disadvantages

• Must add to each page manually
• Can forget to add to new pages
• Harder to update across multiple pages
• May load later than Site Settings method

Method 3: Google Tag Manager (Advanced)

GTM provides the most flexibility for managing multiple tags.

Why Use GTM?

• Easier updates: Change tracking without republishing
• Multiple tags: Manage GA4, Meta Pixel, etc. from one place
• Advanced features: Custom events, triggers, variables
• Better organization: All tags in GTM interface
• Version control: Track changes and roll back if needed

Setup Steps

1. Install GTM on Tilda

   See Install Google Tag Manager for full GTM installation guide.

2. Create GA4 Tag in GTM

   Once GTM is installed:

   a. In GTM, go to Tags → New

   b. Click Tag Configuration → Google Analytics: GA4 Configuration

   c. Enter your Measurement ID (G-XXXXXXXXXX)

   d. Configuration Settings (optional):

   • Add custom parameters
   • Set cookie settings
   • Configure user properties

   e. Triggering: Select All Pages

   f. Save and name it "GA4 - Configuration"

3. Publish Container

   • Click Submit in GTM
   • Add version name and description
   • Click Publish

4. Test

   • Use GTM Preview mode
   • Check GA4 Realtime reports
   • Verify events fire correctly

GTM + Tilda Event Tracking

With GTM, you can track Tilda-specific events without code in every page:

See GA4 Event Tracking for detailed GTM event setup.

Configuration Options

Cookie Settings

Configure cookie behavior for GDPR compliance:

gtag('config', 'G-XXXXXXXXXX', {
  'cookie_flags': 'SameSite=None;Secure',
  'cookie_domain': 'yourdomain.com',
  'cookie_expires': 60 * 60 * 24 * 365 * 2 // 2 years
});

User ID Tracking

Track logged-in users (if using Tilda membership):

// If user is logged in (check with your membership system)
if (window.currentUserId) {
  gtag('config', 'G-XXXXXXXXXX', {
    'user_id': window.currentUserId
  });
}

Custom Dimensions

Add custom dimensions for Tilda-specific data:

gtag('config', 'G-XXXXXXXXXX', {
  'custom_map': {
    'dimension1': 'page_type',
    'dimension2': 'template_id'
  }
});

// Send custom dimension data
gtag('event', 'page_view', {
  'page_type': 'landing_page',
  'template_id': 'rec123456'
});

Debug Mode

Enable debug mode for testing:

gtag('config', 'G-XXXXXXXXXX', {
  'debug_mode': true
});

Then check GA4 → Admin → DebugView to see events in real-time with full parameters.

Tracking Tilda Forms

Tilda forms require special event listeners.

Basic Form Tracking

<script>
// Track all Tilda form submissions
$(document).on('tildaform:aftersuccess', function(e, data) {
  gtag('event', 'form_submit', {
    'form_id': data.formId,
    'form_name': data.formname || 'Contact Form',
    'transaction_id': data.tranid
  });
});
</script>

Add this to Site Settings → Analytics or in an HTML block at the bottom of pages with forms.

Lead Generation Event

Track forms as leads:

$(document).on('tildaform:aftersuccess', function(e, data) {
  gtag('event', 'generate_lead', {
    'currency': 'USD',
    'value': 0, // Assign lead value if applicable
    'form_id': data.formId
  });
});

Payment Form Tracking

For Tilda payment forms:

$(document).on('tildaform:afterpaymentsuccess', function(e, data) {
  gtag('event', 'purchase', {
    'transaction_id': data.tranid,
    'value': parseFloat(data.amount),
    'currency': data.currency || 'USD',
    'payment_type': data.paymenttype
  });
});

Verification & Testing

1. Check GA4 Realtime Reports

• Open GA4 → Reports → Realtime
• Navigate your Tilda site
• Verify events appear within 30 seconds
• Check locations, pages, and events

2. Use GA4 DebugView

Enable debug mode:

gtag('config', 'G-XXXXXXXXXX', {
  'debug_mode': true
});

In GA4:

• Go to Admin → DebugView
• View events in real-time with full parameters
• Verify event structure and parameters

3. Browser Console

Check for errors:

// Open browser console (F12)
// Check for errors
// Verify gtag is loaded
console.log(typeof gtag); // Should be "function"

// Check dataLayer
console.log(window.dataLayer); // Should be array with events

4. Test Form Submissions

1. Fill out a Tilda form on your site
2. Submit the form
3. Check GA4 Realtime → Events
4. Verify form_submit or generate_lead event appears

Troubleshooting

Events Not Firing

See Events Not Firing Troubleshooting for detailed debugging.

Quick checks:

• Measurement ID is correct (starts with G-)
• Code added to Site Settings → Analytics
• Site has been republished (critical!)
• Testing on published site, not preview
• No JavaScript errors in browser console
• Ad blockers disabled for testing

Duplicate Pageviews

Cause: GA4 code in both Site Settings AND HTML block.

Fix:

• Use Site Settings for global tracking
• Use HTML block only for page-specific tracking
• Remove duplicate implementations

Forms Not Tracking

Cause: Event listener not catching Tilda form event.

Fix:

// Make sure jQuery is ready
$(document).ready(function() {
  $(document).on('tildaform:aftersuccess', function(e, data) {
    console.log('Form submitted:', data);
    gtag('event', 'form_submit', {
      'form_id': data.formId
    });
  });
});

Code Not Loading on Published Site

Cause: Site not republished after adding code.

Fix:

1. Click Publish button in top right
2. Wait for publishing to complete
3. Clear browser cache
4. Test again on published URL

Privacy & GDPR Compliance

Cookie Consent

Integrate GA4 with Tilda's GDPR cookie notice:

// Check if cookies accepted
if (localStorage.getItem('cookieconsent_status') === 'allow') {
  // Initialize GA4
  gtag('config', 'G-XXXXXXXXXX');
} else {
  // Wait for consent
  window.addEventListener('load', function() {
    if (localStorage.getItem('cookieconsent_status') === 'allow') {
      gtag('config', 'G-XXXXXXXXXX');
    }
  });
}

Google Consent Mode

Implement Google Consent Mode v2:

<script>
// Set default consent before GA4 loads
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

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

// Update consent when user accepts
function updateConsent(analyticsAccepted, adsAccepted) {
  gtag('consent', 'update', {
    'analytics_storage': analyticsAccepted ? 'granted' : 'denied',
    'ad_storage': adsAccepted ? 'granted' : 'denied'
  });
}
</script>

Best Practices for Tilda

1. Use Site Settings for Base Code

Add GA4 configuration in Site Settings → Analytics. This ensures it loads on every page.

2. Add Event Tracking in HTML Blocks

Use HTML blocks at the bottom of specific pages for page-specific event tracking.

3. Republish After Changes

Critical: Always click Publish after making changes. Tilda doesn't auto-publish.

4. Test on Published Site

Preview mode may not load custom scripts correctly. Always test on your published domain.

5. Use jQuery (Already Loaded)

Tilda includes jQuery. Use it for event listeners:

$(document).ready(function() {
  // Your tracking code
});

6. Track Tilda-Specific Events

Take advantage of Tilda's custom events:

• tildaform:aftersuccess - Form submissions
• tildapopup:opened - Popup opens
• tildapopup:closed - Popup closes

Next Steps

• Configure GA4 Events - Track custom Tilda events
• Install GTM - For easier tag management
• Troubleshoot Tracking Issues - Debug common problems

For general GA4 concepts, see Google Analytics 4 Guide.