Prevent duplicate AddToCart Pixel fires from repeated AJAX fragment execution (#3939)

Summary:

Description

This fixes a duplicate AddToCart Pixel event issue on the add-to-cart flows. Some third-party plugins can cause AJAX fragments or related frontend handlers to execute the same injected Pixel script more than once. When that happened, the same AddToCart event could call fbq() twice in the browser.

Type of change

Added browser-side deduplication using the event’s eventID. Every AddToCart event already has a unique ID. When the browser is about to send the Pixel event, we now check whether that exact ID has already been sent on the page.

If it has not been sent yet:

mark this eventID as sent send the Pixel event

If it has already been sent: do nothing skip the duplicate Pixel event

This fixes the issue because the duplicate was happening in the browser. WooCommerce AJAX was causing the same AddToCart Pixel script to run twice. Both executions had the same eventID, so the new guard lets the first one fire and blocks the second one.

Fix (non-breaking change which fixes an issue)

Checklist

I have commented my code, particularly in hard-to-understand areas, if any.
I have confirmed that my changes do not introduce any new PHPCS warnings or errors.
I have checked plugin debug logs that my changes do not introduce any new PHP warnings or FATAL errors.
I followed general Pull Request best practices. Meta employees to follow this wiki.
I have added tests (if necessary) and all the new and existing unit tests pass locally with my changes.
I have completed dogfooding and QA testing, or I have conducted thorough due diligence to ensure that it does not break existing functionality.
I have updated or requested update to plugin documentations (if necessary). Meta employees to follow this wiki.

Changelog entry

One liner entry to be surfaced in changelog.txt

Pull Request resolved: https://github.com/facebook/facebook-for-woocommerce/pull/3939

Test Plan: Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.

Install a few third party plugins (e.g, Side Cart, FunnelCart, etc). Go to the Shop page and click Add To Cart. Verify that only 1 AddToCart pixel gets fired.

Before

https://github.com/user-attachments/assets/280a5019-80ab-4ef6-a1f7-216640be0310

After

https://github.com/user-attachments/assets/b7093525-70fd-40f3-93b7-30714f07d441

Reviewed By: vahidkay-meta

Differential Revision: D107147917

Pulled By: cshing-meta

fbshipit-source-id: 027acbdc5735292ce7e3e85a899ff1999a8a5313

Meta for WooCommerce, formerly Facebook for WooCommerce, is now an official plugin from Meta.

We’re excited to announce that the plugin is is now owned by Meta, and we invite the developer community to join us in shaping its future through contributions.

Grow your business on Facebook, Instagram and WhatsApp. Easily promote your products and target accurately using powerful sales and marketing tools. Update your customers about their orders on WhatsApp at every step, freeing up more time for you to focus on your business. Reach new customers and drive traffic to your website with seamless ad experiences, from discovery to conversion. Automatically sync your eligible products to your Meta catalog, so you can easily create ads right where your customers are.

Help drive better ad performance by setting up a conversion pixel
Easily set up your ads with a one-time account connection
Sell from one inventory that automatically syncs to your catalog used for ads

This is the development repository for the Meta for WooCommerce plugin.

Support

Please first take a look at the Meta helpcenter docs, by searching for keywords like ‘WooCommerce’ here. If you didn’t find what you were looking for, you can go to Meta direct support and ask your question.

If you have a WooCommerce.com account, you can search for help or submit a help request on WooCommerce.com.

Logging

The plugin offers logging that can help debug various problems. You can enable debug mode in the main plugin settings panel under the Enable debug mode section. By default plugin omits headers in the requests to make the logs more readable. If debugging with headers is necessary you can enable the headers in the logs by setting wc_facebook_request_headers_in_debug_log option to true.

Development

Developing

Clone this repository into the wp-content/plugins/ folder your WooCommerce development environment.
Install dependencies:
- npm install
- composer install
Build assets:
- npm start to build a development version
Linting:
- npm run lint:php to run PHPCS linter on all PHP files
Testing:
- ./bin/install-wp-tests.sh <test-db-name> <db-user> <db-password> [db-host] to set up testing environment
- npm run test:php to run PHP unit tests on all PHP files
- ./vendor/bin/phpunit --coverage-html=reports/coverage to run PHP unit tests with coverage

Production build

npm run build : Builds a production version.

Releasing

Refer to the wiki for details of how to build and release the plugin.

PHPCS Linting and PHP 8.1+

We currently do not support PHPCS on PHP 8.1+ versions. Please run PHPCS checks on PHP 8.0 or lower versions. Refer #2624 PR for additional context.