Meta Pixel and Conversions API PWA Studio for Magento Adobe Commerce

Compatible with Magento v2 Adobe Commerce - Open Source (CE), Commerce on-prem (EE), and Commerce on Cloud (ECE)!

Provides Apptrian Meta Pixel and Conversions API extension functionality to PWA Studio (Venia) storefront. Requires both the original (base) extension and the GraphQL (add-on) extension to be installed. Adds Meta Pixel (Facebook Pixel) and Meta Conversions API (Facebook Conversions API / Facebook Server-Side API) with standard events and Dynamic Ads code on appropriate pages. Supports Advanced Matching and has the ability to add custom parameters. Easy to install and use.

The Meta Pixel (Facebook Pixel) is a piece of JavaScript code for your website that enables you to measure, optimize and build audiences for your ad campaigns. Using the Meta Pixel (Facebook Pixel), you can leverage the actions people take on your website across devices to inform more effective Facebook advertising campaigns.

The Meta Conversions API (Facebook Conversions API / Facebook Server-Side API) (for web) allows advertisers to send web events from their servers directly to Meta (Facebook). Server-side events are linked to a pixel and are processed like browser pixel events. This means that server-side events are used in measurement, reporting, and optimization in the same way as browser pixel events.

Conversion measurement lets you track actions people take after viewing your Facebook Ads across multiple devices, including mobile phones, tablets, and desktop computers. By creating a Meta Pixel (Facebook Pixel) and adding it to the pages of your website where conversions happen, like the checkout page, you will see who converts as a result of your Facebook Ads. The pixel will continue to monitor the actions people take after clicking on your ad. You can see which device they saw the ad on and which device they ultimately converted on.

Compatible with PWA Studio (Venia) frontend without the need for any additional coding. It works out of the box.

Account & Pricing

To use this extension, a free Meta Business Suite (Facebook Business Suite) account is required.

NOTE: Meta (Facebook) advertising service is not free; additional charges apply to users running Meta (Facebook) Ad Campaigns.

Features

Meta Pixel (Facebook Pixel)

• An easy way to enable or disable Meta Pixel (Facebook Pixel).
• Optimized loading of the base code.
• Advanced Matching (if the customer is logged in).
• Works out of the box just type your Meta Pixel ID (Facebook Pixel ID) (or comma-separated IDs for multipixel setups) in our extension config.
• Option to type page handles (full action names) where you want Meta Pixel (Facebook Pixel). Using this option Meta Pixel (Facebook Pixel) can be added to any other Magento page or any other extension page (blogs, form pages, etc.).
• Option to enable or disable the Meta Pixel (Facebook Pixel) base code.
• Individual options to enable or disable AddToCart, AddToWishlist, CompleteRegistration, InitiateCheckout, PageView, Purchase, Search, and ViewContent events.
• Option to fire PageView event with other events: CompleteRegistration, InitiateCheckout, Purchase, Search, and ViewContent.
• Option to move parameters outside contents.
• Options to detect selected SKU for configurable products.

Meta Conversions API (Facebook Conversions API / Facebook Server-Side API)

• An easy way to enable or disable Meta Conversions API (Facebook Conversions API / Facebook Server-Side API).
• Advanced Matching (if the customer is logged in).
• Option to type your Meta Access Token (Facebook Access Token) in our extension config.
• Option to type your Meta API Version (Facebook API Version) in our extension config.
• Option to type your Test Event Code in our extension config.
• Option to log server-side fired events in the Magento log file.
• Individual options to enable or disable AddToCart, AddToWishlist, CompleteRegistration, InitiateCheckout, PageView, Purchase, Search, and ViewContent events.
• Option to fire PageView event with other events: CompleteRegistration, InitiateCheckout, Purchase, Search, and ViewContent.
• Option to move parameters outside contents.
• Options to detect selected SKU for configurable products.

Category (Category Page)

• Option to type page handles (full action names) where you want category-related code.
• Option to type the event name you want to use for category tracking.
• Options to add custom parameters to your category-related event with parameters to attributes mapping. Example: google_product_category=google_product_category|name=name. The format is simple param1=attribute1|param2=attribute2 Meta Pixel (Facebook Pixel) custom parameter and Magento category attribute are connected by = sign and pairs are separated by | sign.

Product (Product Page - AddToCart, AddToWishlist, ViewContent Events)

• Option to type page handles (full action names) where you want product-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option for content_type to use product_group instead of product for bundle products.
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option for content_type to use product_group instead of product for configurable products.
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option for content_type to use product_group instead of product for grouped products.
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Options to add custom parameters to your product-related events with parameters to attributes mapping. Example: google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 Meta Pixel (Facebook Pixel) custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Quote (Checkout Page - InitiateCheckout Event)

• Option to type page handles (full action names) where you want quote-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to type parameter name if you want to use Magento quote ID.
• Options to add custom parameters to your quote-related event with parameters to attributes mapping. Example: google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 Meta Pixel (Facebook Pixel) custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Order (Checkout Success Page - Purchase Event)

• Option to type page handles (full action names) where you want order-related code.
• Option to select SKU you want to use for bundle products. Options: Product SKU as (id), Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for configurable products. Options: Product SKU as (id), Child SKU as (id), Child SKU as (id) and Product SKU as (item_group_id)
• Option to select SKU you want to use for downloadable products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for grouped products. Options: Children SKUs as (id)s, Children SKUs as (id)s and Product SKU as (item_group_id)
• Option to select SKU you want to use for simple products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to select SKU you want to use for virtual products. Options: Product SKU as (id), Product SKU as (id) and Parent SKU as (item_group_id)
• Option to type parameter name if you want to use Magento order ID.
• Option to type parameter name if you want to use Magento order increment ID.
• Option to type parameter name if you want to use Magento quote ID.
• Options to add custom parameters to your order-related event with parameters to attributes mapping. Example: google_product_category=google_product_category|color=color. The format is simple param1=attribute1|param2=attribute2 Meta Pixel (Facebook Pixel) custom parameter and Magento product attribute are connected by = sign and pairs are separated by | sign.

Search (Search Result Page - Search Event)

• Option to type page handles (full action names) where you want search-related code.
• Option to type the event name you want to use for search tracking.
• Option to type the parameter name you want to use for search tracking.
• Option to type request parameters you want to include for search tracking.

Data Processing Options

• An easy way to enable or disable Data Processing Options.
• Option to type Data Processing Options as a comma-separated list.
• Option to type Data Processing Options Country
• Option to type Data Processing Options State

Miscellaneous

• Option to select Meta (Facebook) product identifier. Magento product SKU (Recommended) or Magento product ID.
• Option for Advanced Matching data mapping. Example: external_id=external_id|em=em|ph=ph. The format is simple param1=key1|param2=key2 Meta (Facebook) parameter and data key are connected by = sign and pairs are separated by | sign. Available customer data keys are: em, ph, fn, ln, ge, db, ct, st, zp, country, external_id.
• Options to connect default Magento "Cookie Restriction Mode" cookie or any third-party cookie consent extension or theme customization via following options: Enable Cookie Consent, Consent Cookie Name, Consent Cookie Key, Consent Cookie Value, and Consent Button.

Installation Instructions

This extension is not a standalone extension. It is an add-on extension. Requires both original (base) extension and GraphQL (add-on) extension. Please do not attempt to install it before the required extensions. Once you installed both the original (base) extension and GraphQL (add-on) extension, you may proceed.

There are several ways you can install any Magento extension. Our extension is no different. We will show you three ways to install the extension, but you must not mix them. Choose one and stick to it.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

Installation via file uploading
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site, unpack the .zip file from /Magento2/InstallByUploadingFiles/ directory inside your Magento root.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

php bin/magento module:enable --clear-static-content Apptrian_MetaPixelApiPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/app/code/Apptrian/MetaPixelApiPwaStudio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you downloaded in Step 1.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/meta-pixel-and-conversions-api-pwa-studio extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

Installation via Composer
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site and you want to install the extension via composer public and private keys. (To find your public and private keys, login to your Apptrian.com customer account and look at the My Downloadable Products section.)
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer config --auth http-basic.packages.apptrian.com $PUBLIC_KEY $PRIVATE_KEY

composer config repositories.apptrian-meta-pixel-and-conversions-api-pwa-studio composer https://packages.apptrian.com/meta-pixel-and-conversions-api-pwa-studio/

composer require apptrian/meta-pixel-and-conversions-api-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_MetaPixelApiPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/meta-pixel-and-conversions-api-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you can download from your account on our site in the My Downloadable Products section.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/meta-pixel-and-conversions-api-pwa-studio extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

Installation via Composer
(If you purchased the extension on Adobe Commerce Marketplace)

Step 1. Backend installation instructions

If you purchased the extension on Adobe Commerce Marketplace then you must use Composer. Adobe Commerce Marketplace does not allow extension downloads.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer require apptrian/meta-pixel-and-conversions-api-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_MetaPixelApiPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Please make sure your Magento public and private keys are in your Magento root auth.json file. Usually, people install Magento with one Adobe Commerce Marketplace account (public and private keys) and then purchase an extension with another Adobe Commerce Marketplace account (different public and private keys). Check the Adobe Commerce Marketplace account you used to purchase the extension and make sure its public and private keys are in the Magento root auth.json file. WARNING! If you already have keys there, be very careful because maybe some other extensions are purchased with another Adobe Commerce Marketplace account.

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/meta-pixel-and-conversions-api-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, use composer to download the package to your computer. If you get stuck, use the contact form on our site and provide your order number and full name as it is on order, and we will provide you with further instructions.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/meta-pixel-and-conversions-api-pwa-studio extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/meta-pixel-and-conversions-api-pwa-studio

Configuration

Our extension works out of the box. If you want to configure it differently log to your Magento Admin and go to:

Stores > Configuration > Apptrian Extensions > Meta Pixel and Conversions API

There are more than several options for customization. They are all self-explanatory and have comments and tooltips.

After changing options make sure you refresh your Magento cache.

FAQ

Q: Does the extension work with multi-store setups?
A: Yes, it does work with multi-store setups. It functions in the same way as the core Magento modules, and it is fully automated.

Q: Why is the Meta Pixel Helper extension for Chrome reporting PageView event fired multiple times?
A: The Meta Pixel Helper extension for Chrome does not work well with PWA/SPA applications. In PWA/SPA applications, there is no reload of the web page when navigating from one page to another. As a result, the Meta Pixel Helper extension for Chrome occasionally fails to remove previously fired events and retains them in its panel. This is a deficiency of the Meta Pixel Helper extension for Chrome, not with our implementation of Meta Pixel.