Install Google Tag Manager on Tilda | OpsBlu Docs

Install Google Tag Manager on Tilda

How to install GTM on Tilda using Site Settings for site-wide tracking and easier tag management.

Google Tag Manager (GTM) is the recommended method for managing analytics and marketing tags on Tilda. This guide covers installation and configuration specific to Tilda websites.

Why Use GTM on Tilda?

Benefits:

  • Manage all tags from one interface (GA4, Meta Pixel, etc.)
  • Update tracking without republishing your Tilda site
  • Better performance (single container vs multiple scripts)
  • Easier for non-technical team members
  • Built-in debugging and preview tools
  • Version control and rollback capability

Tilda-Specific Advantages:

  • No need to republish site for tag updates
  • Centralized tracking code management
  • Easier to track Tilda form submissions
  • Can use Tilda's built-in jQuery
  • Track Zero Block interactions without editing blocks

Installation Method

Unlike Shopify, Tilda has one primary installation location: Site Settings.

Method Location Recommended
Site Settings Settings → Analytics Yes ✓
HTML Block Per-page block Only for testing

Installation Steps

Step 1: Create GTM Account and Container

  1. Go to Google Tag Manager

  2. Create Account

    • Account Name: Your company/site name
    • Country: Your location
    • Click Continue

  3. Create Container

    • Container Name: Your Tilda domain (e.g., mysite.tilda.ws or yourdomain.com)
    • Target Platform: Web
    • Click Create

  4. Accept Terms of Service

  5. Copy Container Code

    You'll see two code snippets:

    • Head snippet: Goes in <head>
    • Body snippet: Goes in <body> (noscript fallback)

    Your Container ID will look like: GTM-XXXXXXX

Step 2: Add GTM to Tilda Site Settings

  1. Access Site Settings

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

  2. Add GTM Code

    Paste both snippets in the Analytics field:

    <!-- Google Tag Manager -->
<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-XXXXXXX');</script>
<!-- End Google Tag Manager -->

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

    Important: Replace GTM-XXXXXXX with your actual Container ID.

  3. Save Changes

    • Click Save

  4. Republish Site

    • Click Publish button (top right)
    • Select All pages (or specific pages)
    • Wait for publishing to complete

    Critical: Tilda requires republishing to apply code changes.

Step 3: Verify Installation

  1. Use GTM Preview Mode

    • In GTM, click Preview button
    • Enter your Tilda site URL (published URL, not preview)
    • Click Connect
    • GTM Tag Assistant opens in new window

  2. Check Browser Console

    Open browser developer tools (F12) and run:

    console.log(window.google_tag_manager);

    You should see an object with your GTM container ID.

  3. Verify Data Layer

    console.log(window.dataLayer);

    Should return an array (may be empty initially).

  4. Check on Multiple Pages

    • Home page
    • Content pages
    • Landing pages
    • Pages with forms

Configure GTM for Tilda

Enable Built-in Variables

In GTM, enable common variables:

  1. Go to Variables → Configure
  2. Enable these built-in variables:
    • Page URL
    • Page Path
    • Page Hostname
    • Referrer
    • Click Element
    • Click Classes
    • Click ID
    • Click Text
    • Form Element
    • Form Classes
    • Form ID

Create Tilda-Specific Variables

Create custom variables for Tilda elements:

Variable: Page Title

  • Variable Type: JavaScript Variable
  • Global Variable Name: document.title
  • Name: JS - Page Title

Variable: Page Path

  • Variable Type: Built-in
  • Name: Page Path (already available)

Variable: jQuery Check

Since Tilda includes jQuery, create a helper variable:

  • Variable Type: Custom JavaScript
  • Code:
function() {
  return typeof jQuery !== 'undefined' ? 'available' : 'not available';
}
  • Name: JS - jQuery Status

Create Tilda Event Triggers

Trigger: Tilda Form Success

Track when Tilda forms are successfully submitted:

  1. Trigger Type: Custom Event
  2. Event name: tildaform:aftersuccess
  3. Name: Custom Event - Tilda Form Success

Note: Requires pushing event to data layer (see below).

Trigger: All Button Clicks

Track button clicks using Click trigger:

  1. Trigger Type: Click - All Elements
  2. This trigger fires on: Some Clicks
  3. Condition: Click Classes contains t-btn
  4. Name: Click - Tilda Buttons

Trigger: Popup Opened

  1. Trigger Type: Custom Event
  2. Event name: tildapopup:opened
  3. Name: Custom Event - Popup Opened

Push Tilda Events to Data Layer

Tilda doesn't automatically push events to GTM's data layer. Add this code to Site Settings → Analytics:

Form Submission Tracking

Add below your GTM container code:

<script>
$(document).ready(function() {
  // Push form submissions to data layer
  $(document).on('tildaform:aftersuccess', function(e, data) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'tildaform:aftersuccess',
      'formId': data.formId,
      'formName': data.formname || 'Contact Form',
      'transactionId': data.tranid,
      'formData': data
    });
  });
});
</script>

<script>
$(document).ready(function() {
  // Push popup opens to data layer
  $(document).on('tildapopup:opened', function(e, data) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'tildapopup:opened',
      'popupId': data.popupid
    });
  });
});
</script>

Button Click Tracking (Alternative Method)

If you want more detailed button tracking via data layer:

<script>
$(document).ready(function() {
  $('.t-btn').on('click', function() {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'event': 'tilda_button_click',
      'buttonText': $(this).text().trim(),
      'buttonHref': $(this).attr('href') || '',
      'buttonLocation': window.location.pathname
    });
  });
});
</script>

Create GA4 Tag in GTM

Once GTM is installed on Tilda:

1. Create GA4 Configuration Tag

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 cookie settings
  • Set user properties
  • Configure fields

e. Triggering: Select All Pages

f. Save and name it "GA4 - Configuration"

2. Create Form Submission Event Tag

a. Tags → New

b. Tag Configuration → Google Analytics: GA4 Event

c. Configuration Tag: Select your GA4 Configuration tag

d. Event Name: form_submit

e. Event Parameters:

  • Parameter Name: form_id | Value: \{\{formId\}\}
  • Parameter Name: form_name | Value: \{\{formName\}\}

f. Triggering: Select Custom Event - Tilda Form Success

g. Save and name it "GA4 - Form Submit"

3. Create Data Layer Variables for Form

Variable 1:

  • Variable Type: Data Layer Variable
  • Data Layer Variable Name: formId
  • Name: DLV - Form ID

Variable 2:

  • Variable Type: Data Layer Variable
  • Data Layer Variable Name: formName
  • Name: DLV - Form Name

Create Meta Pixel Tag in GTM

1. Add Meta Pixel Base Code

a. Tags → New

b. Tag Configuration → Custom HTML

c. Add Meta Pixel code:

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

d. Triggering: All Pages

e. Save and name it "Meta Pixel - Base Code"

2. Add Meta Pixel Lead Event

a. Tags → New

b. Tag Configuration → Custom HTML

c. Add code:

<script>
fbq('track', 'Lead', {
  content_name: {{DLV - Form Name}}
});
</script>

d. Triggering: Custom Event - Tilda Form Success

e. Save and name it "Meta Pixel - Lead Event"

Publish GTM Container

  1. Click Submit button (top right)
  2. Version Name: "Initial Tilda Setup"
  3. Version Description: "GTM installed with GA4 and form tracking"
  4. Click Publish

Testing & Debugging

Use GTM Preview Mode

  1. In GTM, click Preview
  2. Enter your Tilda URL (published site)
  3. Click Connect
  4. Tag Assistant opens
  5. Perform actions on your site:
    • Navigate pages
    • Submit forms
    • Click buttons
  6. Verify tags fire in Tag Assistant

Debug Checklist

  • ✓ GTM container loads on all pages
  • ✓ Data layer events appear in Tag Assistant
  • ✓ Custom triggers fire correctly
  • ✓ Variables populate with correct data
  • ✓ Tags send data to analytics platforms
  • ✓ No JavaScript errors in console

Check Data Layer in Console

// View all data layer events
console.table(window.dataLayer);

// Monitor new pushes
var originalPush = window.dataLayer.push;
window.dataLayer.push = function() {
  console.log('Data Layer Push:', arguments[0]);
  originalPush.apply(window.dataLayer, arguments);
};

Test Form Submissions

  1. Fill out a Tilda form
  2. Submit the form
  3. Check GTM Preview:
    • Look for tildaform:aftersuccess event
    • Verify form variables populated
    • Check if GA4 and Meta Pixel tags fired

Troubleshooting

GTM Container Not Loading

Check:

  • Container ID is correct (GTM-XXXXXXX)
  • Code in Site Settings → Analytics
  • Site has been republished (critical!)
  • No JavaScript errors blocking execution
  • Browser cache cleared
  • Testing on published site, not preview

Verify in console:

console.log(typeof google_tag_manager);
// Should be "object", not "undefined"

Data Layer Empty

Cause: No events pushed yet or Tilda events not captured.

Fix: Add event listeners to push Tilda events (see "Push Tilda Events to Data Layer" section above).

Events Not Firing

See Events Not Firing Troubleshooting for detailed debugging.

Quick checks:

  • GTM container published (not just saved)
  • Triggers configured correctly
  • Event names match exactly (case-sensitive)
  • Tilda site republished after adding code
  • Testing on published URL

jQuery Not Defined

Issue: $ is not defined error.

Fix: Tilda loads jQuery, but ensure code runs after DOM ready:

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

Or use:

jQuery(document).ready(function($) {
  // Use $ here
});

Tilda Preview Mode Issues

Issue: GTM doesn't work in Tilda preview mode.

Fix: Always test on published site, not preview. Preview mode may not load custom scripts correctly.

Privacy & Consent Management

Integrate GTM with Tilda's GDPR settings:

<script>
// Check cookie consent before firing marketing tags
window.dataLayer = window.dataLayer || [];

// Set default consent (before GTM loads)
window.dataLayer.push({
  'event': 'consent_default',
  'analytics_storage': 'denied',
  'ad_storage': 'denied'
});

// Update consent when user accepts
if (localStorage.getItem('cookieconsent_status') === 'allow') {
  window.dataLayer.push({
    'event': 'consent_update',
    'analytics_storage': 'granted',
    'ad_storage': 'granted'
  });
}
</script>

Trigger: Consent Granted

  • Trigger Type: Custom Event
  • Event name: consent_update
  • Name: Custom Event - Consent Granted

Use this trigger for marketing pixels (Meta, TikTok, etc.).

Best Practices for Tilda + GTM

1. Use Site Settings for GTM Container

Add GTM container code once in Site Settings → Analytics. Don't add to individual HTML blocks.

2. Push Tilda Events to Data Layer

Since Tilda doesn't natively integrate with GTM, manually push events:

// Good practice: centralized event pushing
$(document).on('tildaform:aftersuccess', function(e, data) {
  dataLayer.push({
    'event': 'tildaform:aftersuccess',
    'formId': data.formId,
    'formName': data.formname
  });
});

3. Test Before Publishing

Use GTM Preview mode to test all tags before publishing container.

4. Name Tags and Triggers Clearly

Use consistent naming:

  • Tags: GA4 - Event Name, Meta Pixel - Event Name
  • Triggers: Custom Event - Description, Click - Description
  • Variables: DLV - Name, JS - Name

5. Republish Tilda After Code Changes

If you add event listeners to Tilda Site Settings, remember to republish the site.

6. Document Your Setup

Keep notes on:

  • What events you're tracking
  • Which triggers fire which tags
  • Custom variables created
  • Tilda form IDs and purposes

Advanced GTM Features for Tilda

Track Zero Block Interactions

For custom Zero Block elements:

<!-- Add to HTML element in Zero Block -->
<script>
$(document).ready(function() {
  $('#rec123456 .custom-element').on('click', function() {
    dataLayer.push({
      'event': 'zero_block_click',
      'elementId': $(this).attr('id'),
      'blockId': 'rec123456'
    });
  });
});
</script>

Then create trigger in GTM for zero_block_click event.

Track Scroll Depth

<script>
$(document).ready(function() {
  var scrollTracked = {};

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

    [25, 50, 75, 100].forEach(function(threshold) {
      if (scrollPercent >= threshold && !scrollTracked[threshold]) {
        scrollTracked[threshold] = true;

        dataLayer.push({
          'event': 'scroll_depth',
          'scrollDepth': threshold
        });
      }
    });
  });
});
</script>

Track Multiple Tilda Sites

If you manage multiple Tilda sites:

  • Use one GTM account
  • Create separate containers for each site
  • Share tags across containers using GTM templates

Performance Optimization

Minimize Custom JavaScript

Use GTM's built-in features when possible:

  • Click triggers instead of custom click handlers
  • Form submission triggers
  • Built-in variables

Async Tag Loading

Most tags in GTM load asynchronously by default. For custom HTML tags, ensure async:

<script async src="https://example.com/script.js"></script>

Monitor Tag Performance

In GTM Preview, check:

  • Tag firing order
  • Time to fire
  • Any errors or warnings

Next Steps

For general GTM concepts, see Google Tag Manager Guide.

शीर्ष पर वापस जाएँ