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

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

How to install Meta (Facebook) Pixel on Jimdo Creator and Jimdo Dolphin using direct code injection or Google Tag Manager.

Learn how to install Meta Pixel (formerly Facebook Pixel) on your Jimdo website using direct code implementation or Google Tag Manager for both Creator and Dolphin platforms.

Installation Methods

Method Difficulty Customization Works On Recommended
Direct Pixel Code Easy Low Creator & Dolphin Quick setup
Google Tag Manager Medium High Creator & Dolphin Best practice

Method 1: Direct Meta Pixel Installation

Install Meta Pixel directly in your Jimdo site's Head section.

Step 1: Get Your Pixel ID

  1. Go to Meta Events Manager
  2. Select your Pixel (or create new one)
  3. Click on your Pixel
  4. Copy your Pixel ID (16-digit number like 1234567890123456)

Step 2: Add Pixel Code to Jimdo

The process is similar for both Jimdo Creator and Jimdo Dolphin.

For Jimdo Creator

  1. Log in to your Jimdo account
  2. Edit your website
  3. Go to Settings → Edit Head (or SEO/Analytics section)
  4. Paste 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');
</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 (appears twice).

  1. Click Save
  2. Publish your website

For Jimdo Dolphin

  1. Log in to your Jimdo account
  2. Edit your website
  3. Go to Settings → Analytics
  4. Find Tracking Code section
  5. Paste Meta Pixel code in Head section:
<!-- 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 -->
  1. Click Save
  2. Publish changes

Step 3: Verify Installation

  1. Install Meta Pixel Helper Chrome extension

  2. Visit your Jimdo website

  3. Check Pixel Helper icon:

    • Green = Working correctly
    • Yellow = Warnings
    • Red = Errors
    • No icon = Not installed

  4. Verify in Meta Events Manager:

    • Go to Events Manager
    • Click Test Events
    • Enter your Jimdo site URL
    • Navigate your site
    • See events appear in real-time

What Gets Tracked (Direct Implementation)

Automatic Events:

Manually Implemented Events (requires additional code):

  • ViewContent - Product pages
  • AddToCart - Adding products
  • InitiateCheckout - Starting checkout
  • Purchase - Completed orders
  • Lead - Form submissions
  • Contact - Contact page visits

See Event Tracking below for implementation.

Using GTM provides easier management and better flexibility.

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 base 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>

Replace YOUR_PIXEL_ID with your actual Pixel ID.

d. Triggering: All Pages

e. Name: Meta Pixel - Base Code

f. Save

2. Create Event Tags

See Event Tracking section below for specific event implementations.

3. Publish Container

  1. Click Submit in GTM
  2. Version Name: "Meta Pixel Installation"
  3. Click Publish

4. Test

  1. Use GTM Preview mode
  2. Verify Meta Pixel tag fires
  3. Check Meta Events Manager
  4. Verify PageView events appear

Event Tracking

Standard Events

Meta Pixel supports standard events for common user actions.

ViewContent Event

Track when visitors view content pages or products.

Direct Implementation (add after Pixel base code):

<script>
// On product or content pages
fbq('track', 'ViewContent', {
  content_name: 'Page or Product Name',
  content_category: 'Category',
  content_type: 'product', // or 'article'
  value: 99.99, // Optional: page/product value
  currency: 'USD'
});
</script>

GTM Implementation:

  1. Create Trigger: Specific page view (e.g., product pages)
  2. Create Tag:
    • Type: Custom HTML
    • Code:
    <script>
fbq('track', 'ViewContent', {
  content_name: '{{Page Title}}',
  content_type: 'product'
});
</script>
  3. Triggering: Your page view trigger

AddToCart Event

Track when products are added to cart.

Direct Implementation:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Find add to cart button
  const addToCartButton = document.querySelector('.add-to-cart-button');

  if (addToCartButton) {
    addToCartButton.addEventListener('click', function() {
      fbq('track', 'AddToCart', {
        content_name: 'Product Name',
        content_ids: ['product_id'],
        content_type: 'product',
        value: 99.99,
        currency: 'USD'
      });
    });
  }
});
</script>

Note: Replace .add-to-cart-button with your actual button selector.

GTM Implementation:

  1. Create Click Trigger for add to cart button
  2. Create Tag:
    • Type: Custom HTML
    • Code:
    <script>
fbq('track', 'AddToCart', {
  content_type: 'product',
  currency: 'USD'
});
</script>
  3. Triggering: Add to cart click trigger

InitiateCheckout Event

Track when users start checkout process.

Direct Implementation:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const checkoutButton = document.querySelector('.checkout-button');

  if (checkoutButton) {
    checkoutButton.addEventListener('click', function() {
      fbq('track', 'InitiateCheckout', {
        content_type: 'product',
        value: 99.99, // Cart total
        currency: 'USD',
        num_items: 1 // Number of items
      });
    });
  }
});
</script>

GTM Implementation:

  1. Create Click Trigger for checkout button
  2. Create Tag with InitiateCheckout event
  3. Triggering: Checkout button click

Purchase Event

Track completed purchases (add to order confirmation page).

For Jimdo Creator (page-specific code):

  1. Edit order confirmation page
  2. Go to page Settings → Head code
  3. Add:
<script>
fbq('track', 'Purchase', {
  content_type: 'product',
  value: 99.99, // Order total
  currency: 'USD',
  num_items: 1
});
</script>

For Jimdo Dolphin (requires GTM):

Use GTM with custom trigger for thank you page URL.

Lead Event

Track form submissions.

Direct Implementation:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const contactForm = document.querySelector('#contact-form');

  if (contactForm) {
    contactForm.addEventListener('submit', function() {
      fbq('track', 'Lead');
    });
  }
});
</script>

GTM Implementation:

  1. Create Form Submit Trigger
  2. Create Tag with Lead event
  3. Triggering: Form submission trigger

Contact Event

Track contact page visits.

Direct Implementation (add to contact page only - Jimdo Creator):

<script>
fbq('track', 'Contact');
</script>

GTM Implementation:

  1. Create Trigger: Page URL contains /contact
  2. Create Tag with Contact event
  3. Triggering: Contact page trigger

Advanced Setup

Advanced Matching

Send additional customer data for better attribution:

Note: Only collect data with proper consent and privacy compliance.

<script>
fbq('init', 'YOUR_PIXEL_ID', {
  em: 'user@example.com', // Email (will be hashed)
  ph: '1234567890', // Phone (will be hashed)
  fn: 'John', // First name (will be hashed)
  ln: 'Doe', // Last name (will be hashed)
  ct: 'New York', // City (will be hashed)
  st: 'NY', // State (will be hashed)
  zp: '10001' // Zip code (will be hashed)
});
</script>

Meta automatically hashes this data client-side before sending.

Important: Only use with explicit user consent.

External ID

Track logged-in users:

<script>
fbq('init', 'YOUR_PIXEL_ID', {
  external_id: 'user_id_123'
});
</script>

Privacy & Compliance

GDPR Compliance

Implement consent management:

<script>
// Wait for consent
function initializeMetaPixel() {
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
}

// Only initialize after user consent
if (userHasConsented()) {
  initializeMetaPixel();
}
</script>

Consider using:

Limited Data Use (LDU)

For California/CCPA compliance:

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

Testing & Verification

1. Meta Pixel Helper

Install extension: Meta Pixel Helper Chrome Extension

Check:

  • Green icon = Working
  • View events in popup
  • Check for warnings/errors

2. Meta Events Manager

Test Events tool:

  1. Events Manager → Test Events
  2. Enter Jimdo site URL
  3. Perform actions on site
  4. See events appear in real-time
  5. Verify parameters are correct

3. Browser Console

Check if Pixel loaded:

// In browser console
console.log(window.fbq);
// Should return function, not undefined

Check for errors:

  • Look for red error messages
  • Common issues: Pixel ID incorrect, JavaScript errors

4. Verify Event Parameters

Ensure events include:

  • content_type (required for most events)
  • value (numeric, no currency symbols)
  • currency (ISO code: USD, EUR, GBP)
  • content_ids (array of strings)

Troubleshooting

Pixel Not Loading

Check:

  1. Pixel ID correct (16 digits)
  2. Code in Head section (not Body)
  3. Code saved and published
  4. No JavaScript errors in console
  5. Ad blocker disabled (for testing)

Verify:

// Browser console
console.log(window.fbq);

Duplicate Events

Cause: Pixel code added multiple times.

Check:

  • Direct code in Jimdo Head section
  • GTM implementation
  • Multiple GTM tags
  • App integrations

Fix: Use ONE implementation method only.

Events Missing Parameters

Common mistakes:

// Wrong
fbq('track', 'Purchase', {
  value: "$99.99", // String with $
  content_ids: 123 // Not array
});

// Correct
fbq('track', 'Purchase', {
  value: 99.99, // Number
  content_ids: ['123'] // Array of strings
});

Events Not Appearing in Events Manager

Causes:

  1. 24-hour delay for some reports
  2. Test Events not open during testing
  3. Ad blocker blocking requests
  4. Incorrect Pixel ID

Check:

  • Use Test Events for real-time view
  • Disable ad blockers
  • Verify Pixel ID

See Events Not Firing for detailed troubleshooting.

Jimdo-Specific Considerations

Platform Differences

Feature Creator Dolphin
Head code access Full Limited
Page-specific code Yes No
Event tracking Direct code GTM only
E-commerce tracking Manual setup GTM required

Finding Element Selectors

Use browser Developer Tools to find Jimdo selectors:

  1. Right-click element → Inspect
  2. View element classes/IDs
  3. Use in event tracking code

Common selectors vary by Jimdo theme - always verify.

E-commerce Tracking

For Jimdo Online Store:

  • No native e-commerce integration
  • Must implement events manually
  • Use GTM for easier management
  • Test thoroughly across store flow

Best Practices

1. Use Standard Event Names

Use Meta's standard events (ViewContent, AddToCart, etc.) instead of custom events when possible.

2. Include Value and Currency

For conversion events, always include:

{
  value: 99.99,
  currency: 'USD'
}

3. Test Before Launch

  • Test in Meta Events Manager
  • Verify all events fire correctly
  • Check parameters are accurate
  • Test on multiple pages

4. Document Your Setup

Keep track of:

  • Which events are implemented
  • Where they fire
  • What parameters they include
  • Implementation method (direct or GTM)

5. Use GTM for Flexibility

For easier long-term management:

  • Install GTM once
  • Manage all pixels through GTM
  • Easier updates without code changes
  • Better debugging tools

Next Steps

For Basic Setup:

  • Verify Pixel tracks PageView events
  • Test across multiple pages
  • Check Events Manager data

For Advanced Tracking:

For Issues:

For general Meta Pixel concepts, see Meta Pixel Guide.

For privacy issues related to tracking, see Privacy Troubleshooting.

返回顶部