Install Meta Pixel on Tilda (Step-by-Step) | OpsBlu Docs

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

Install Meta Pixel globally across your entire Tilda site.

Setup Steps

  1. 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)

  2. Access Tilda Site Settings

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

  3. 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.

  4. Save and Republish

    • Click Save
    • Click Publish (top right)
    • Republish all pages

  5. 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

  1. Open Page Editor

    • Go to your Tilda page
    • Click Edit page

  2. Add HTML Block

    • Click + Add Block
    • Choose Other category
    • Select HTML (T123)

  3. 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>

  4. Position Block at Top

    • Drag HTML block to top of page
    • Ensures pixel loads early

  5. Save and Publish

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

Prerequisites

Setup Steps

  1. 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

  2. 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

  3. 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);
});

Newsletter Subscription

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

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

Advanced Tracking

Track Popup Interactions

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

  1. Go to Meta Events Manager
  2. Select your Pixel
  3. Click Test Events tab
  4. Enter your Tilda site URL
  5. Navigate site and perform actions
  6. 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'
});

Privacy & GDPR Compliance

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

For general Meta Pixel concepts, see Meta Pixel Guide.

Back to top