Install Meta Pixel on Tilda (Step-by-Step)

How to install Meta (Facebook) Pixel on Tilda using custom code, GTM, or HTML blocks for comprehensive event tracking.

Learn how to install Meta Pixel (formerly Facebook Pixel) on your Tilda website using Site Settings, HTML blocks, or Google Tag Manager for tracking page views, leads, and conversions.

Installation Methods

Method	Difficulty	Flexibility	Recommended For
Site Settings	Easy	Low	Site-wide tracking (recommended)
HTML Block	Easy	Medium	Page-specific pixels
Google Tag Manager	Medium	High	Multiple tags, easier updates

Method 1: Site Settings (Recommended)

Install Meta Pixel globally across your entire Tilda site.

Setup Steps

Get Your Pixel ID
- Go to Meta Events Manager
- Select your Pixel or create new one
- Copy your Pixel ID (16-digit number, e.g., 1234567890123456)
Access Tilda Site Settings
- Log in to Tilda
- Open your site
- Click Site Settings (gear icon)
- Go to Analytics tab

Add Meta Pixel Code

Paste this code in the Analytics field:

<!-- 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>
<noscript>
  <img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>
<!-- End Meta Pixel Code -->

Replace YOUR_PIXEL_ID with your actual 16-digit Pixel ID.

Save and Republish
- Click Save
- Click Publish (top right)
- Republish all pages
Verify Installation
- Install Meta Pixel Helper extension
- Visit your published site
- Extension should show green icon with Pixel ID

What Gets Tracked (Site Settings Method)

Automatic:

PageView - Every page load

Requires Additional Code:

Lead - Form submissions
ViewContent - Specific page views
CompleteRegistration - Signups
Custom events

Method 2: HTML Block (Page-Specific)

Add Meta Pixel to specific landing pages or use different pixels per page.

When to Use HTML Block

Different pixels for different campaigns
A/B testing pixel setups
Landing pages with unique tracking
Campaign-specific conversions

Setup Steps

Open Page Editor
- Go to your Tilda page
- Click Edit page
Add HTML Block
- Click + Add Block
- Choose Other category
- Select HTML (T123)

Insert Meta Pixel Code

<!-- 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');

// Track this as ViewContent
fbq('track', 'ViewContent', {
  content_name: 'Landing Page',
  content_category: 'Campaign Name'
});
</script>

Position Block at Top
- Drag HTML block to top of page
- Ensures pixel loads early
Save and Publish

Method 3: Google Tag Manager (Recommended for Multiple Tags)

GTM provides the most flexibility for managing Meta Pixel along with other tags.

Prerequisites

GTM installed on Tilda
Meta Pixel ID

Setup Steps

Create Meta Pixel Tag in GTM

a. In GTM, go to 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. Name: Meta Pixel - Base Code

f. Save

Create Lead Event Tag

a. Tags → New

b. Tag Configuration → Custom HTML

c. Add code:
```
<script>
fbq('track', 'Lead', {
  content_name: {{Page Path}},
  content_category: 'Contact Form'
});
</script>
```
d. Triggering: Select your form submission trigger (e.g., Custom Event - Tilda Form Success)

e. Name: Meta Pixel - Lead Event

f. Save
Publish Container
- Click Submit
- Add version name
- Click Publish

Track Tilda Form Submissions

Tilda forms require event listeners to track submissions.

Basic Lead Tracking

Add to Site Settings → Analytics (below Meta Pixel base code):

<script>
$(document).ready(function() {
  // Track all Tilda form submissions as leads
  $(document).on('tildaform:aftersuccess', function(e, data) {
    fbq('track', 'Lead', {
      content_name: data.formname || 'Contact Form',
      content_category: 'Form Submission'
    });

    console.log('Meta Pixel: Lead event sent');
  });
});
</script>

Contact Form Tracking

$(document).on('tildaform:aftersuccess', function(e, data) {
  // Track contact forms specifically
  if (data.formname && data.formname.toLowerCase().includes('contact')) {
    fbq('track', 'Contact', {
      content_name: 'Contact Form'
    });
  }
});

Registration/Signup Form Tracking

$(document).on('tildaform:aftersuccess', function(e, data) {
  // Track registrations
  if (data.formname && (data.formname.toLowerCase().includes('sign up') ||
      data.formname.toLowerCase().includes('register'))) {
    fbq('track', 'CompleteRegistration', {
      content_name: 'User Registration',
      status: 'completed'
    });
  }
});

Payment Form Tracking (Purchase)

For Tilda payment forms:

$(document).on('tildaform:afterpaymentsuccess', function(e, data) {
  fbq('track', 'Purchase', {
    value: parseFloat(data.amount) || 0,
    currency: data.currency || 'USD',
    content_name: data.product_name || 'Product',
    content_type: 'product'
  });

  console.log('Meta Pixel: Purchase event sent', data);
});

$(document).on('tildaform:aftersuccess', function(e, data) {
  // Track newsletter signups
  if (data.formname && data.formname.toLowerCase().includes('subscribe')) {
    fbq('track', 'Subscribe', {
      content_name: 'Newsletter',
      value: 0,
      currency: 'USD'
    });
  }
});

Track Button Clicks

Track All Tilda Buttons

<script>
$(document).ready(function() {
  $('.t-btn').on('click', function() {
    var buttonText = $(this).text().trim();

    fbq('trackCustom', 'ButtonClick', {
      button_text: buttonText,
      button_url: $(this).attr('href') || '',
      page: window.location.pathname
    });
  });
});
</script>

Track Specific CTA Buttons

// Track "Get Started" or "Sign Up" buttons
$('.t-btn:contains("Get Started"), .t-btn:contains("Sign Up")').on('click', function() {
  fbq('track', 'Lead', {
    content_name: 'CTA Button Click',
    content_category: $(this).text().trim()
  });
});

Track Download Buttons

$('a[href$=".pdf"], a[href$=".doc"], a[href$=".zip"]').on('click', function() {
  fbq('trackCustom', 'FileDownload', {
    file_name: $(this).attr('href').split('/').pop(),
    link_text: $(this).text()
  });
});

Track Page Views as ViewContent

For specific pages or content types:

Landing Page Tracking

Add to HTML block on landing page:

<script>
$(document).ready(function() {
  fbq('track', 'ViewContent', {
    content_name: document.title,
    content_category: 'Landing Page',
    content_type: 'page'
  });
});
</script>

Service/Product Page Tracking

fbq('track', 'ViewContent', {
  content_name: 'Service Name',
  content_category: 'Services',
  value: 0,
  currency: 'USD'
});

Track Phone and Email Clicks

Phone Number Tracking

<script>
$(document).ready(function() {
  $('a[href^="tel:"]').on('click', function() {
    fbq('trackCustom', 'PhoneClick', {
      phone_number: $(this).attr('href').replace('tel:', ''),
      page: window.location.pathname
    });
  });
});
</script>

Email Link Tracking

$('a[href^="mailto:"]').on('click', function() {
  fbq('track', 'Contact', {
    contact_method: 'email',
    email: $(this).attr('href').replace('mailto:', '')
  });
});

Advanced Tracking

$(document).ready(function() {
  // Track popup opens
  $(document).on('tildapopup:opened', function(e, data) {
    fbq('trackCustom', 'PopupOpened', {
      popup_id: data.popupid
    });
  });
});

Track Scroll Depth

$(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;

        fbq('trackCustom', 'ScrollDepth', {
          depth: threshold,
          page: window.location.pathname
        });
      }
    });
  });
});

Track Video Views

For embedded YouTube videos:

$('iframe[src*="youtube.com"]').each(function() {
  var videoSrc = $(this).attr('src');
  var videoId = videoSrc.match(/embed\/([^?]*)/);

  if (videoId) {
    fbq('trackCustom', 'VideoView', {
      video_platform: 'youtube',
      video_id: videoId[1]
    });
  }
});

Verification & Testing

1. Meta Pixel Helper

Install Meta Pixel Helper Chrome extension:

Indicators:

Green icon = Pixel working correctly
Yellow icon = Warnings (check details)
Red icon = Errors
No icon = Pixel not detected

Click the extension to see:

Pixel ID
Events fired
Event parameters

2. Meta Events Manager

Real-time event testing:

Go to Meta Events Manager
Select your Pixel
Click Test Events tab
Enter your Tilda site URL
Navigate site and perform actions
Events should appear within seconds

3. Check Event Parameters

In Events Manager Test Events:

Click on event to expand
Verify parameters are present:
- content_name
- content_category
- value (for purchase/lead events)
- currency (if value is set)

4. Browser Console

Check for Meta Pixel:

// Open console (F12)
console.log(typeof fbq);
// Should return "function"

// Check if Pixel ID is loaded
console.log(window._fbq);

Troubleshooting

Pixel Not Loading

Check:

Pixel ID is correct (16 digits)
Code in Site Settings → Analytics
Site has been republished
No JavaScript errors in console
Ad blocker disabled for testing
Testing on published site, not preview

Verify in console:

console.log(window.fbq);
// Should show function, not undefined

Duplicate Events

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

Fix:

Use Site Settings for base pixel
Use HTML blocks only for page-specific tracking
Remove duplicate implementations

Events Not Firing

See Events Not Firing Troubleshooting.

Common issues:

Form event listener not attached
Site not republished after adding code
Testing in preview mode
jQuery not ready when code runs

Fix for forms:

// Ensure jQuery is ready
$(document).ready(function() {
  $(document).on('tildaform:aftersuccess', function(e, data) {
    console.log('Form submitted:', data);
    fbq('track', 'Lead', {
      content_name: data.formname
    });
  });
});

Missing Event Parameters

Cause: Parameters not formatted correctly.

Correct format:

fbq('track', 'Lead', {
  content_name: 'Contact Form',  // String
  value: 0,                       // Number (no currency symbol)
  currency: 'USD'                 // ISO currency code
});

Wrong format:

fbq('track', 'Lead', {
  content_name: undefined,        // Missing data
  value: '$10',                   // Should be number: 10
  currency: 'dollars'             // Should be: 'USD'
});

Integrate with Tilda's GDPR cookie notice:

<script>
// Only initialize Meta Pixel after consent
if (localStorage.getItem('cookieconsent_status') === 'allow') {
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
} else {
  console.log('Meta Pixel blocked - waiting for consent');
}

// Listen for consent changes
window.addEventListener('storage', function(e) {
  if (e.key === 'cookieconsent_status' && e.newValue === 'allow') {
    fbq('init', 'YOUR_PIXEL_ID');
    fbq('track', 'PageView');
  }
});
</script>

Limited Data Use (CCPA)

For California visitors:

fbq('dataProcessingOptions', ['LDU'], 1, 1000);
fbq('init', 'YOUR_PIXEL_ID');

Advanced Matching

Send hashed customer data for better attribution (if collecting user info):

fbq('init', 'YOUR_PIXEL_ID', {
  em: 'hashed_email',           // SHA-256 hashed email
  fn: 'hashed_first_name',      // SHA-256 hashed first name
  ln: 'hashed_last_name',       // SHA-256 hashed last name
  ph: 'hashed_phone',           // SHA-256 hashed phone
  ct: 'hashed_city',            // SHA-256 hashed city
  st: 'hashed_state',           // SHA-256 hashed state
  zp: 'hashed_zip'              // SHA-256 hashed zip
});

Note: Meta automatically hashes data sent via fbq('track'). Only use pre-hashed data if implementing server-side hashing.

Best Practices for Tilda

1. Use Site Settings for Base Pixel

Add Meta Pixel initialization in Site Settings → Analytics. This loads on every page.

2. Add Event Tracking Below Base Code

In Site Settings, add form and button tracking below the base pixel code.

3. Republish After Changes

Critical: Always click Publish after adding or changing pixel code.

4. Test on Published Site

Preview mode may not load custom scripts. Always test on your published Tilda URL.

5. Use Standard Event Names

Use Meta's standard events when possible:

Lead
Purchase
CompleteRegistration
Contact
ViewContent

Only use trackCustom for truly custom events.

6. Include Meaningful Parameters

Always add context to events:

fbq('track', 'Lead', {
  content_name: data.formname,
  content_category: 'Contact Forms',
  value: 0,
  currency: 'USD'
});

Next Steps

GTM Setup - Manage Meta Pixel through GTM
GA4 Setup - Add Google Analytics
Troubleshoot Tracking - Debug issues

For general Meta Pixel concepts, see Meta Pixel Guide.

Nach oben

Install Meta Pixel on Tilda (Step-by-Step)

Installation Methods

Method 1: Site Settings (Recommended)

Setup Steps

What Gets Tracked (Site Settings Method)

Method 2: HTML Block (Page-Specific)

When to Use HTML Block

Setup Steps

Method 3: Google Tag Manager (Recommended for Multiple Tags)

Prerequisites

Setup Steps

Track Tilda Form Submissions

Basic Lead Tracking

Contact Form Tracking

Registration/Signup Form Tracking

Payment Form Tracking (Purchase)

Newsletter Subscription

Track Button Clicks

Track All Tilda Buttons

Track Specific CTA Buttons

Track Download Buttons

Track Page Views as ViewContent

Landing Page Tracking

Service/Product Page Tracking

Track Phone and Email Clicks

Phone Number Tracking

Email Link Tracking

Advanced Tracking

Track Popup Interactions

Track Scroll Depth

Track Video Views

Verification & Testing

1. Meta Pixel Helper

2. Meta Events Manager

3. Check Event Parameters

4. Browser Console

Troubleshooting

Pixel Not Loading

Duplicate Events

Events Not Firing

Missing Event Parameters

Privacy & GDPR Compliance

Cookie Consent

Limited Data Use (CCPA)

Advanced Matching

Best Practices for Tilda

1. Use Site Settings for Base Pixel

2. Add Event Tracking Below Base Code

3. Republish After Changes

4. Test on Published Site

5. Use Standard Event Names

6. Include Meaningful Parameters

Next Steps