New module for WooCommerce analytics #8296

greenafrican · 2017-12-04T13:28:04Z

New module with WooCommerce analytics ported from the recent Google Analytics enhancements.

Changes proposed in this Pull Request:

support for add-to-cart events
support for product detail views
support for remove from cart events
support checkout events
support for order-received events

Testing instructions:

Use a test site which is connected with Jetpack and has WooCommerce active
As a logged out user, notice a request to https://stats.wp.com/s-20180821.js on public facing pages. The 20180821 is dynamic and will change based on date
Notice https://stats.wp.com/s-20180821.js is not requested on wp-admin pages because this code should not run on admin facing pages. The same for logged in admin users.
Back to user facing pages, open the console and see _wca global exists and is an ~~array~~ object.

Product Page View

Go to a product page
See a Network request t.gif

Add to Cart via a list

Click "Add to Cart"
See a Network request t.gif

Add to Cart via a Product Page

Go to a product page
Enable the Preserve log checkbox at the top of the console to persist the console history between page refreshes or changes.
Click "Add to Cart"
See a Network request t.gif

Remove from Cart via click on the "X"

Add an item to your cart
Go to the cart and remove the item by clicking the "X"
See a Network request t.gif

Remove from Cart via updating the quantity

Add an item to your cart
Go to the cart and remove the item by changing the quantity to 0
Click "Update"
See a Network request t.gif

Order Received

"Place Order" on your cart
Once the page refreshes, see one event for each item in the order

Legend

_en: event name
pi: product id
pn: product name
pq: product quantity
pc: product category
pp: product price
oi: order id

Changelog entry

We added a new module for WooCommerce analytics that will use Jetpack's analytics functionality to help you track activity on your WooCommerce store.

psealock · 2017-12-05T01:24:30Z

modules/woocommerce-analytics/classes/wp-woocommerce-analytics-universal.php

+					'id': productSku ? productSku : '#' + productID,
+					'quantity': $( this ).data( 'quantity' ),
+				};
+				_wca.track( {


Include a page view in here as well.

Was thinking of commenting on the GA code too for this.

@allendav @dereksmart - We have previously looked at manually sending a product view event when an add-to-cart event is triggered from a list (eg. shop) page so that you can never have a 0 view -> 1 cart -> 1 purchase funnel. What do you think?

psealock · 2017-12-05T01:53:50Z

Do you think its worth it to integrate this code into the existing GA module? We could rename it, of course.

psealock · 2017-12-05T02:08:14Z

modules/woocommerce-analytics/classes/wp-woocommerce-analytics-universal.php

+
+		wc_enqueue_js(
+			"window._wca = window._wca || [];
+			$( '" . esc_js( $selector ) . "' ).click( function() {


$ will need to be jQuery

psealock · 2017-12-05T02:21:05Z

modules/woocommerce-analytics/wp-woocommerce-analytics.php

+	 */
+	private function __construct() {
+		$analytics = new Jetpack_WooCommerce_Analytics_Universal();
+	}


Seems like this would be the ideal place to do all the checks for isActiveStore or WooCommerce is indeed installed.

Good idea, I also noted the repeated checks to WooCommerce above.

psealock · 2017-12-05T02:27:33Z

I pulled this branch down and the code doesn't seem to be included when I hit the page. Any tips?

EDIT: I threw this in a random place to get it to work:

require_once( JETPACK__PLUGIN_DIR . 'modules/woocommerce-analytics.php' );

psealock · 2017-12-05T02:59:25Z

modules/woocommerce-analytics/classes/wp-woocommerce-analytics-utils.php

+			return '';
+		}
+
+		return $product->get_sku() ? $product->get_sku() : '#' . $product->get_id();


Since this is an internal tool, lets drop the # from the id and remove references to sku, which won't be needed

psealock · 2017-12-05T03:04:48Z

modules/woocommerce-analytics/classes/wp-woocommerce-analytics-universal.php

+		$selector = ".add_to_cart_button:not(.product_type_variable, .product_type_grouped)";
+
+		wc_enqueue_js(
+			"$( '" . esc_js( $selector ) . "' ).click( function() {


By listening to the added_to_cart Woo event, we can fire our added to cart event when the server returns without errors on the callback.

jQuery('body').on('added_to_cart',function(){ // call track event here }

Is there an advantage to sending the event as soon as the user clicks the button?

The same situation for "remove from cart"

Except that event isn't fired for the non-async add-to-cart, is it?

That right. The add_to_cart function above still has to handle non-async

psealock · 2017-12-05T03:09:10Z

Should we also track update_cart for a change in quantity?

greenafrican · 2017-12-05T07:01:21Z

Do you think its worth it to integrate this code into the existing GA module? We could rename it, of course.

Thought about this a lot. Very happy to do that but I am concerned that GA is only available to premium users and we want to activate our module for all connected sites. Perhaps we can make some of the code usable for both modules?

greenafrican · 2017-12-05T07:04:11Z

I pulled this branch down and the code doesn't seem to be included when I hit the page. Any tips?

I'm not 100% clear on how to properly set up the module across Jetpack. I did get it to work by reading this - https://jetpack.com/support/control-jetpacks-modules-on-one-page/ Although the WooCommerce Analytics module appears and then disappears and then has a blank name once the page loads.

greenafrican · 2017-12-05T07:07:39Z

Should we also track update_cart for a change in quantity?

Yes, eventually. My initial thought is let's get the basic cart tracking working so we can look at the back end analysis and then we can catch up on the front end edge cases. We should add it to our backlog.

I guess we are interested in firing a remove from cart event when the quantity is updated to 0? We don't really care if it goes from 6 to 5, right?

gibrown · 2017-12-07T02:00:08Z

Is this using our analytics, or GA?

If it is ours, why not just add this to the existing stats module?

psealock · 2017-12-08T03:37:22Z

@gibrown

Is this using our analytics, or GA?

Ours

If it is ours, why not just add this to the existing stats module?

This is what we had originally, but the idea is to allow the user to turn it off, should they choose.

psealock · 2017-12-08T03:51:17Z

Checkout Process Update

GA uses woocommerce_after_checkout_form to trigger an event for checkout:

add_action( 'woocommerce_after_checkout_form', array( $this, 'checkout_process' ) );

This appears to be a bug because the code is run on the checkout screen, but before the user clicks on "Place Order". @allendav, am I reading this correctly? It seems these ga() calls happen even if the user bails on the order

jetpack/modules/google-analytics/classes/wp-google-analytics-universal.php

Lines 374 to 394 in eb3c3e3

    
           		foreach ( $cart as $cart_item_key => $cart_item ) { 
        
           			/** 
        
           			* This filter is already documented in woocommerce/templates/cart/cart.php 
        
           			*/ 
        
           			$product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key ); 
        
           			$product_sku_or_id = Jetpack_Google_Analytics_Utils::get_product_sku_or_id( $product ); 
        
           			$item_details = array( 
        
           				'id' => $product_sku_or_id, 
        
           				'name' => $product->get_title(), 
        
           				'category' => Jetpack_Google_Analytics_Utils::get_product_categories_concatenated( $product ), 
        
           				'price' => $product->get_price(), 
        
           				'quantity' => $cart_item[ 'quantity' ] 
        
           			); 
        
           			array_push( $universal_commands, "ga( 'ec:addProduct', " . wp_json_encode( $item_details ) . " );" ); 
        
           		} 
        
           		array_push( $universal_commands, "ga( 'ec:setAction','checkout' );" ); 
        
           		wc_enqueue_js( implode( "\r\n", $universal_commands ) );

We could use this opportunity to place a click event on the "Place Order" button, but if form validation fails its not really a placed order.

Alternatively, we can use is_order_received_page() to fire the event once checkout is confirmed. The problem here is that the cart is now empty and $cart = WC()->cart->get_cart(); will be empty.

@greenafrican, this is where I'm at and I've run out of time for today, so I pushed my progress even though its not complete.

greenafrican · 2017-12-08T06:57:43Z

Thanks @psealock I managed to do a bit of testing on this yesterday too.

This appears to be a bug because the code is run on the checkout screen, but before the user clicks on "Place Order"

I see they are tracking a ga( 'ec:setAction','checkout' ); rather than a purchase or order, so perhaps that is the right hook for that event?

I've wondered whether or not we should track checkout and purchase events to see if there are significant drop-offs between the two?

We could use the woocommerce_thankyou hook and while the cart isn't available then you do have the order object available and we can do foreach ( $order->get_items() as $order_item_id => $order_item ) {}.

greenafrican · 2017-12-08T07:32:21Z

I've updated the branch @psealock take a look and let me know what you think.

oskosk · 2018-02-21T20:43:53Z

Do you think I could have missed something? I eventually toggled everything in calypso for the advanced analytics for ecommerce

timmyc · 2018-02-21T20:49:23Z

Do you think I could have missed something? I eventually toggled everything in calypso for the advanced analytics for ecommerce

Sounds like your setup should have worked just fine. I've tested the code in a variety of formats - stand-alone plugin, bundled with wc-calypso-bridge but maybe the JP integration has gone awry on a clean install. I'll let you know what I find. @psealock is going to take it for another spin too.

oskosk · 2018-02-21T20:52:36Z

Thank you!

oskosk · 2018-02-21T20:55:11Z

Maybe it would be great to rebase this against latest master. The code is not conflicting, but a few releases have been out since this PR was opened. Relabeling as in need of author reply. When we're set please move to needs review again.

psealock · 2018-02-21T21:05:29Z

@oskosk The behaviour you describe is the desired result. At the time of writing the testing instructions in the original comment, s.js wasn't deployed and a few things have changed since then (I'll update now). My apologies for not updating that. And thanks for being thorough.

I didn't get to see an attempt to load s.js in the frontend while logged as admin.

Thats correct, we're only tracking users' users

I didn't get to see a failed attempt to load s.js in the frontend when logged out. it loads https://stats.wp.com/s-20180821.js properly

s-20180821.js is stats.wp.com's cache busting method and s.js is returned

_wca is not defined if visiting the frontend while logged in as admin

Yup, thats right

_wca is an object when visiting the home page being logged in with a non-admin user and when logged out

_wca is initialised as an array, then s.js (once loaded) converts it to an object including a method called push. This way, events can be pushed to a queue if triggered before s.js is loaded.

All in all, I wasn't able to see anything queued in window._wca

You should be able to see events in the Network tab.

I will update the test instructions and rebase from master now. Thanks again and sorry for the confusion.

… analytics enhancements

oskosk · 2018-02-21T21:33:20Z

awesome, thank you @psealock !

oskosk · 2018-02-21T22:03:13Z

Everything tested as described ! Except only one of the steps...

Removal of a product via quantity updating didn't trigger a t.gif load. Neither when I had 3,4,5 units and lowering the number. Nor going from 5 to 0 or going from 1 to 0.

Attaching capture of this:

oskosk · 2018-02-21T22:08:10Z

I'm merging this and opening an issue about it if I get to reproduce the problem again.

oskosk

LGTM!

* update changelog.txt * Update readme.txt with scaffolding for 5.9 changelog and release draft shortlink * Add changelog entry for #8243 * Add changelog entry for #8296 * Add changelog entry for #8367 * Add changelog entry for #8686 * Add changelog entry for #8707 * Add changelog entry for #8709 and #8714 * Add changelog entry for #8729 * Add changelog entry for #8777 * Add changelog entry for #8780 * Add changelog entry for #8786 * Add changelog entry for #8787 * Add changelog entry for #8801 #8805 #8832 #8865 and #8804 * Add changelog entry for #8817 * Add changelog entry for #8822 * Add changelog entry for #8823 * Add changelog entry for #8829 * Add changelog entry for #8834 * move some items to major enhancements * Add changelog entry for #8836 * Add changelog entry for #8839 * Add changelog entry for #8861 * Add changelog entry for #8862 * Add changelog entry for #8863 * Add changelog entry for #8866 * Add changelog entry for #8870 * Add changelog entry for #8874 * Add changelog entry for #8875 * Add changelog entry for #8881 * Add changelog entry for #8890 * Add changelog entry for #8911 * Add changelog entry for #8927 * Add changelog entry for #8931 * Add changelog entry for #8933 * Add changelog entry for #8930 * fix wording * typo * minor fixes * replace partner scripts for Jetpack Start in changelog entry * Update to-test.md * Update to-test.md * minor style fixes to to-test.md * minor style fixes to to-test.md * minor fixes on to-test.md * Add changelog entry for #8868 * Add changelog entry for #8844 * Add changelog entry for #8664 * Add changelog entry for #8935 * Add changelog entry for #8425 * Add changelog entry for #8625

greenafrican added [Status] In Progress [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it labels Dec 4, 2017

greenafrican requested a review from psealock December 4, 2017 13:28

greenafrican requested a review from a team as a code owner December 4, 2017 13:28

psealock reviewed Dec 5, 2017

View reviewed changes

jeherve added the [Feature] Google Analytics label Dec 5, 2017

greenafrican force-pushed the try/woocommerce-analytics branch 2 times, most recently from 64acc65 to eb2a1af Compare December 5, 2017 14:09

This was referenced Dec 6, 2017

Track site users for Store Stats #8123

Closed

Call s.js method from PHP #8283

Closed

greenafrican force-pushed the try/woocommerce-analytics branch 2 times, most recently from a5ec9d3 to fa80140 Compare December 6, 2017 10:32

jeherve added [Feature] WooCommerce Analytics and removed [Feature] Google Analytics labels Dec 6, 2017

greenafrican force-pushed the try/woocommerce-analytics branch from 7a03dc2 to 16352e5 Compare December 8, 2017 07:31

oskosk added [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Feb 21, 2018

try a new module with woocommerce tracking, ported from recent google…

0a25c99

… analytics enhancements

psealock force-pushed the try/woocommerce-analytics branch from 2b8c138 to 0a25c99 Compare February 21, 2018 21:13

oskosk added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. and removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! labels Feb 21, 2018

oskosk added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Feb 21, 2018

oskosk approved these changes Feb 21, 2018

View reviewed changes

oskosk merged commit 5df5c2e into master Feb 21, 2018

matticbot added the [Status] Needs Changelog label Feb 21, 2018

oskosk deleted the try/woocommerce-analytics branch February 21, 2018 22:13

oskosk mentioned this pull request Feb 21, 2018

WooCommerce Analytics: Not seeing a stat bump when removing a product by quantity #8893

Closed

jeherve added the [Status] Needs Testing We need to add this change to the testing call for this month's release label Feb 22, 2018

oskosk added [Status] Has Changelog and removed [Status] Needs Changelog labels Feb 27, 2018

oskosk added a commit that referenced this pull request Feb 27, 2018

Add changelog entry for #8296

b622788

jeherve mentioned this pull request Mar 26, 2020

Tag the WooCommerce Analytics tracking script so that it can be disabled if visitors refuse cookies #13039

Closed

kraftbj removed the [Status] Ready to Merge Go ahead, you can push that green button! label Oct 13, 2020

jeherve removed the [Status] Needs Testing We need to add this change to the testing call for this month's release label Apr 27, 2021

pmcpinto mentioned this pull request Aug 25, 2023

Add cart, checkout, and order confirmation pageview events to the woocommerce-analytics module woocommerce/woocommerce-blocks#9250

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New module for WooCommerce analytics #8296

New module for WooCommerce analytics #8296

greenafrican commented Dec 4, 2017 •

edited by oskosk

Loading

psealock Dec 5, 2017

greenafrican Dec 5, 2017

psealock commented Dec 5, 2017

psealock Dec 5, 2017

psealock Dec 5, 2017

timmyc Dec 14, 2017

psealock commented Dec 5, 2017 •

edited

Loading

psealock Dec 5, 2017

psealock Dec 5, 2017

psealock Dec 5, 2017

greenafrican Dec 5, 2017

psealock Dec 5, 2017

psealock commented Dec 5, 2017

greenafrican commented Dec 5, 2017

greenafrican commented Dec 5, 2017

greenafrican commented Dec 5, 2017

gibrown commented Dec 7, 2017

psealock commented Dec 8, 2017

psealock commented Dec 8, 2017

greenafrican commented Dec 8, 2017

greenafrican commented Dec 8, 2017

oskosk commented Feb 21, 2018

timmyc commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk commented Feb 21, 2018

psealock commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk left a comment

New module for WooCommerce analytics #8296

New module for WooCommerce analytics #8296

Conversation

greenafrican commented Dec 4, 2017 • edited by oskosk Loading

Changes proposed in this Pull Request:

Testing instructions:

Product Page View

Add to Cart via a list

Add to Cart via a Product Page

Remove from Cart via click on the "X"

Remove from Cart via updating the quantity

Order Received

Legend

Changelog entry

Choose a reason for hiding this comment

Choose a reason for hiding this comment

psealock commented Dec 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

psealock commented Dec 5, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

psealock commented Dec 5, 2017

greenafrican commented Dec 5, 2017

greenafrican commented Dec 5, 2017

greenafrican commented Dec 5, 2017

gibrown commented Dec 7, 2017

psealock commented Dec 8, 2017

psealock commented Dec 8, 2017

Checkout Process Update

greenafrican commented Dec 8, 2017

greenafrican commented Dec 8, 2017

oskosk commented Feb 21, 2018

timmyc commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk commented Feb 21, 2018

psealock commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk commented Feb 21, 2018

oskosk left a comment

Choose a reason for hiding this comment

greenafrican commented Dec 4, 2017 •

edited by oskosk

Loading

psealock commented Dec 5, 2017 •

edited

Loading