Add plugin integration for WooCommerce

[zutigrm]

Feature Description

WooCommerce conversion events should be supported in the new conversion event tracking infrastructure.

See implementation and class design and plugin specific notes section in the design doc

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• Conversion events from WooCommerce should be tracked and supported by our infrastructure.
• When product is added to the cart, add_to_cart conversion event should be tracked.
• When checkout process is completed purchase conversion event should be sent

Implementation Brief

• Add Google\Site_Kit\Core\Conversion_Tracking\Conversion_Event_Providers\WooCommerce
  • It should implement Google\Site_Kit\Core\Conversion_Tracking\Conversion_Events_Provider interface.
  • Define class property conversion_provider_slug with a value, say woocommerce
  • It should have following methods:
    • is_active - check if WC_PLUGIN_FILE constant is defined
      • return true if it is
      • otherwise return false
    • get_event_names - return an associative array contain two values add_to_cart and purchase
    • register_script - Instantiate the Google\Site_Kit\Core\Assets\Script class and register the script, leveraging the execution argument for deferring the script. It should return the Script instance.
      • You can see an example of instantiating the Script class here

        site-kit-wp/includes/Core/Assets/Assets.php

        Lines 441 to 449 in fd7efe4

        	new Script(
        	'googlesitekit-polyfills',
        	array(
        	'src' => $base_url . 'js/googlesitekit-polyfills.js',
        	'dependencies' => array(
        	'googlesitekit-base-data',
        	),
        	)
        	),

      • Use woocommerce script as dependency
      • Include 'execution' => 'defer'
      • For handle name use gsk-cep-{$this->conversion_provider_slug}
      • return the Script instance
• Add assets/js/event-providers/woocommerce.js
  • Include the WooCommerce specific event listeners that will trigger the event once document is loaded. Events are handled with jQuery so .on() listener should be used, examples:

$( 'body' ).on( 'added_to_cart', function() {
   gtag( 'event', 'add_to_cart' );
} );
$( 'body' ).on( 'checkout_place_order_success', function() {
   gtag( 'event', 'purchase' );
} );

• Include JS file path in the conversionEventProviders.config.js webpack partial added in Add Webpack Partial That Will Build Conversion Providers Specific JS Files #8531
• Ensure yield conversionEventProviders( mode ); is run in the main webpack.config.js config (it is commented out while there are no entry points)
• Include the plugin name and class path to the array of main Conversion_Events class property added in Add Main Conversion_Tracking Class #8528

Test Coverage

• You can add basic test coverage for WooCommerce class, testing that get_event_names method returns correct event names, and register_script returns script instance with proper handle. Also is_active can be confirmed by defining the plugin constant

QA Brief

• Install an extension for your browser that lets you track Analytics events
• Enable the conversionInfra feature flag for your site
• Install and activate a theme that uses the standard woocommerce scripts on the frontend.
• Install and activate the woocommerce plugin
• Create a new product and go to the shop page.
• Add that product to the cart and ensure that the appropriate event is tracked
• Go to the cart and do checkout. Verify that the appropriate event is tracked as well.

Changelog entry

• Add support for Analytics events when WooCommerce is connected.

[eugene-manuilov]

AC ✔️

[zutigrm]

@benbowler Added event name we should track in the AC

[benbowler]

Thanks @zutigrm I didn't get as much time as I hoped to work on this ticket today so have un-assigned while I'm out for others to work on.

[eugene-manuilov]

IB ✔️

[mohitwp]

QA Update ❌

• Tested on dev environment.
• Verified when conversionInfra feature flag is not enabled.
• Also, verified when conversionInfra feature flag is enabled.
• Tested after installing WooCommerce with Astra theme.
• Tested event tracking for both 'add to card' and 'checkout' activity.

@eugene-manuilov In my test add_to_cart and purchase conversion events are not getting track. I'm getting similar response as I'm getting when conversionInfra feature flag is not enabled.

Recording.912.mp4

[eugene-manuilov]

@mohitwp, unfortunately, there must be a perfect theme to get it working correctly. The Astra theme doesn't use the .checkout class for its checkout form, hence Woocommerce can't track its submission and doesn't know when to trigger its event.

Regarding adding products to the cart, it will work from the shop page since adding products there works using expected markup that is compatible with Woocommerce js. On the single product page, it won't work because it doesn't use js to process when the user clicks on the add to cart button.

[mohitwp]

QA Update ⚠️

Thanks @eugene-manuilov

• I tested this on 3 free themes listed on WooCommerce site Deli, Storefront and Boutique.
• I added product from shop page as well as from Individual product page.
• In my test add_to_cart and purchase conversion events are not getting track on alll above 3 themes. I'm getting similar response as I'm getting when conversionInfra feature flag is not enabled.
• I'm thinking that above 3 themes must be perfect because all are listed on WooCommerce site.
• Can you please check if these themes are suitable or not for our test ? Also, can you please share if you know any theme on which listed events are getting track.
  cc @wpdarren

Recording.916.mp4

Recording.917.mp4

Recording.918.mp4

[mohitwp]

QA Update ❌

• Tested on dev environment plugin zip file provided by Eugene.
• Verified when conversionInfra feature flag is disabled.
• Verified when conversionInfra feature flag is enabled.
• Verified when Analytics is connected.
• Verified when both Analytics and ads module are connected.
• Verified when only Ads module is connected.
• Verified when both Analytics and ads module are disconnected but conversionInfra feature flag is enabled.
• Theme - Storefront

@eugene-manuilov For me 'add_to_cart event is getting track when I add product into cart from shopping page. But, purchase event is not getting track when I complete checkout process. I tested using cash on delivery, stripe credit card and cheque payment options but 'purchase' event is not getting track.

add to cart event

When conversionInfra feature flag is enabled and Ads module is connected.

Recording.930.mp4

When conversionInfra feature flag is enabled. Both Analytics and Ads modules are connected.

Recording.931.mp4

[eugene-manuilov]

@aaemnnosttv do you mind looking into it?

[aaemnnosttv]

Let's leave this for now. We can address it in a follow-up to improve the accuracy. Until then it's behind a feature flag.