Tilda GA4 Event Tracking: Setup Guide

Learn how to track Tilda-specific events in Google Analytics 4, including form submissions, button clicks, popup interactions, and custom Zero Block elements.

Tilda Event Tracking Methods

Method 1: Direct gtag.js Events (Simple)

Add event tracking code directly in HTML blocks or Site Settings.

Best for:

• Simple implementations
• One-off tracking needs
• Learning and testing

Method 2: Google Tag Manager (Recommended)

Use GTM to manage all events without editing code frequently.

Best for:

• Multiple events
• Regular updates
• Team collaboration
• Advanced tracking

See GTM Setup for installation.

Tilda Form Tracking

Tilda provides built-in JavaScript events for forms.

Basic Form Submission Tracking

Add to Site Settings → Analytics or HTML block:

<script>
$(document).ready(function() {
  // Track all 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,
      'event_category': 'Forms',
      'event_label': window.location.pathname
    });

    console.log('Form submitted:', data);
  });
});
</script>

Lead Generation Event

Track forms as GA4 recommended generate_lead event:

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

Contact Form Tracking

$(document).on('tildaform:aftersuccess', function(e, data) {
  // Only track contact forms (form ID or name contains "contact")
  if (data.formId.includes('contact') || data.formname.toLowerCase().includes('contact')) {
    gtag('event', 'contact_form_submit', {
      'form_id': data.formId,
      'page': document.title
    });
  }
});

Newsletter Signup Tracking

$(document).on('tildaform:aftersuccess', function(e, data) {
  // Track newsletter signups
  if (data.formname && data.formname.toLowerCase().includes('subscribe')) {
    gtag('event', 'newsletter_signup', {
      'method': 'tilda_form',
      'form_id': data.formId,
      'page_location': window.location.href
    });
  }
});

Payment Form Tracking (Ecommerce)

For Tilda payment forms, track as purchases:

$(document).on('tildaform:afterpaymentsuccess', function(e, data) {
  gtag('event', 'purchase', {
    'transaction_id': data.tranid,
    'value': parseFloat(data.amount) || 0,
    'currency': data.currency || 'USD',
    'payment_type': data.paymenttype || 'card',
    'items': [{
      'item_id': data.product_id || 'unknown',
      'item_name': data.product_name || 'Product',
      'price': parseFloat(data.amount) || 0,
      'quantity': 1
    }]
  });
});

Form Start (Before Submission)

Track when users focus on form fields:

$(document).ready(function() {
  var formStartTracked = {};

  $('.t-form__inputcontainer input, .t-form__inputcontainer textarea').on('focus', function() {
    var formId = $(this).closest('form').attr('id');

    if (!formStartTracked[formId]) {
      formStartTracked[formId] = true;

      gtag('event', 'form_start', {
        'form_id': formId,
        'page': window.location.pathname
      });
    }
  });
});

Button Click Tracking

Track All Tilda Buttons

$(document).ready(function() {
  // Track all button clicks
  $('.t-btn').on('click', function() {
    var buttonText = $(this).text().trim();
    var buttonUrl = $(this).attr('href') || 'no-url';

    gtag('event', 'button_click', {
      'button_text': buttonText,
      'button_url': buttonUrl,
      'button_location': window.location.pathname,
      'event_category': 'Button',
      'event_label': buttonText
    });
  });
});

Track Specific CTA Buttons

// Track specific buttons by text content
$('.t-btn:contains("Get Started"), .t-btn:contains("Sign Up")').on('click', function() {
  gtag('event', 'cta_click', {
    'button_text': $(this).text().trim(),
    'cta_type': 'signup',
    'page': document.title
  });
});

Track Buttons with Custom Attributes

Add data-event attribute to buttons in Zero Block or HTML:

<a href="#" class="t-btn" data-event="demo_request">Request Demo</a>

Then track:

$('.t-btn[data-event]').on('click', function() {
  var eventName = $(this).attr('data-event');

  gtag('event', eventName, {
    'button_text': $(this).text(),
    'page': window.location.pathname
  });
});

Link Tracking

External Link Tracking

$(document).ready(function() {
  // Track outbound links
  $('a[href^="http"]').not('[href*="' + location.hostname + '"]').on('click', function(e) {
    var linkUrl = $(this).attr('href');

    gtag('event', 'outbound_click', {
      'link_url': linkUrl,
      'link_text': $(this).text(),
      'link_domain': new URL(linkUrl).hostname
    });
  });
});

Phone Number Clicks

$('a[href^="tel:"]').on('click', function() {
  gtag('event', 'phone_click', {
    'phone_number': $(this).attr('href').replace('tel:', ''),
    'event_category': 'Contact',
    'event_label': 'Phone'
  });
});

Email Link Clicks

$('a[href^="mailto:"]').on('click', function() {
  gtag('event', 'email_click', {
    'email_address': $(this).attr('href').replace('mailto:', ''),
    'event_category': 'Contact',
    'event_label': 'Email'
  });
});

Popup Tracking

Tilda provides events for popup windows.

Popup Open Tracking

$(document).ready(function() {
  $(document).on('tildapopup:opened', function(e, data) {
    gtag('event', 'popup_open', {
      'popup_id': data.popupid,
      'popup_trigger': 'button_click', // or 'auto', 'exit_intent'
      'page': window.location.pathname
    });
  });
});

Popup Close Tracking

$(document).on('tildapopup:closed', function(e, data) {
  gtag('event', 'popup_close', {
    'popup_id': data.popupid,
    'time_on_popup': Date.now() - data.openTime // If you track open time
  });
});

Scroll Depth Tracking

Track how far users scroll on Tilda pages.

Basic Scroll Tracking

$(document).ready(function() {
  var scrollTracked = {
    '25': false,
    '50': false,
    '75': false,
    '100': false
  };

  $(window).on('scroll', function() {
    var scrollPercent = Math.round(($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);

    $.each(scrollTracked, function(threshold, tracked) {
      if (!tracked && scrollPercent >= parseInt(threshold)) {
        scrollTracked[threshold] = true;

        gtag('event', 'scroll', {
          'percent_scrolled': threshold,
          'page': window.location.pathname
        });
      }
    });
  });
});

Section View Tracking

Track when users scroll to specific Tilda blocks (records):

$(document).ready(function() {
  var trackedBlocks = {};

  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  $(window).on('scroll', function() {
    $('.t-rec').each(function() {
      var blockId = $(this).attr('id');

      if (blockId && !trackedBlocks[blockId] && isElementInViewport(this)) {
        trackedBlocks[blockId] = true;

        gtag('event', 'section_view', {
          'section_id': blockId,
          'section_title': $(this).find('h1, h2, h3').first().text() || 'Untitled Section'
        });
      }
    });
  });
});

Video Tracking

Track Tilda video embeds (YouTube, Vimeo).

YouTube Video Tracking

// Track YouTube video plays
$(document).ready(function() {
  // Tilda uses iframe for YouTube
  $('iframe[src*="youtube.com"]').each(function() {
    var videoSrc = $(this).attr('src');
    var videoId = videoSrc.match(/embed\/([^?]*)/)[1];

    // Note: Requires YouTube IFrame API for detailed tracking
    // This is simplified version
    $(this).on('load', function() {
      gtag('event', 'video_loaded', {
        'video_platform': 'youtube',
        'video_id': videoId
      });
    });
  });
});

Native Tilda Video Player

$('.t-video').on('play', function() {
  gtag('event', 'video_start', {
    'video_title': $(this).attr('data-video-title') || 'Untitled Video',
    'video_url': $(this).attr('src')
  });
});

File Download Tracking

Track PDF, document, and file downloads.

$(document).ready(function() {
  // Track file downloads
  $('a[href$=".pdf"], a[href$=".doc"], a[href$=".docx"], a[href$=".zip"], a[href$=".xls"], a[href$=".xlsx"]').on('click', function() {
    var fileUrl = $(this).attr('href');
    var fileName = fileUrl.split('/').pop();
    var fileExtension = fileName.split('.').pop();

    gtag('event', 'file_download', {
      'file_name': fileName,
      'file_extension': fileExtension,
      'link_text': $(this).text(),
      'event_category': 'Download',
      'event_label': fileName
    });
  });
});

Social Share Tracking

Track social sharing button clicks.

$(document).ready(function() {
  // Tilda social buttons
  $('.t-sociallinks__item a').on('click', function() {
    var socialNetwork = 'unknown';
    var href = $(this).attr('href');

    if (href.includes('facebook.com')) socialNetwork = 'facebook';
    else if (href.includes('twitter.com') || href.includes('x.com')) socialNetwork = 'twitter';
    else if (href.includes('linkedin.com')) socialNetwork = 'linkedin';
    else if (href.includes('instagram.com')) socialNetwork = 'instagram';

    gtag('event', 'social_share', {
      'method': socialNetwork,
      'content_type': 'page',
      'item_id': window.location.pathname
    });
  });
});

Zero Block Custom Element Tracking

Track custom elements in Tilda Zero Block.

Track Zero Block Button by ID

// Add to HTML element in Zero Block
<script>
$(document).ready(function() {
  $('#rec123456 .tn-atom').on('click', function() {
    gtag('event', 'zero_block_interaction', {
      'element_id': $(this).attr('id'),
      'element_class': $(this).attr('class'),
      'block_id': 'rec123456'
    });
  });
});
</script>

Track Zero Block Form

$('#rec123456 form').on('submit', function(e) {
  gtag('event', 'zero_block_form_submit', {
    'form_location': 'rec123456',
    'page': document.title
  });
});

Multi-Page vs Single-Page Sites

One-Page Site Navigation

For one-page Tilda sites with anchor links:

$(document).ready(function() {
  // Track anchor link clicks as virtual pageviews
  $('a[href^="#"]').on('click', function() {
    var section = $(this).attr('href');

    gtag('event', 'page_view', {
      'page_title': document.title + ' - ' + section,
      'page_location': window.location.href.split('#')[0] + section,
      'page_path': window.location.pathname + section
    });
  });
});

Using GTM for Event Tracking (Recommended)

Setup in Google Tag Manager

1. Install GTM on Tilda (see GTM Setup)

2. Create Custom Event Trigger

   Trigger Type: Custom Event Event name: tildaform:aftersuccess

3. Create GA4 Event Tag

   Tag Type: Google Analytics: GA4 Event Event Name: form_submit Event Parameters:

   • form_id: \{\{dlv - form.formId\}\}
   • form_name: \{\{dlv - form.formname\}\}

4. Create Data Layer Variables

   Variable Type: Data Layer Variable Data Layer Variable Name: formId Name: dlv - form.formId

5. Publish Container

Push Custom Events to Data Layer

In Tilda, push events to GTM's data layer:

$(document).ready(function() {
  $('.t-btn[data-event="demo_request"]').on('click', function() {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'demo_request_click',
      'buttonText': $(this).text(),
      'pageUrl': window.location.href
    });
  });
});

Then create corresponding triggers and tags in GTM.

Testing & Debugging

Use GA4 DebugView

Enable debug mode:

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

In GA4:

• Go to Admin → DebugView
• Perform actions on your Tilda site
• Verify events appear with correct parameters

Browser Console Logging

Add console logs to verify events fire:

$(document).on('tildaform:aftersuccess', function(e, data) {
  console.log('Form submission detected:', data);

  gtag('event', 'form_submit', {
    'form_id': data.formId
  });

  console.log('GA4 event sent: form_submit');
});

GTM Preview Mode

If using GTM:

1. GTM → Preview
2. Enter your Tilda URL
3. Perform actions
4. Verify events in Tag Assistant

Common Event Parameters

Use consistent parameters across events:

// Standard event structure
gtag('event', 'event_name', {
  'event_category': 'Category', // Forms, Buttons, Links
  'event_label': 'Label', // Specific identifier
  'value': 0, // Numeric value
  'page': document.title, // Current page
  'page_location': window.location.href, // Full URL
  'page_path': window.location.pathname // URL path
});

Best Practices

1. Use Descriptive Event Names

// Good
gtag('event', 'pricing_calculator_interaction', {...});

// Bad
gtag('event', 'click', {...});

2. Track User Journey

Track key steps in conversion funnel:

1. Page view
2. Section scroll (interest)
3. Form start (intent)
4. Form submit (conversion)

3. Avoid Over-Tracking

Don't track every single click. Focus on:

• Conversion-related actions
• Key user interactions
• Navigation between important sections

4. Test on Published Site

Always test on your published Tilda URL, not preview mode.

5. Document Your Events

Keep a spreadsheet of:

• Event name
• Trigger
• Parameters
• Purpose

Troubleshooting

Events Not Firing

See Events Not Firing Troubleshooting.

Common issues:

• Site not republished after adding code
• jQuery not ready when code runs
• Event listener syntax errors
• Testing in preview mode instead of published site

Tilda Events Not Captured

// Make sure to wait for document ready
$(document).ready(function() {
  // Your event listeners here
});

Duplicate Events

Cause: Event listeners attached multiple times.

Fix: Use .off() before .on():

$('.t-btn').off('click').on('click', function() {
  // Event handler
});

Next Steps

• Install GTM - For easier event management
• Troubleshoot Tracking - Debug issues
• GA4 Setup - Initial installation

For general event tracking concepts, see GA4 Event Tracking Guide.