How to Install Meta Pixel (Facebook Pixel) on Carrd

Meta Pixel (formerly Facebook Pixel) enables tracking for Facebook and Instagram advertising campaigns. This guide covers how to install and configure Meta Pixel on your Carrd site.

Prerequisites

Before installing Meta Pixel on Carrd, you need:

1. A Carrd Pro account (Pro Lite, Pro Standard, or Pro Plus)
2. A Facebook Business Manager account - Create one free
3. A Meta Pixel created in Events Manager
4. Your Pixel ID (15-16 digit number)
5. Published Carrd site (tracking only works on published sites)

Note: Meta Pixel is not available on free Carrd accounts because custom code requires Carrd Pro.

Step 1: Create Your Meta Pixel

If you don't have a Meta Pixel yet:

1. Go to Facebook Events Manager
2. Click Connect Data Sources
3. Select Web
4. Select Meta Pixel
5. Enter a name for your pixel (e.g., "Carrd Landing Page")
6. Optionally enter your Carrd website URL
7. Click Create Pixel

Step 2: Get Your Pixel Code

1. In Events Manager, click your Pixel name
2. Click Continue Pixel Setup
3. Select Install code manually
4. Copy the Pixel base code

The code will look like this:

<!-- 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 Pixel ID (15-16 digit number).

Step 3: Add Meta Pixel to Your Carrd Site

Method 1: Using Embed Element (Recommended)

1. Open your Carrd site in the editor
2. Click the + (Controls) button
3. Select General > Embed
4. Place the embed at the top of your page (early in page layout)
5. Click on the embed element
6. Select Code as the embed type
7. Paste your Meta Pixel code
8. (Optional) Add CSS to hide the embed:

display: none;

9. Click Done
10. Click Publish to publish your site

Method 2: Via Google Tag Manager

If you're using GTM on Carrd, install Meta Pixel through GTM:

1. Go to Google Tag Manager
2. Click Tags > New
3. Click Tag Configuration
4. Select Custom HTML
5. Paste your Meta Pixel code
6. Click Triggering
7. Select All Pages
8. Name the tag "Meta Pixel - Base Code"
9. Click Save
10. Submit and Publish your GTM container

Benefit: Managing Pixel through GTM allows you to add/modify events without republishing Carrd.

Step 4: Verify Meta Pixel Installation

Using Meta Pixel Helper (Recommended)

1. Install Meta Pixel Helper Chrome extension
2. Visit your published Carrd site (not preview)
3. Click the Pixel Helper icon in your browser
4. Verify:
   • ✓ Pixel found
   • ✓ PageView event detected
   • ✓ Pixel ID matches yours
   • ✗ No errors or warnings

Using Events Manager Test Events

1. Go to Facebook Events Manager
2. Select your Pixel
3. Click Test Events tab
4. Enter your published Carrd site URL
5. Click Open Website
6. Visit your site in the opened tab
7. Return to Events Manager - you should see PageView event appear

Using Browser Developer Tools

1. Open your published Carrd site
2. Press F12 to open Developer Tools
3. Go to Network tab
4. Filter by facebook
5. Reload the page
6. Look for requests to facebook.com/tr
7. Click the request and check Payload contains your Pixel ID

Standard Events for Carrd

Meta Pixel tracks standard events. Here are the most relevant for Carrd sites:

PageView (Automatic)

Already included in base code - tracks every page load.

Lead Event (Form Submissions)

Track form submissions as leads:

Add this code in an Embed element placed after your form:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var forms = document.querySelectorAll('form');

  forms.forEach(function(form) {
    form.addEventListener('submit', function(e) {
      // Track lead event
      fbq('track', 'Lead', {
        content_name: 'Contact Form',
        content_category: 'form_submission'
      });
    });
  });
});
</script>

ViewContent Event

Track when users view specific sections (portfolio items, products, etc.):

<script>
// Track when user scrolls to specific section
document.addEventListener('DOMContentLoaded', function() {
  var contentSections = document.querySelectorAll('[data-track-view]');

  contentSections.forEach(function(section) {
    var tracked = false;

    window.addEventListener('scroll', function() {
      if (!tracked && section.getBoundingClientRect().top < window.innerHeight) {
        tracked = true;
        fbq('track', 'ViewContent', {
          content_name: section.getAttribute('data-track-view'),
          content_type: 'section'
        });
      }
    });
  });
});
</script>

In Carrd: Add data-track-view="Section Name" attribute to sections you want to track.

Contact Event

Track when users click to contact you:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track email clicks
  var emailLinks = document.querySelectorAll('a[href^="mailto:"]');
  emailLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      fbq('track', 'Contact', {
        contact_method: 'email'
      });
    });
  });

  // Track phone clicks
  var phoneLinks = document.querySelectorAll('a[href^="tel:"]');
  phoneLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      fbq('track', 'Contact', {
        contact_method: 'phone'
      });
    });
  });
});
</script>

Schedule Event

Track when users click to schedule appointments (Calendly, etc.):

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Track calendly or scheduling links
  var scheduleLinks = document.querySelectorAll('a[href*="calendly"], a[href*="cal.com"]');

  scheduleLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      fbq('track', 'Schedule', {
        content_name: 'Appointment Scheduling',
        content_category: 'scheduling'
      });
    });
  });
});
</script>

CompleteRegistration Event

For waitlist or early access signups:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var signupForms = document.querySelectorAll('form[data-type="signup"]');

  signupForms.forEach(function(form) {
    form.addEventListener('submit', function() {
      fbq('track', 'CompleteRegistration', {
        content_name: 'Waitlist Signup',
        status: 'pending'
      });
    });
  });
});
</script>

Purchase Event (External Products)

If linking to external products (Gumroad, Stripe, etc.):

<script>
document.addEventListener('DOMContentLoaded', function() {
  var purchaseLinks = document.querySelectorAll('a[href*="gumroad.com"], a[href*="stripe.com"]');

  purchaseLinks.forEach(function(link) {
    link.addEventListener('click', function() {
      fbq('track', 'InitiateCheckout', {
        content_name: this.textContent.trim(),
        content_type: 'product'
      });
    });
  });
});
</script>

Custom Events

Create custom events for Carrd-specific interactions:

Button Click Tracking

<script>
document.addEventListener('DOMContentLoaded', function() {
  var ctaButtons = document.querySelectorAll('.button, button, [role="button"]');

  ctaButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      fbq('trackCustom', 'ButtonClick', {
        button_text: this.textContent.trim(),
        button_url: this.getAttribute('href') || 'no_link'
      });
    });
  });
});
</script>

Scroll Depth Tracking

<script>
(function() {
  var scrollMarks = [25, 50, 75, 100];
  var tracked = [];

  function checkScroll() {
    var scrollPercent = Math.round((window.pageYOffset / (document.documentElement.scrollHeight - window.innerHeight)) * 100);

    scrollMarks.forEach(function(mark) {
      if (scrollPercent >= mark && tracked.indexOf(mark) === -1) {
        tracked.push(mark);
        fbq('trackCustom', 'ScrollDepth', {
          percent: mark
        });
      }
    });
  }

  var scrollTimeout;
  window.addEventListener('scroll', function() {
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(checkScroll, 100);
  });
})();
</script>

Outbound Link Clicks

<script>
document.addEventListener('DOMContentLoaded', function() {
  var links = document.querySelectorAll('a');

  links.forEach(function(link) {
    link.addEventListener('click', function() {
      var href = this.getAttribute('href') || '';

      if (href.startsWith('http') && !href.includes(window.location.hostname)) {
        fbq('trackCustom', 'OutboundClick', {
          destination_url: href,
          link_text: this.textContent.trim()
        });
      }
    });
  });
});
</script>

Advanced Configuration

Enable Advanced Matching

Advanced Matching helps improve attribution by matching website visitors to Facebook users:

<script>
fbq('init', 'YOUR_PIXEL_ID', {
  em: 'user_email@example.com', // Don't hardcode - use dynamically if available
  fn: 'first_name',              // Hash these values before sending
  ln: 'last_name',
  ph: 'phone_number',
  external_id: 'user_id'
});
</script>

Important: Only use if you have this data and proper consent. Hash PII before sending.

Automatic Advanced Matching (Recommended for Carrd)

Let Meta Pixel automatically detect and hash email/phone from forms:

<script>
fbq('init', 'YOUR_PIXEL_ID', {}, {
  autoConfig: true,
  debug: false
});
fbq('track', 'PageView');
</script>

Event Deduplication

Prevent duplicate event tracking:

<script>
var eventId = 'event_' + Date.now();

fbq('track', 'Lead', {
  content_name: 'Contact Form'
}, {
  eventID: eventId
});
</script>

Useful if you're sending events from both browser and server.

Carrd-Specific Considerations

One-Page Architecture

Carrd's one-page design affects Pixel tracking:

• Single PageView: One page load = one PageView event
• Scroll tracking more important: Use custom events for scroll depth
• Section engagement: Track views of different sections
• Outbound clicks: Critical for measuring conversions
• Form submissions: Primary conversion event

Form Submission Tracking

Carrd forms redirect or show success state. Ensure tracking fires:

Option 1: Use sendBeacon

<script>
document.addEventListener('DOMContentLoaded', function() {
  var forms = document.querySelectorAll('form');

  forms.forEach(function(form) {
    form.addEventListener('submit', function() {
      // Use beacon transport for guaranteed delivery
      fbq('track', 'Lead', {}, {
        eventID: 'lead_' + Date.now(),
        transport: 'beacon'
      });
    });
  });
});
</script>

Option 2: Event callback with delay

<script>
fbq('track', 'Lead', {}, {
  eventID: 'lead_' + Date.now()
});

// Small delay to ensure tracking fires
setTimeout(function() {
  // Form can redirect now
}, 300);
</script>

Performance Impact

Meta Pixel is lightweight but adds overhead:

• Pixel size: ~30KB
• Load time impact: Typically < 0.1s
• Async loading: Loads in background
• Recommendation: Performance cost is minimal and worthwhile for ad tracking

Custom Audiences

Use Meta Pixel to create custom audiences for retargeting:

Website Visitors

Automatically created when Pixel is installed:

• All website visitors
• Recent visitors (30, 60, 90 days)

Specific Page Visitors

Track visitors who engaged with specific sections:

<script>
// Add this to sections you want to track for custom audiences
fbq('track', 'ViewContent', {
  content_name: 'Portfolio Section',
  content_category: 'portfolio'
});
</script>

Then create audience in Ads Manager:

• Events: ViewContent
• Parameters: content_category equals "portfolio"

Form Abandoners

Track users who started but didn't complete forms:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var forms = document.querySelectorAll('form');

  forms.forEach(function(form) {
    var formStarted = false;
    var inputs = form.querySelectorAll('input, textarea');

    inputs.forEach(function(input) {
      input.addEventListener('focus', function() {
        if (!formStarted) {
          formStarted = true;
          fbq('trackCustom', 'FormStarted', {
            form_type: 'contact'
          });
        }
      });
    });
  });
});
</script>

Create audience of users who triggered FormStarted but NOT Lead.

Conversion Tracking

Set up conversions in Events Manager:

1. Go to Events Manager
2. Select your Pixel
3. Click Aggregated Event Measurement
4. Click Configure Web Events
5. Add Events and prioritize them (max 8):
   • Lead (form submission)
   • Contact (email/phone click)
   • ViewContent (section views)
   • Schedule (appointment booking)

iOS 14+ Considerations

Due to iOS privacy changes:

• Domain verification required: Verify your Carrd domain in Business Manager
• Limited to 8 conversion events: Prioritize your most important events
• Aggregated data: Pixel data is aggregated for iOS users

Privacy and Compliance

Cookie Consent

Implement consent before loading Pixel:

<script>
// Check if user has consented
if (localStorage.getItem('fb_consent') === 'granted') {
  // Load Meta Pixel
  !function(f,b,e,v,n,t,s){...}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
}
</script>

Limited Data Use

For California visitors (CCPA compliance):

<script>
fbq('dataProcessingOptions', ['LDU'], 1, 1000);
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

GDPR Compliance

For EU visitors:

<script>
fbq('consent', 'revoke'); // Revoke by default
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');

// Grant consent when user accepts
function grantFBConsent() {
  fbq('consent', 'grant');
}
</script>

Troubleshooting

Pixel Not Loading

Problem: Meta Pixel Helper shows "No Pixel Found".

Solutions:

1. Verify Carrd Pro: Pixel requires Pro plan
2. Check site is published: Pixel doesn't work in preview mode
3. Verify Pixel ID: Check for typos in 15-16 digit ID
4. Check embed placement: Embed should be near top of page
5. Disable ad blockers: Test with extensions disabled
6. Clear cache: Hard reload (Ctrl+Shift+R)

Events Not Firing

Problem: Pixel loads but events don't fire.

Solutions:

1. Check event syntax: Ensure fbq('track', 'EventName') is correct
2. Verify event triggers: Check that actions (form submit, click) occur
3. Use Test Events: Monitor in real-time in Events Manager
4. Check browser console: Look for JavaScript errors (F12)
5. Test on published site: Events only fire on published Carrd site

Duplicate Events

Problem: Events fire multiple times.

Solutions:

1. Remove duplicate Pixel code: Check for multiple embeds with Pixel
2. Check GTM: If using GTM, remove direct Pixel installation
3. Use event IDs: Implement deduplication with eventID parameter
4. Check trigger conditions: Ensure event listeners aren't duplicated

Form Events Not Tracking

Problem: Lead events don't fire on form submission.

Solutions:

1. Use sendBeacon: Add transport: 'beacon' to event
2. Place embed after form: Event tracking embed must come after form
3. Add delay: Small timeout to ensure event fires before redirect
4. Check form selector: Verify querySelector('form') finds your form
5. Test with Test Events: Monitor live in Events Manager

Multiple Carrd Sites

If you manage multiple Carrd sites:

Option 1: Separate Pixels (Recommended)

Create a unique Pixel for each site:

• Pros: Isolated data, clear attribution
• Cons: More Pixels to manage
• Best for: Different projects or clients

Option 2: Single Pixel with Parameters

Use one Pixel with custom parameters:

<script>
fbq('track', 'PageView', {
  site_name: 'Portfolio Site',
  site_type: 'portfolio'
});
</script>

• Pros: Consolidated audience data
• Cons: Mixed reporting
• Best for: Related sites under one brand

Next Steps

• Configure GA4 Tracking for comprehensive analytics
• Set up Google Tag Manager to manage Pixel and other tags
• Troubleshoot Tracking Issues
• Optimize Performance

Additional Resources

• Meta Pixel Documentation
• Meta for Developers - Pixel
• Standard Events Reference
• Carrd Embed Documentation
• Meta Pixel Helper Extension