Google Analytics: Add remaining enhanced eCommerce trackers by allendav · Pull Request #8218 · Automattic/jetpack

allendav · 2017-11-20T21:13:52Z

Changes proposed in this Pull Request:

Adds support for the following Enhanced eCommerce tracking events:
Remove item from cart
Track product impressions
Track product listing clicks
Track product detail views
Track checkout started

Testing instructions:

See also Google Analytics: Add support for universal analytics for eCommerce #8182
Sign up for a Google Analytics tracking code for your test site
Install, activate and connect Jetpack
Install and activate WooCommerce
Create a product with no SKU and at least two categories
Create another product with a SKU and at least two categories
Replace modules/google-analytics with the files from this branch
Install and activate the Jetpack Google Analytics Helper plugin ( https://github.com/Automattic/jetpack-google-analytics-helper )

Remove From Cart

Use the helper plugin (wp-admin > Tools > Jetpack Google Analytics Helper) to set the following:

Google Analytics Tracking / Property ID: UA-12345678-1 (use a real tracking/property ID, not this one)
Anonymize IP Addresses: unchecked
Track Purchase Transactions: unchecked
Track Add to Cart Events: unchecked
Enable Enhanced eCommerce: CHECKED
Track Remove from Cart: CHECKED
Track Product Impressions on Listing Pages: unchecked
Track Product Clicks on Listing Pages: unchecked
Track Product Detail Views: unchecked
Track Checkout Process Initiated: unchecked

In your Google Analytics Dashboard ( https://analytics.google.com/ ), go to Admin for your site (it looks like a gear in the lower left corner)
Under View select Ecommerce Settings
Enable Ecommerce AND Enhanced eCommerce if you haven't already.
Add the SKU-less product and the SKU'd product to the cart
Navigate to cart view
View the source for the page
Search for "ec:" - ensure javascript is enqueued for both products
Open the JavaScript dev console
Click on the remove for each product in turn
Ensure no JavaScript errors appear in the console
Wait a few minutes
In your Google Analytics Dashboard, go to Real-time and then Events
Make sure you see the remove from cart events for the SKU-less and the SKU'd product (you might need to click on the UX category to see them)

Product Impressions

Use the helper plugin (wp-admin > Tools > Jetpack Google Analytics Helper) to set the following:

Google Analytics Tracking / Property ID: UA-12345678-1 (use a real tracking/property ID, not this one)
Anonymize IP Addresses: unchecked
Track Purchase Transactions: unchecked
Track Add to Cart Events: unchecked
Enable Enhanced eCommerce: CHECKED
Track Remove from Cart: unchecked
Track Product Impressions on Listing Pages: CHECKED
Track Product Clicks on Listing Pages: unchecked
Track Product Detail Views: unchecked
Track Checkout Process Initiated: unchecked

Open the JavaScript dev console if not already open
Navigate to shop view (i.e. products list)
View the source for the page
Search for "ec:addImpression" - make sure that ec: command is enqueued for both products
Ensure no JavaScript errors appear in the console
Wait a few minutes
In your Google Analytics Dashboard, go to Conversions and then eCommerce and then Product List Performance
Make sure you see the entries for the SKU-less and the SKU'd product

Product Clicks

Use the helper plugin (wp-admin > Tools > Jetpack Google Analytics Helper) to set the following:

Google Analytics Tracking / Property ID: UA-12345678-1 (use a real tracking/property ID, not this one)
Anonymize IP Addresses: unchecked
Track Purchase Transactions: unchecked
Track Add to Cart Events: unchecked
Enable Enhanced eCommerce: CHECKED
Track Remove from Cart: unchecked
Track Product Impressions on Listing Pages: unchecked
Track Product Clicks on Listing Pages: CHECKED
Track Product Detail Views: unchecked
Track Checkout Process Initiated: unchecked

Open the JavaScript dev console if not already open
Navigate to shop view (i.e. products list)
View the source for the page
Search for "ec:" - make sure that a click handler is in the page source for each product, e.g.

$( '.products .post-1390 a' ).click( function() {

Ensure no JavaScript errors appear in the console
Click on the PICTURE for each product (NOT the Add to Cart button) (and then go back and repeat for the next product)
Wait a few minutes
In your Google Analytics Dashboard, go to Conversions and then eCommerce and then Product List Performance
Make sure you see the entries for the SKU-less and the SKU'd product

Product Detail View

Use the helper plugin (wp-admin > Tools > Jetpack Google Analytics Helper) to set the following:

Google Analytics Tracking / Property ID: UA-12345678-1 (use a real tracking/property ID, not this one)
Anonymize IP Addresses: unchecked
Track Purchase Transactions: unchecked
Track Add to Cart Events: unchecked
Enable Enhanced eCommerce: CHECKED
Track Remove from Cart: unchecked
Track Product Impressions on Listing Pages: unchecked
Track Product Clicks on Listing Pages: unchecked
Track Product Detail Views: CHECKED
Track Checkout Process Initiated: unchecked

Open the JavaScript dev console if not already open
Navigate to a single product view
View the source for the page
Search for 'ec:setAction', 'detail' - make sure that an addProduct preceeds it for the product
Ensure no JavaScript errors appear in the console
Wait a few minutes
In your Google Analytics Dashboard, go to Conversions and then eCommerce and then Product List Performance
Make sure you see the entries for the SKU-less and the SKU'd product

Checkout Initiated

Use the helper plugin (wp-admin > Tools > Jetpack Google Analytics Helper) to set the following:

Google Analytics Tracking / Property ID: UA-12345678-1 (use a real tracking/property ID, not this one)
Anonymize IP Addresses: unchecked
Track Purchase Transactions: unchecked
Track Add to Cart Events: unchecked
Enable Enhanced eCommerce: CHECKED
Track Remove from Cart: unchecked
Track Product Impressions on Listing Pages: unchecked
Track Product Clicks on Listing Pages: unchecked
Track Product Detail Views: unchecked
Track Checkout Process Initiated: CHECKED

Open the JavaScript dev console if not already open
Navigate to a each product view and add the product to your cart
Proceed to checkout
View the source for the page
Search for 'ec:setAction', 'checkout' - make sure that an addProduct preceeds it for each product, e.g.:

ga( 'ec:addProduct', {"id":"12345678-0123","name":"Has SKU Two Cat","category":"Albums\/T-shirts","price":"123","quantity":1} );
ga( 'ec:addProduct', {"id":"#1389","name":"No SKU Two Cat","category":"Albums\/Singles","price":"123","quantity":1} );
ga( 'ec:setAction','checkout' );

Ensure no JavaScript errors appear in the console
Wait a few minutes
In your Google Analytics Dashboard, go to ??? (I couldn't find where this ends up - do you know @justinshreve ?)
Lastly, disable WooCommerce
Make sure with a tracker ID enabled, and all settings INCLUDING enhanced ecommerce enabled, that you are able to navigate the site without PHP errors
Make sure with a tracker ID enabled, and all settings EXCEPT enhanced ecommerce enabled, that you are able to navigate the site without PHP errors

emdashcodes · 2017-11-21T18:47:25Z

@allendav For the Remove From Cart event, I seem to be having issues if I remove one item, and then another. Only the first one seems to get logged. I see a network event to the GA collect endpoint for the first product I remove. I don't see a request for the second event and that event doesn't show up.

emdashcodes · 2017-11-21T19:56:42Z

Checkout Initiated
I couldn't find where this ends up - do you know @justinshreve?

I saw data come in the following two places:

Conversions > eCommerce Shopping Behavior (sessions with Check-out) and Conversions -> eCommerce -> Checkout Behavior

emdashcodes

I have two questions and I am having an issue with the remove from cart event (#8218 (comment)). Otherwise, everything else seems to be testing nicely now and I see data coming into GA.

emdashcodes · 2017-11-21T19:50:18Z

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

+		}
+
+		$item_details = array(
+			'id' => $product->get_id(),


Should this be sku or id like the other entries?

I was wondering about that too - I'll make it consistent

Fixed in 81f4fd8

emdashcodes · 2017-11-21T19:50:25Z

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

+		$selector = ".products .post-" . esc_js( $product->get_id() ) . " a";
+
+		$item_details = array(
+			'id' => $product->get_id(),


Should this be sku or id like the other entries?

Fixed in 81f4fd8

allendav · 2017-11-22T00:28:38Z

@justinshreve wrote:

@allendav For the Remove From Cart event, I seem to be having issues if I remove one item, and then another. Only the first one seems to get logged. I see a network event to the GA collect endpoint for the first product I remove. I don't see a request for the second event and that event doesn't show up.

Hmmm - I'll take a look

edit: OK - I can reproduce this as well. When the first item is removed, core WooCommerce refreshes the cart display. When this happens, the jQuery added event handler for GA for a.remove gets lost. Not sure how to fix yet - this could be tricky - might need to let it bubble up to a container and listen there or something

edit: edit: Fixed in a1e5730

To verify it is working properly, add the following to remove_from_cart and then click on items to your heart's content.

console.log( 'in remove_from_cart, productDetails=', productDetails );

allendav · 2017-11-22T01:27:24Z

@justinshreve - all items, including the remove-from-cart business, fixed and ready for re-review

emdashcodes

Looking good from my end. Everything is testing correctly.

jeherve

Just a quick note to help with our documentation.

jeherve · 2017-11-23T19:13:07Z

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

+		$cart = WC()->cart->get_cart();
+
+		foreach ( $cart as $cart_item_key => $cart_item ) {
+			$product = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );


Could you add a docblock here so as to not trip the parser? Since it's a Woocommerce filter something like /** This filter is already documented in xxxx.php */ would do the trick.

Fixed in 5977a8b

…acking

…r next PR.

unneeded jquery nesting

anchors that can get re-rendered

allendav added [Feature] Google Analytics [Status] In Progress labels Nov 20, 2017

allendav self-assigned this Nov 20, 2017

allendav requested a review from a team as a code owner November 20, 2017 21:13

allendav changed the base branch from master to add/8181-enhanced-google-analytics November 20, 2017 21:14

allendav requested review from dereksmart, emdashcodes and zinigor November 21, 2017 01:02

allendav added [Status] Needs Review This PR is ready for review. and removed [Status] In Progress labels Nov 21, 2017

emdashcodes reviewed Nov 21, 2017

View reviewed changes

allendav added [Status] Needs Design Review Design has been added. Needs a review! and removed [Status] Needs Design Review Design has been added. Needs a review! labels Nov 22, 2017

allendav mentioned this pull request Nov 22, 2017

Store: Add support for universal analytics for stores Automattic/wp-calypso#19888

Merged

emdashcodes approved these changes Nov 22, 2017

View reviewed changes

jeherve reviewed Nov 23, 2017

View reviewed changes

allendav force-pushed the add/8181-enhanced-google-analytics-moar-settings branch from 5977a8b to 4a1eee3 Compare November 25, 2017 18:12

allendav mentioned this pull request Nov 26, 2017

Google Analytics: Add support for universal analytics for eCommerce #8182

Merged

dereksmart changed the base branch from add/8181-enhanced-google-analytics to master November 27, 2017 18:07

dereksmart changed the base branch from master to add/8181-enhanced-google-analytics November 27, 2017 18:08

allendav changed the base branch from add/8181-enhanced-google-analytics to master November 27, 2017 18:19

Allen Snook added 5 commits November 27, 2017 10:21

Add support for universal analytics

dcf7362

Refactor into two concrete impls - one for legacy and one for universal

924ec64

Add header and footer script; support universal anonymiz and order tr…

1c9eea3

…acking

Remove some of the enh options for now - to be delivered in next PR

fceff3f

Track add to cart for enh ecommerce analytics. Remove other events fo…

baa675a

…r next PR.

Allen Snook added 9 commits November 27, 2017 10:30

Remove debug dump

9078832

Google Analytics: Add additional enhanced ecommerce tracking items

6737de0

Add javascript generation for remaining options; clean up

4439a1c

unneeded jquery nesting

Fix product action, add missing semi in emitted JS

fedd7c8

Ensure pageview is enqueued AFTER impression JS

20358ef

DRY sku or id generation

71bb868

Use jQuery event bubbling to avoid attaching directly to remove

2e9ce46

anchors that can get re-rendered

Remove debug dump

bbb9390

Add comment re woocommerce product filter we use

8688b65

allendav force-pushed the add/8181-enhanced-google-analytics-moar-settings branch from 4a1eee3 to 8688b65 Compare November 27, 2017 18:31

Restore accidentally removed whitespace

f533aab

oskosk added this to the 5.6 milestone Nov 27, 2017

dereksmart approved these changes Nov 27, 2017

View reviewed changes

dereksmart merged commit 8a61841 into master Nov 27, 2017

dereksmart deleted the add/8181-enhanced-google-analytics-moar-settings branch November 27, 2017 19:56

dereksmart removed the [Status] Needs Review This PR is ready for review. label Nov 27, 2017

Conversation

allendav commented Nov 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes proposed in this Pull Request:

Testing instructions:

Remove From Cart

Product Impressions

Product Clicks

Product Detail View

Checkout Initiated

Uh oh!

emdashcodes commented Nov 21, 2017

Uh oh!

emdashcodes commented Nov 21, 2017

Uh oh!

emdashcodes left a comment

Choose a reason for hiding this comment

Uh oh!

emdashcodes Nov 21, 2017

Choose a reason for hiding this comment

Uh oh!

allendav Nov 22, 2017

Choose a reason for hiding this comment

Uh oh!

allendav Nov 22, 2017

Choose a reason for hiding this comment

Uh oh!

emdashcodes Nov 21, 2017

Choose a reason for hiding this comment

Uh oh!

allendav Nov 22, 2017

Choose a reason for hiding this comment

Uh oh!

allendav commented Nov 22, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allendav commented Nov 22, 2017

Uh oh!

emdashcodes left a comment

Choose a reason for hiding this comment

Uh oh!

jeherve left a comment

Choose a reason for hiding this comment

Uh oh!

jeherve Nov 23, 2017

Choose a reason for hiding this comment

Uh oh!

allendav Nov 25, 2017

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

allendav commented Nov 20, 2017 •

edited

Loading

allendav commented Nov 22, 2017 •

edited

Loading