Tilda Analytics Implementation | OpsBlu Docs

Tilda Analytics Implementation

Technical guide to implementing analytics tracking on Tilda's block-based builder using custom HTML blocks, site settings injection, and the T123 API.

Analytics Architecture on Tilda

Tilda uses a block-based page construction system where each page is composed of discrete content blocks rendered server-side before delivery. The platform provides three injection points for analytics code:

  • Site Settings (Head/Body) -- Global code injection via Project Settings > More > HTML code for HEAD / HTML code before BODY closing tag
  • Page-Level Code -- Per-page injection via Page Settings > More > same HEAD/BODY fields
  • Custom HTML Block (T123) -- The T123 block type accepts arbitrary HTML/CSS/JavaScript inline within the page flow

Tilda pages are served from tilda.ws (free) or custom domains (paid plans). All pages share the same project-level settings, so global tracking code injected at the project level fires on every page without per-page configuration.

Rendering Pipeline

Tilda compiles pages into static HTML at publish time. JavaScript executes client-side after the full DOM is available. There is no server-side rendering phase for custom scripts -- all injected code runs in the browser.

Installing Tracking Scripts

Global Installation via Site Settings

Navigate to Project Settings > More > HTML code for HEAD section:

<!-- Google Tag Manager - Head -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
</script>

In HTML code before BODY closing tag:

<!-- Google Tag Manager - noscript -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Page-Level Script Override

For landing pages that need different tracking, use Page Settings > More > HTML code for HEAD section. Page-level code fires in addition to project-level code -- it does not replace it.

T123 Custom HTML Block

The T123 block allows inline JavaScript within the page body. Add it from the block library under "Other" or by searching "HTML":

<div id="custom-tracking-block">
  <script>
    // This executes when the block renders in the DOM
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'section_view',
      section_id: 'pricing',
      page_path: window.location.pathname
    });
  </script>
</div>

The T123 block executes in document order, so place it after the content block you want to track.

Data Layer Implementation

Tilda does not provide a built-in data layer. You must initialize window.dataLayer manually in the HEAD injection:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    platform: 'tilda',
    project_id: '12345',
    page_type: document.querySelector('[data-tilda-page-id]')?.getAttribute('data-tilda-page-id') || 'unknown'
  });
</script>

Form Submission Tracking

Tilda forms fire a tildaform:aftersend event on successful submission. Capture it for analytics:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Tilda form success callback
    window.tildaForm = window.tildaForm || {};
    var originalSuccess = window.tildaForm.onSuccess;

    // Listen for the custom event
    document.addEventListener('tildaform:aftersend', function(e) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'form_submit',
        form_id: e.detail?.formid || 'unknown',
        form_name: e.detail?.formname || 'tilda_form'
      });
    });
  });
</script>

E-commerce Data Layer Events

For Tilda's built-in store, track cart and purchase events:

<script>
  // Cart addition - hook into Tilda's store events
  document.addEventListener('tildastore:addtocart', function(e) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'add_to_cart',
      ecommerce: {
        items: [{
          item_name: e.detail?.title || '',
          price: e.detail?.price || 0,
          quantity: e.detail?.quantity || 1
        }]
      }
    });
  });
</script>

Tilda Publishing API Webhooks

Tilda's Publishing API sends webhook notifications when pages are published. Use this to trigger cache invalidation or analytics revalidation:

POST https://your-server.com/webhook/tilda-publish
Content-Type: application/json

{
  "projectid": "12345",
  "pageid": "67890",
  "published": "2026-01-15T10:30:00Z"
}

Common Issues

Scripts Not Firing After Publish

Tilda caches published pages aggressively. After adding tracking code in project or page settings, you must republish all pages for changes to take effect. Simply saving settings does not update live pages.

T123 Block Script Execution Order

Scripts in T123 blocks execute when the DOM parser reaches them. If your script depends on elements below it in the page, wrap the logic in a DOMContentLoaded listener or use setTimeout:

// Wrong -- element may not exist yet
document.getElementById('below-block').addEventListener('click', handler);

// Correct
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('below-block').addEventListener('click', handler);
});

Form Tracking Fails on Zero Blocks

Tilda's "Zero Block" (advanced design editor) uses a different DOM structure than standard blocks. Form elements inside Zero Blocks do not fire standard tildaform:aftersend events. Instead, attach listeners directly:

document.querySelectorAll('.t-form').forEach(function(form) {
  form.addEventListener('submit', function(e) {
    window.dataLayer.push({ event: 'zero_block_form_submit' });
  });
});

Duplicate Events on SPA-Like Navigation

Tilda pages are standard static HTML with full page reloads between navigation. However, some Tilda templates use AJAX-based page transitions. If you see duplicate pageview events, check whether the template uses #! hash navigation and adjust your GTM trigger to filter by gtm.historyChange.

Content Security Policy Conflicts

Tilda serves pages with permissive CSP headers by default. If you use a custom domain with a CDN that adds stricter CSP headers, inline scripts in T123 blocks may be blocked. Verify CSP headers with:

curl -I https://your-domain.com | grep -i content-security-policy

Platform-Specific Considerations

Plan-dependent features: Custom code injection in HEAD/BODY is available on all paid plans. The free plan restricts custom HTML blocks and does not allow custom domains, which limits analytics configuration.

Tilda API for automation: The Tilda API (api.tildacdn.info/v1/) returns page and project data as JSON. Use getpageslist and getpage endpoints to programmatically audit which pages have tracking code by inspecting the html field in API responses.

Third-party integration blocks: Tilda offers native integration blocks for Google Analytics, Facebook Pixel, and Yandex.Metrica. These are configured in Project Settings > Analytics & Integrations and inject tracking code automatically. However, they provide less control than manual HEAD injection and do not support GTM or custom configurations.

Static export limitations: Tilda allows exporting pages as static HTML (paid plans). Exported pages retain all injected HEAD/BODY code but lose connection to Tilda's form processing backend, breaking form submission tracking.

Cookie consent: Tilda includes a built-in cookie consent banner (Project Settings > Cookie Consent). It sets a tildasession cookie but does not integrate with analytics consent mode. For GDPR compliance, implement consent logic manually before firing tracking scripts.

Back to top