Meta Pixel Setup for Magento | Blue Frog Docs

Meta Pixel Setup for Magento

Complete guide to implementing Meta Pixel (Facebook Pixel) on Magento 2 and Adobe Commerce for conversion tracking and audience building.

Meta Pixel Setup for Magento

Implement Meta Pixel (formerly Facebook Pixel) on your Magento 2 or Adobe Commerce store to track conversions, optimize Facebook and Instagram ads, and build custom audiences. This guide covers multiple implementation methods optimized for Magento's architecture.

Why Use Meta Pixel with Magento?

Benefits

1. Conversion Tracking

  • Track purchases, add to cart, and other key events
  • Measure ROAS (Return on Ad Spend)
  • Optimize ad campaigns based on conversion data

2. Audience Building

  • Create custom audiences from website visitors
  • Build lookalike audiences
  • Retarget cart abandoners and product viewers

3. Dynamic Ads

  • Automatically show relevant products to users
  • Sync product catalog with Facebook
  • Personalized retargeting campaigns

4. Conversion API (CAPI)

  • Server-side tracking for improved accuracy
  • Bypass ad blockers and tracking prevention
  • Better data quality and attribution

Implementation Methods

1. Facebook Business Extension (Official)

  • Features: Official Facebook integration, catalog sync, Conversion API
  • Compatibility: Magento 2.3.x - 2.4.x
  • Price: Free

Installation:

composer require facebook/facebook-for-magento2
php bin/magento module:enable Facebook_BusinessExtension
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Configuration:

Stores > Configuration > Facebook > Business Extension
  • Connect Facebook Business Manager
  • Select Pixel ID
  • Enable Conversion API
  • Configure catalog sync

2. Meta Pixel & Conversion API by MageWorx

  • Features: Advanced event tracking, server-side CAPI, enhanced parameters
  • Installation: Via Magento Marketplace

3. Facebook Pixel Pro by Amasty

  • Features: Custom events, advanced matching, dynamic parameters
  • Installation: Via Composer or Marketplace

Method 2: Custom Module Implementation

Build a custom Meta Pixel module for complete control.

Module Structure

app/code/YourCompany/MetaPixel/
├── etc/
│   ├── module.xml
│   ├── config.xml
│   ├── adminhtml/
│   │   └── system.xml
│   └── frontend/
│       ├── events.xml
│       └── di.xml
├── Block/
│   └── Pixel.php
├── Helper/
│   └── Data.php
├── Observer/
│   ├── AddToCart.php
│   ├── InitiateCheckout.php
│   └── Purchase.php
├── Model/
│   └── ConversionApi.php
└── view/frontend/
    ├── layout/
    │   ├── default.xml
    │   ├── catalog_product_view.xml
    │   ├── checkout_cart_index.xml
    │   └── checkout_onepage_success.xml
    └── templates/
        ├── pixel.phtml
        ├── product.phtml
        ├── cart.phtml
        └── purchase.phtml

Step 1: Module Registration

File: registration.php

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'YourCompany_MetaPixel',
    __DIR__
);

Step 2: Module Configuration

File: etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="YourCompany_MetaPixel" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
            <module name="Magento_Store"/>
            <module name="Magento_Catalog"/>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Step 3: Admin Configuration

File: etc/adminhtml/system.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="meta_pixel" translate="label" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>Meta Pixel (Facebook)</label>
            <tab>general</tab>
            <resource>YourCompany_MetaPixel::config</resource>
            <group id="general" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>General Settings</label>
                <field id="enabled" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Meta Pixel</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="pixel_id" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Pixel ID</label>
                    <validate>required-entry validate-digits</validate>
                    <depends>
                        <field id="enabled">1</field>
                    </depends>
                </field>
                <field id="enable_advanced_matching" translate="label" type="select" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Advanced Matching</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                    <comment>Send hashed customer data for better matching</comment>
                    <depends>
                        <field id="enabled">1</field>
                    </depends>
                </field>
            </group>
            <group id="conversion_api" translate="label" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Conversion API (Server-Side)</label>
                <field id="enabled" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Enable Conversion API</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="access_token" translate="label" type="obscure" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Access Token</label>
                    <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
                    <depends>
                        <field id="enabled">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>

Step 4: Helper Class

File: Helper/Data.php

<?php
namespace YourCompany\MetaPixel\Helper;

use Magento\Framework\App\Helper\AbstractHelper;
use Magento\Framework\App\Helper\Context;
use Magento\Store\Model\ScopeInterface;
use Magento\Customer\Model\Session as CustomerSession;

class Data extends AbstractHelper
{
    const XML_PATH_ENABLED = 'meta_pixel/general/enabled';
    const XML_PATH_PIXEL_ID = 'meta_pixel/general/pixel_id';
    const XML_PATH_ADVANCED_MATCHING = 'meta_pixel/general/enable_advanced_matching';
    const XML_PATH_CAPI_ENABLED = 'meta_pixel/conversion_api/enabled';
    const XML_PATH_CAPI_TOKEN = 'meta_pixel/conversion_api/access_token';

    protected $customerSession;

    public function __construct(
        Context $context,
        CustomerSession $customerSession
    ) {
        parent::__construct($context);
        $this->customerSession = $customerSession;
    }

    public function isEnabled()
    {
        return $this->scopeConfig->isSetFlag(
            self::XML_PATH_ENABLED,
            ScopeInterface::SCOPE_STORE
        );
    }

    public function getPixelId()
    {
        return $this->scopeConfig->getValue(
            self::XML_PATH_PIXEL_ID,
            ScopeInterface::SCOPE_STORE
        );
    }

    public function isAdvancedMatchingEnabled()
    {
        return $this->scopeConfig->isSetFlag(
            self::XML_PATH_ADVANCED_MATCHING,
            ScopeInterface::SCOPE_STORE
        );
    }

    public function isConversionApiEnabled()
    {
        return $this->scopeConfig->isSetFlag(
            self::XML_PATH_CAPI_ENABLED,
            ScopeInterface::SCOPE_STORE
        );
    }

    public function getConversionApiToken()
    {
        return $this->scopeConfig->getValue(
            self::XML_PATH_CAPI_TOKEN,
            ScopeInterface::SCOPE_STORE
        );
    }

    public function getAdvancedMatchingData()
    {
        if (!$this->isAdvancedMatchingEnabled() || !$this->customerSession->isLoggedIn()) {
            return [];
        }

        $customer = $this->customerSession->getCustomer();

        return [
            'em' => hash('sha256', strtolower($customer->getEmail())),
            'fn' => hash('sha256', strtolower($customer->getFirstname())),
            'ln' => hash('sha256', strtolower($customer->getLastname())),
            'ct' => hash('sha256', strtolower($customer->getDefaultBillingAddress()
                ? $customer->getDefaultBillingAddress()->getCity()
                : '')),
            'st' => hash('sha256', strtolower($customer->getDefaultBillingAddress()
                ? $customer->getDefaultBillingAddress()->getRegion()
                : '')),
            'zp' => hash('sha256', $customer->getDefaultBillingAddress()
                ? $customer->getDefaultBillingAddress()->getPostcode()
                : ''),
            'country' => hash('sha256', strtolower($customer->getDefaultBillingAddress()
                ? $customer->getDefaultBillingAddress()->getCountryId()
                : ''))
        ];
    }
}

Step 5: Block Class

File: Block/Pixel.php

<?php
namespace YourCompany\MetaPixel\Block;

use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use YourCompany\MetaPixel\Helper\Data as PixelHelper;

class Pixel extends Template
{
    protected $pixelHelper;

    public function __construct(
        Context $context,
        PixelHelper $pixelHelper,
        array $data = []
    ) {
        $this->pixelHelper = $pixelHelper;
        parent::__construct($context, $data);
    }

    public function isEnabled()
    {
        return $this->pixelHelper->isEnabled();
    }

    public function getPixelId()
    {
        return $this->pixelHelper->getPixelId();
    }

    public function getAdvancedMatchingData()
    {
        return $this->pixelHelper->getAdvancedMatchingData();
    }

    protected function _toHtml()
    {
        if (!$this->isEnabled() || !$this->getPixelId()) {
            return '';
        }
        return parent::_toHtml();
    }
}

Step 6: Layout XML

File: view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <block class="YourCompany\MetaPixel\Block\Pixel"
               name="meta.pixel"
               template="YourCompany_MetaPixel::pixel.phtml"
               before="-"/>
    </head>
</page>

Step 7: Base Pixel Template

File: view/frontend/templates/pixel.phtml

<?php
/** @var \YourCompany\MetaPixel\Block\Pixel $block */
$pixelId = $block->escapeHtml($block->getPixelId());
$advancedMatching = $block->getAdvancedMatchingData();
?>
<!-- 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');

<?php if (!empty($advancedMatching)): ?>
fbq('init', '<?= $pixelId ?>', <?= json_encode($advancedMatching) ?>);
<?php else: ?>
fbq('init', '<?= $pixelId ?>');
<?php endif; ?>

fbq('track', 'PageView');
</script>
<noscript>
    <img height="1" width="1" style="display:none"
         src="https://www.facebook.com/tr?id=<?= $pixelId ?>&ev=PageView&noscript=1"/>
</noscript>
<!-- End Meta Pixel Code -->

Step 8: Enable Module

php bin/magento module:enable YourCompany_MetaPixel
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

Method 3: Google Tag Manager Integration

Use GTM to manage Meta Pixel deployment.

GTM Implementation Steps

  1. Create Meta Pixel Tag in GTM

    • Tag Type: Custom HTML
    • HTML: Paste Meta Pixel base code
    • Trigger: All Pages

  2. Configure Variables

    • Create Pixel ID variable
    • Create event name variable
    • Create event parameters variable

  3. Create Event Tags

    • Add to Cart tag
    • Initiate Checkout tag
    • Purchase tag

Example GTM Custom HTML Tag:

<script>
fbq('track', '{{Event Name}}', {
    content_ids: [{{Product ID}}],
    content_type: 'product',
    value: {{Product Price}},
    currency: '{{Currency}}'
});
</script>

Method 4: Manual Implementation via Admin Panel

Quick implementation without module development.

Steps:

  1. Navigate to:

    Content > Design > Configuration

  2. Select Store View and click Edit

  3. Expand HTML Head Section

  4. Add Meta Pixel Code to Scripts and Style Sheets:

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

  5. Save Configuration and Flush Cache

Conversion API (Server-Side Tracking)

Implement server-side tracking for improved accuracy.

Conversion API Benefits

  • Works despite ad blockers
  • Better data quality and attribution
  • Improved iOS 14+ tracking
  • Direct server-to-Facebook communication

Implementation

File: Model/ConversionApi.php

<?php
namespace YourCompany\MetaPixel\Model;

use Magento\Framework\HTTP\Client\Curl;
use YourCompany\MetaPixel\Helper\Data as PixelHelper;

class ConversionApi
{
    const API_URL = 'https://graph.facebook.com/v18.0';

    protected $curl;
    protected $pixelHelper;

    public function __construct(
        Curl $curl,
        PixelHelper $pixelHelper
    ) {
        $this->curl = $curl;
        $this->pixelHelper = $pixelHelper;
    }

    public function sendEvent($eventName, $eventData, $userData = [])
    {
        if (!$this->pixelHelper->isConversionApiEnabled()) {
            return false;
        }

        $pixelId = $this->pixelHelper->getPixelId();
        $accessToken = $this->pixelHelper->getConversionApiToken();

        if (!$pixelId || !$accessToken) {
            return false;
        }

        $url = self::API_URL . '/' . $pixelId . '/events';

        $payload = [
            'data' => [
                [
                    'event_name' => $eventName,
                    'event_time' => time(),
                    'event_source_url' => $this->getCurrentUrl(),
                    'action_source' => 'website',
                    'user_data' => $this->formatUserData($userData),
                    'custom_data' => $eventData
                ]
            ],
            'access_token' => $accessToken
        ];

        $this->curl->setOption(CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
        $this->curl->post($url, json_encode($payload));

        return $this->curl->getStatus() === 200;
    }

    protected function formatUserData($userData)
    {
        $formatted = [
            'client_ip_address' => $_SERVER['REMOTE_ADDR'] ?? '',
            'client_user_agent' => $_SERVER['HTTP_USER_AGENT'] ?? '',
            'fbc' => $_COOKIE['_fbc'] ?? null,
            'fbp' => $_COOKIE['_fbp'] ?? null
        ];

        if (isset($userData['email'])) {
            $formatted['em'] = hash('sha256', strtolower($userData['email']));
        }

        if (isset($userData['phone'])) {
            $formatted['ph'] = hash('sha256', preg_replace('/[^0-9]/', '', $userData['phone']));
        }

        return array_filter($formatted);
    }

    protected function getCurrentUrl()
    {
        return (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http")
            . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    }
}

Full Page Cache Compatibility

Ensure Meta Pixel works with Magento's caching.

Private Content Sections

File: etc/frontend/sections.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer/etc/sections.xsd">
    <action name="catalog/product/view">
        <section name="meta-pixel"/>
    </action>
    <action name="checkout/cart/add">
        <section name="meta-pixel"/>
    </action>
</config>

RequireJS Integration

Load pixel data via customer sections:

require(['Magento_Customer/js/customer-data'], function(customerData) {
    var pixelData = customerData.get('meta-pixel');

    pixelData.subscribe(function(data) {
        if (data.events) {
            data.events.forEach(function(event) {
                fbq('track', event.name, event.params);
            });
        }
    });
});

Testing & Validation

Meta Pixel Helper

  1. Install Meta Pixel Helper Chrome Extension
  2. Visit your Magento store
  3. Click extension icon to verify pixel fires
  4. Check for warnings or errors

Events Manager

  1. Log in to Facebook Business Manager
  2. Navigate to Events Manager
  3. Select your Pixel
  4. Check Test Events tab
  5. Verify events appear in real-time

Browser Console

Check pixel initialization:

console.log(fbq.instance);

Performance Optimization

Async Loading

Meta Pixel loads asynchronously by default:

t.async=!0;

DNS Prefetch

Add to layout:

<link rel="dns-prefetch" href="//connect.facebook.net"/>
<link rel="dns-prefetch" href="//www.facebook.com"/>

Next Steps

Additional Resources

↑ Back to top
// SYS.FOOTER