Install Meta Pixel on Shopware | OpsBlu Docs

Install Meta Pixel on Shopware

How to install and configure Meta Pixel (Facebook Pixel) on Shopware 6 for conversion tracking and advertising.

Meta Pixel (formerly Facebook Pixel) allows you to track conversions, optimize ads, and build audiences for your Meta advertising campaigns. This guide covers installation on Shopware 6.

Installation Methods

Method Difficulty Features Recommended For
Plugin Easy Full automation Quick setup, non-technical users
Manual Theme Code Medium Full control Developers, custom implementations
Google Tag Manager Medium Flexible management Recommended for most stores
Conversions API (CAPI) Advanced Server-side tracking iOS 14+ tracking, data accuracy

Prerequisites

  • Meta Business Manager account
  • Meta Pixel created in Events Manager
  • Pixel ID (format: 15-16 digit number)
  • Access to Shopware theme or admin panel

Method 1: Plugin Installation (Easiest)

Several Shopware Store plugins offer Meta Pixel integration.

  1. Meta Pixel Integration
  2. Facebook Conversions API
  3. Social Media Marketing Suite

Installation Steps

  1. Find Plugin in Shopware Store

    • Log into Shopware Administration
    • Go to Extensions → My extensions → Extension Store
    • Search for "Meta Pixel" or "Facebook Pixel"
    • Review features, pricing, and ratings

  2. Install Plugin

    • Click on your chosen plugin
    • Click Add extension or Buy now
    • Click Install
    • Wait for installation to complete

  3. Configure Plugin

    • Go to Extensions → My extensions → Installed
    • Find Meta Pixel plugin and click Configure
    • Enter your Pixel ID (15-16 digit number)
    • Configure settings:
      • Enable automatic events (PageView, ViewContent, AddToCart, Purchase)
      • Set up Conversions API (if supported)
      • Configure advanced matching
      • Set currency settings

  4. Clear Cache

    bin/console cache:clear

  5. Test Installation

    • Install Meta Pixel Helper Chrome extension
    • Visit your storefront
    • Verify Pixel Helper shows events firing

What Gets Tracked (Typical Plugin)

Standard Events:

  • PageView - All page views
  • ViewContent - Product pages
  • Search - Search queries
  • AddToCart - Add to cart actions
  • InitiateCheckout - Checkout started
  • Purchase - Completed orders

Advanced Features (Plugin-Dependent):

  • Conversions API (server-side events)
  • Advanced matching (email, phone hashing)
  • Custom events
  • Dynamic product catalog feed

Method 2: Manual Theme Implementation

Add Meta Pixel directly to your Shopware theme for complete control.

Step 1: Get Your Pixel ID

  1. Go to Meta Events Manager
  2. Select your Pixel
  3. Copy your Pixel ID (15-16 digit number)

Step 2: Add Base Pixel Code

Add to your theme's base.html.twig:

{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_script_tracking %}
    {{ parent() }}

    <!-- 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 -->
{% endblock %}

Replace YOUR_PIXEL_ID with your actual Pixel ID.

For EU compliance, check consent before loading:

{% block base_script_tracking %}
    {{ parent() }}

    <script>
        // Initialize fbq queue
        window.fbq = window.fbq || function() {
            (window.fbq.q = window.fbq.q || []).push(arguments);
        };

        // Check cookie consent
        const cookiePreference = getCookie('cookie-preference');

        if (cookiePreference === 'all' || cookiePreference === '1') {
            // Load Meta Pixel if consent given
            !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');
        }

        function getCookie(name) {
            const value = `; ${document.cookie}`;
            const parts = value.split(`; ${name}=`);
            if (parts.length === 2) return parts.pop().split(';').shift();
        }

        // Listen for consent changes
        document.addEventListener('cookie-preference-updated', function(event) {
            if (event.detail.all || event.detail.marketing) {
                // Reload page to initialize Pixel
                window.location.reload();
            }
        });
    </script>
{% endblock %}

Step 4: Track Product Views

Add to product detail page template:

{% block page_product_detail %}
    {{ parent() }}

    <script>
        {% set product = page.product %}

        if (typeof fbq !== 'undefined') {
            fbq('track', 'ViewContent', {
                content_type: 'product',
                content_ids: ['{{ product.productNumber }}'],
                content_name: '{{ product.translated.name|e('js') }}',
                content_category: '{{ product.categories.first.translated.name|default('')|e('js') }}',
                value: {{ product.calculatedPrice.unitPrice }},
                currency: '{{ context.currency.isoCode }}'
            });
        }
    </script>
{% endblock %}

Step 5: Track Add to Cart

Add to buy form template:

{% block page_product_detail_buy_form %}
    {{ parent() }}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const buyForm = document.querySelector('.product-detail-buy');

            if (buyForm) {
                buyForm.addEventListener('submit', function(e) {
                    {% set product = page.product %}
                    const quantity = parseInt(this.querySelector('[name="quantity"]')?.value || 1);

                    if (typeof fbq !== 'undefined') {
                        fbq('track', 'AddToCart', {
                            content_type: 'product',
                            content_ids: ['{{ product.productNumber }}'],
                            content_name: '{{ product.translated.name|e('js') }}',
                            value: {{ product.calculatedPrice.unitPrice }} * quantity,
                            currency: '{{ context.currency.isoCode }}'
                        });
                    }
                });
            }
        });
    </script>
{% endblock %}

Step 6: Track Checkout

Add to checkout confirmation page:

{% block page_checkout_confirm %}
    {{ parent() }}

    <script>
        {% if page.cart.lineItems.count > 0 %}
            if (typeof fbq !== 'undefined') {
                fbq('track', 'InitiateCheckout', {
                    content_type: 'product',
                    content_ids: [
                        {% for lineItem in page.cart.lineItems %}
                        '{{ lineItem.referencedId }}'{% if not loop.last %},{% endif %}
                        {% endfor %}
                    ],
                    value: {{ page.cart.price.totalPrice }},
                    currency: '{{ context.currency.isoCode }}',
                    num_items: {{ page.cart.lineItems.count }}
                });
            }
        {% endif %}
    </script>
{% endblock %}

Step 7: Track Purchase

Add to order confirmation page:

{% block page_checkout_finish %}
    {{ parent() }}

    <script>
        {% set order = page.order %}
        {% if order %}
            if (typeof fbq !== 'undefined') {
                fbq('track', 'Purchase', {
                    content_type: 'product',
                    content_ids: [
                        {% for lineItem in order.lineItems %}
                        {% if lineItem.type == 'product' %}
                        '{{ lineItem.payload.productNumber|default(lineItem.id) }}'{% if not loop.last %},{% endif %}
                        {% endif %}
                        {% endfor %}
                    ],
                    value: {{ order.amountTotal }},
                    currency: '{{ order.currency.isoCode }}',
                    num_items: {{ order.lineItems.count }}
                });
            }
        {% endif %}
    </script>
{% endblock %}

Step 8: Clear Cache

bin/console cache:clear && bin/console theme:compile

Using GTM provides easier management and better organization.

Prerequisites

GTM Setup Steps

  1. Create Meta Pixel Tag in GTM

    a. In GTM, go to Tags → New

    b. Tag Configuration → Custom HTML

    c. HTML:

    <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. Advanced Settings → Tag firing options → Once per page

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

  2. Create Event Tags

    ViewContent Tag:

    • Tag Type: Custom HTML
    • HTML:
    <script>
  fbq('track', 'ViewContent', {
    content_type: 'product',
    content_ids: [{{Product ID}}],
    content_name: {{Product Name}},
    value: {{Product Price}},
    currency: {{Currency}}
  });
</script>
    • Trigger: Page View - Page Type equals product

    AddToCart Tag:

    • Tag Type: Custom HTML
    • HTML:
    <script>
  fbq('track', 'AddToCart', {
    content_type: 'product',
    content_ids: [{{Product ID}}],
    value: {{Product Price}},
    currency: {{Currency}}
  });
</script>
    • Trigger: Custom Event - addToCart

    Purchase Tag:

    • Tag Type: Custom HTML
    • HTML:
    <script>
  fbq('track', 'Purchase', {
    content_type: 'product',
    value: {{Order Total}},
    currency: {{Currency}}
  });
</script>
    • Trigger: Page View - Page Type equals confirmation

  3. Test with GTM Preview

    • Click Preview in GTM
    • Navigate your store
    • Verify all events fire correctly

  4. Publish Container

    • Click Submit
    • Add version name
    • Click Publish

See Shopware Data Layer for setting up data layer variables.

Method 4: Conversions API (Advanced)

Meta Conversions API sends events directly from your server, bypassing browser limitations.

Why Use Conversions API?

  • iOS 14+ tracking: Bypass Apple's tracking limitations
  • Better data accuracy: Server-side events are more reliable
  • Deduplication: Combine with browser Pixel for best results
  • Privacy-compliant: Less dependent on cookies

Requirements

  • Shopware plugin with CAPI support OR
  • Custom development
  • Meta Access Token
  • Server configuration

Using a Plugin

  1. Install CAPI Plugin

    • Search for "Conversions API" in Shopware Store
    • Install and configure

  2. Configure Settings

    • Enter Pixel ID
    • Enter Access Token (from Meta Events Manager)
    • Enable event deduplication
    • Configure which events to send server-side

  3. Test Events

    • Go to Meta Events Manager
    • Test Events tab
    • Verify server events appear

Manual CAPI Implementation

For custom implementation, see Meta Conversions API Documentation.

Basic server-side event:

// In Shopware plugin or custom code
use FacebookAds\Api;
use FacebookAds\Object\ServerSide\Event;
use FacebookAds\Object\ServerSide\EventRequest;
use FacebookAds\Object\ServerSide\UserData;

$api = Api::init(null, null, $accessToken);
$event = (new Event())
    ->setEventName('Purchase')
    ->setEventTime(time())
    ->setEventId('event_' . uniqid()) // For deduplication
    ->setUserData(
        (new UserData())
            ->setEmail($hashedEmail)
            ->setPhone($hashedPhone)
    )
    ->setCustomData([
        'value' => $orderTotal,
        'currency' => $currency
    ]);

$request = (new EventRequest($pixelId))
    ->setEvents([$event]);

$response = $request->execute();

Advanced Matching

Improve event matching by sending hashed customer data.

In Meta Pixel Code

fbq('init', 'YOUR_PIXEL_ID', {
    em: '{{ customer.email|lower|hash('sha256') }}', // Hashed email
    {% if customer.phoneNumber %}
    ph: '{{ customer.phoneNumber|hash('sha256') }}', // Hashed phone
    {% endif %}
    {% if customer.firstName %}
    fn: '{{ customer.firstName|lower|hash('sha256') }}', // Hashed first name
    {% endif %}
    {% if customer.lastName %}
    ln: '{{ customer.lastName|lower|hash('sha256') }}', // Hashed last name
    {% endif %}
    ct: '{{ customer.defaultBillingAddress.city|lower|hash('sha256') }}',
    st: '{{ customer.defaultBillingAddress.state|lower|hash('sha256') }}',
    zp: '{{ customer.defaultBillingAddress.zipcode }}',
    country: '{{ customer.defaultBillingAddress.country.iso|lower }}'
});

Note: Use server-side hashing, not client-side. This is a simplified example.

Verification & Testing

1. Meta Pixel Helper

  1. Install Extension

  2. Test Your Store

    • Visit your storefront
    • Click extension icon
    • Verify Pixel is detected
    • Check events fire correctly
    • Look for warnings or errors

2. Meta Events Manager

  1. Go to Events Manager

  2. Test Events Tab

    • Click Test Events
    • Enter your website URL or use browser extension
    • Navigate your store
    • Watch events appear in real-time

  3. Check Event Quality

    • Go to Diagnostics tab
    • Check for warnings or errors
    • Review Event Match Quality score

3. Check Standard Events

Test these key events:

  • PageView - All pages
  • ViewContent - Product pages
  • AddToCart - Add to cart button
  • InitiateCheckout - Checkout page
  • Purchase - Order confirmation

Troubleshooting

Pixel Not Loading

Check:

  • Pixel ID is correct (15-16 digits)
  • No JavaScript console errors
  • Cookie consent is granted
  • Shopware cache is cleared
  • Ad blockers are disabled (for testing)

Debug:

// Check if fbq is defined
console.log(typeof fbq);

// Check Pixel queue
console.log(window._fbq);

Events Not Firing

See Events Not Firing Troubleshooting

Quick checks:

  • Meta Pixel Helper shows errors
  • Events Manager shows events
  • Check browser console for errors
  • Verify trigger conditions (if using GTM)

Duplicate Events

Causes:

  • Multiple implementations (plugin + manual code)
  • Event firing multiple times
  • Both browser Pixel and CAPI without deduplication

Fix:

  • Remove duplicate implementations
  • Use event deduplication with eventID
  • Check GTM triggers fire once per event

Low Event Match Quality

Issue: Events show in Meta but have low match quality.

Solutions:

  • Implement advanced matching
  • Use Conversions API
  • Send hashed customer data
  • Include multiple parameters (email, phone, address)

Performance Considerations

Async Loading

Meta Pixel loads asynchronously by default - good for performance.

Delayed Loading

For better initial page load:

// Load after user interaction
document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        // Load Meta Pixel code here
    }, 3000); // 3 second delay
});

Monitor Impact

  • Use Lighthouse to measure impact
  • Check LCP
  • Test on mobile devices

Privacy & Compliance

GDPR Compliance

  • Get user consent before loading Pixel
  • Provide opt-out mechanism
  • Include in privacy policy
  • Use cookie consent banner

Data Processing Agreement

  • Sign Meta's Data Processing Agreement
  • Configure in Business Settings

Privacy-Enhanced Events

For privacy-compliant tracking:

// Disable automatic advanced matching
fbq('init', 'YOUR_PIXEL_ID', {}, {
    autoConfig: false,
    debug: false
});

Next Steps

For Meta Pixel best practices, see Meta Business Help Center.

Back to top