Tilda Analytics Integrations: Setup Guide

Available integrations for Tilda including analytics platforms, tag managers, and marketing pixels using custom code features.

Tilda provides flexible custom code features to integrate analytics platforms, tag managers, and marketing pixels into your website. This section covers the most common integrations and Tilda-specific implementation details.

Available Integrations

Analytics Platforms

Google Analytics 4

Custom code in Site Settings (all pages)
HTML block implementation (specific pages)
GTM implementation (flexible, recommended)
Full tracking available on all pages including forms

Tag Management

Google Tag Manager

Site-wide installation via Site Settings
Works across all Tilda pages
Recommended for managing multiple tags
Easier to update without republishing site

Marketing Pixels

Meta Pixel

Custom code implementation
Form submission tracking
Button click tracking
Event tracking via HTML blocks

Tilda-Specific Integration Features

Custom Code Locations

Tilda offers multiple places to add custom tracking code:

1. Site Settings → Analytics (Recommended for Global Code)

Located in Settings → Analytics
Code loads on every page
Use for: Base analytics, GTM container, pixel initialization
Loads in <head> section

2. Page Settings → HTML Code for <head>

Located in Page → Settings → Advanced Settings
Page-specific code only
Use for: Page-specific tracking, landing page pixels
Useful for A/B testing different pages

3. HTML Block (T123)

Visual block added to page content
Can contain HTML, CSS, and JavaScript
Use for: Inline event tracking, form tracking
More visible and easier to manage per-page

4. Zero Block

Advanced visual editor
Can add HTML/JS to elements
Use for: Custom animations, interactive tracking
Requires understanding of Zero Block structure

Tilda Form Integration

Tilda has built-in forms with special considerations:

Form Submission Events:

// Listen for Tilda form submissions
$(document).on('tildaform:aftersuccess', function(e, data) {
  // Track form submission
  gtag('event', 'form_submit', {
    form_name: data.formId,
    form_type: data.tranid
  });

  fbq('track', 'Lead', {
    content_name: data.formId
  });
});

Form Types in Tilda:

Standard forms (Contact, Lead Gen)
Payment forms (with Tinkoff, PayPal, etc.)
Popup forms
Step forms (multi-step)
Subscribe forms

Zero Block Tracking

Track interactions within Zero Blocks:

<!-- Add to Zero Block HTML element -->
<script>
document.querySelector('#rec123456 .custom-button').addEventListener('click', function() {
  gtag('event', 'button_click', {
    button_name: 'CTA Button',
    block_id: 'rec123456'
  });
});
</script>

Tilda's Built-in Analytics

Tilda provides basic analytics, but has limitations:

Built-in Stats (Settings → Statistics):

Page views
Unique visitors
Traffic sources
Geography

Limitations:

Basic metrics only
No event tracking
No conversion tracking
No user behavior analysis
Limited historical data

Recommendation: Use Google Analytics 4 or GTM for event tracking, conversion tracking, user behavior analysis, and longer data retention.

Integration Best Practices

1. Use Site Settings for Global Code

Add base tracking code in Settings → Analytics:

GTM container (if using GTM)
GA4 base code
Meta Pixel base code
Any code needed on every page

2. Use Tilda's Built-In jQuery

Tilda loads jQuery by default, so you can use it for event listeners without adding dependencies:

// Tilda uses jQuery
$(document).ready(function() {
  // Track button clicks
  $('.t-btn').click(function() {
    var buttonText = $(this).text();
    gtag('event', 'button_click', {
      button_text: buttonText
    });
  });
});

3. Track Tilda-Specific Events

Page Load:

// Track when Tilda page fully loads
$(document).ready(function() {
  gtag('event', 'page_view', {
    page_title: document.title,
    page_location: window.location.href
  });
});

Form Success:

// Track form submissions
$(document).on('tildaform:aftersuccess', function(e, data) {
  gtag('event', 'generate_lead', {
    currency: 'USD',
    value: 0,
    form_id: data.formId
  });
});

Popup Opens:

// Track popup opens
$(document).on('tildapopup:opened', function(e, data) {
  gtag('event', 'popup_open', {
    popup_id: data.popupid
  });
});

Video Plays:

// Track video plays
$('.t-video').on('play', function() {
  gtag('event', 'video_play', {
    video_title: $(this).attr('data-video-title')
  });
});

4. Handle Multi-Page vs One-Page Sites

Multi-Page Sites:

Code in Site Settings loads on every page
Each page view tracked separately
Standard implementation

One-Page Sites:

Single page load
Track scroll depth for sections
Use anchor links to track "page" views

// Track section views on one-page sites
$(document).on('scroll', function() {
  $('.t-rec').each(function() {
    if (isElementInViewport(this) && !$(this).hasClass('tracked')) {
      $(this).addClass('tracked');
      gtag('event', 'section_view', {
        section_id: $(this).attr('id')
      });
    }
  });
});

5. Test Before Publishing

Tilda requires republishing after code changes:

Add code in Settings or page
Save changes
Republish site (this is critical!)
Test on published URL (not preview)
Verify events in analytics platforms

Important: Preview mode may not load custom scripts correctly. Always test on the published site.

Tilda supports cookie banners. Integrate with tracking:

// Wait for consent before tracking
if (localStorage.getItem('cookieConsent') === 'accepted') {
  // Initialize tracking
  gtag('config', 'G-XXXXXXXXXX');
  fbq('init', 'PIXEL_ID');
} else {
  // Show consent banner
  // Initialize only after acceptance
}

Tilda Privacy Settings

Settings → GDPR - Enable EU cookie notice
Customize cookie banner text
Auto-blocks tracking until consent (if configured)

Common Tilda Elements to Track

Buttons

// Track all Tilda buttons
$('.t-btn').click(function() {
  gtag('event', 'button_click', {
    button_text: $(this).text(),
    button_url: $(this).attr('href')
  });
});

Links

// Track external links
$('a[href^="http"]').not('[href*="' + location.hostname + '"]').click(function() {
  gtag('event', 'outbound_click', {
    link_url: $(this).attr('href')
  });
});

Gallery Images

// Track gallery image clicks
$('.t-gallery__img').click(function() {
  gtag('event', 'image_click', {
    image_url: $(this).attr('src')
  });
});

Downloads

// Track file downloads
$('a[href$=".pdf"], a[href$=".doc"], a[href$=".zip"]').click(function() {
  gtag('event', 'file_download', {
    file_name: $(this).attr('href').split('/').pop()
  });
});

Performance Considerations

Script Loading

Tilda loads scripts in specific order:

Tilda core scripts
Site Settings analytics code
Page-specific code
HTML block scripts

Best Practice: Use defer or load scripts after page ready:

$(document).ready(function() {
  // Your tracking code here
  // Ensures Tilda elements are loaded first
});

Minimize Script Size

Use GTM to manage multiple tags (single container load)
Minify custom JavaScript
Load third-party scripts asynchronously
Avoid heavy libraries if not needed (Tilda already includes jQuery)

Tilda vs Other Platforms

Key Differences

No Server-Side Access:

All tracking must be client-side
Cannot implement server-side tracking directly
Use Conversions API apps if needed

All Custom Code:

No native integrations like Shopify
More flexible but requires code knowledge
Greater control over implementation

Page-Based Structure:

Each page can have unique tracking
Great for landing pages with different campaigns
Easy to A/B test tracking setups

Next Steps

Choose your integration to get started:

For general integration concepts, see the global integrations hub.

返回顶部