Adjust click event tracking when connecting, disconnecting, and opening billing setup for Google Ads account #2421

eason9487 · 2024-05-31T12:36:27Z

Changes proposed in this Pull Request:

PT: pcTzPl-2iK-p2

The PR adds/adjusts three tracking events for for Google Ads account:

Add context and step event properties to the click event tracking in ConnectAds.
Add the gla_ads_account_disconnect_button_click event with context and step event properties to the click event tracking in DisconnectAccount.
Adjust context and add step event properties to the click event tracking in BillingSetupCard.
Extra change: Remove the unused component GoogleAdsAccountSection.

Detailed test instructions:

Open the Console tab in the browser DevTool, and run localStorage.setItem( 'debug', 'wc-admin:*' ) to enable tracking debugging mode.
Disconnect Google Ads account if there is a connected one.
Go to step 1 of the Extension onboarding.
Connect an existing Google Ads account.
Check if the gla_ads_account_connect_button_click event is sent with id, context and step.
Disconnect the Google Ads account.
Check if the gla_ads_account_disconnect_button_click event is sent with context and step.
Create a new Google Ads account but don't set up billing, and proceed to step 4 of the onboarding flow.
Open the campaign creation setup.
Click on the "Set up billing" button to see if it can open the billing setup page in a pop-up window.
Check if the gla_ads_set_up_billing_click event is sent with link_id, href, context and step.
Click on the "click here instead" link to see if it can open the billing setup page in a new browser tab.
Check if the gla_ads_set_up_billing_click event is sent with link_id, href, context and step.

Changelog entry

Tweak - Adjust click event tracking when connecting, disconnecting, and opening billing setup for Google Ads account.

… in `ConnectAds`.

… in `DisconnectAccount`.

…racking in `BillingSetupCard`.

codecov · 2024-05-31T12:38:33Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 63.4%. Comparing base (1179f5b) to head (0e6b33d).
Report is 1 commits behind head on feature/seamlessly-conversion-tracking.

❗ Current head 0e6b33d differs from pull request most recent head 2b6a746

Please upload reports for the commit 2b6a746 to get more accurate results.

Additional details and impacted files

@@                           Coverage Diff                            @@
##           feature/seamlessly-conversion-tracking   #2421     +/-   ##
========================================================================
+ Coverage                                    62.6%   63.4%   +0.8%     
========================================================================
  Files                                         321     321             
  Lines                                        5019    5027      +8     
  Branches                                     1216    1218      +2     
========================================================================
+ Hits                                         3141    3188     +47     
+ Misses                                       1709    1672     -37     
+ Partials                                      169     167      -2

Flag	Coverage Δ
js-unit-tests	`63.4% <100.0%> (+0.8%)`	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
...nents/google-ads-account-card/connect-ads/index.js	`96.0% <100.0%> (+91.8%)`	⬆️
...ents/google-ads-account-card/disconnect-account.js	`100.0% <100.0%> (+37.5%)`	⬆️
...onents/paid-ads/billing-card/billing-setup-card.js	`92.9% <100.0%> (+42.9%)`	⬆️
js/src/tests/expectEventWithPropertiesFilter.js	`100.0% <100.0%> (ø)`

... and 5 files with indirect coverage changes

ianlin

Thanks for adding event tracking, I started by testing the behaviour and I've left a question regarding the context setup-ads and setup-mc.

ianlin · 2024-06-03T08:09:48Z

js/src/components/paid-ads/billing-card/billing-setup-card.js

-					onClick={ handleClick }
-					eventName="gla_ads_set_up_billing_click"
-					eventProps={ {
-						context: 'setup-ads',


It used to set the context as setup-ads, but right now it showed setup-mc when I clicked Set up billing button. Is it expected?

Yes, 'setup-mc' is expected if you were doing extension onboarding. The billing setup card is also used in the Ads onboarding flow, where the value of context is expected to be 'setup-ads'.

It's true that there's some inconsistency and confusion in the use of these context values, so I've put them down in tracks.js momentarily.

google-listings-and-ads/js/src/utils/tracks.js

Lines 27 to 40 in a63df8d

/*

* Please be aware of when to use these context values

* - 'setup-mc': Extension onboarding (a.k.a Merchant Center Setup or MC Setup)

* - 'setup-ads': Ads onboarding (a.k.a Google Ads Setup)

*

* Since Google Ads Setup has been added to the extension onboarding,

* the 'setup-mc' is no longer an appropriate value to identify it.

* The same is the case for 'setup-ads', which represents Google Ads Setup.

*

* However, as these values are heavily used in codebase and event tracking,

* these values continue to be used at present for consistency.

*/

export const CONTEXT_EXTENSION_ONBOARDING = 'setup-mc';

export const CONTEXT_ADS_ONBOARDING = 'setup-ads';

ianlin

Thanks for the quick answer. Tested locally and it worked as expected. Just left some comments regarding the tracking JSDoc.

ianlin · 2024-06-03T08:51:07Z

js/src/components/google-ads-account-card/connect-ads/index.js

@@ -131,7 +136,9 @@ const ConnectAds = ( props ) => {
 							isSecondary
 							disabled={ ! value }
 							eventName="gla_ads_account_connect_button_click"
-							eventProps={ { id: Number( value ) } }
+							eventProps={ getEventProps( {
+								id: Number( value ),


Just noting down what I thought while reviewing. I was thinking that the name of the Ads ID property when disconnecting account is gla_ads_id so why not use the same here for consistency, but it's been there before this PR so I think keeping it as is would be better for querying the tracking results.

The gla_ads_id is one of the global event properties on the frontend, and the id of this event exists before the global event property. In order to avoid unnecessary inconsistencies in tracking data, the current preference is to leave it unchanged.

ianlin · 2024-06-03T09:00:28Z

js/src/components/google-ads-account-card/connect-ads/index.js

+ * @property {string} [context] Indicates the place where the button is located.
+ * @property {string} [step] Indicates the step in the onboarding process.


Do you think we should also add gla_mc_id and gla_version props in the JSDoc so the tracking document could be more accurate?

The current doc:tracking script (woocommerce-grow-jsdoc) doesn't support global event properties, and I'm not leaning toward duplicating global properties for the docs of all frontend tracking events.

It needs more discussion about how the woocommerce-grow-jsdoc tool should handle global event properties. I've first listed the global event properties directly at the beginning of the tracking README file. 0e6b33d

Got it, thanks for clarifying and adding the global event props in the tracking README. 👍

ianlin · 2024-06-03T09:01:04Z

js/src/components/google-ads-account-card/disconnect-account.js

+ * @property {string} [context] Indicates the place where the button is located.
+ * @property {string} [step] Indicates the step in the onboarding process.


Same as above, do you think it'd be better to add more props in the doc?

See #2421 (comment)

Ref: - #2421 (comment) - #2421 (comment)

…-tracking-part-2

eason9487 added 4 commits May 31, 2024 20:11

Add context and step event properties to the click event tracking…

4a2bc0d

… in `ConnectAds`.

Add context and step event properties to the click event tracking…

2ef11c7

… in `DisconnectAccount`.

Adjust context and add step event properties to the click event t…

9a997e2

…racking in `BillingSetupCard`.

Remove the unused component GoogleAdsAccountSection.

130d843

eason9487 requested a review from a team May 31, 2024 12:36

eason9487 self-assigned this May 31, 2024

github-actions bot added the changelog: tweak Small change, that isn't actually very important. label May 31, 2024

ianlin reviewed Jun 3, 2024

View reviewed changes

ianlin approved these changes Jun 3, 2024

View reviewed changes

Add global event properties to the tracking README file.

0e6b33d

Ref: - #2421 (comment) - #2421 (comment)

Base automatically changed from tweak/2215-event-tracking-part-1 to feature/seamlessly-conversion-tracking June 5, 2024 08:43

Merge branch 'tweak/2215-event-tracking-part-1' into tweak/2215-event…

2b6a746

…-tracking-part-2

eason9487 merged commit 086366d into feature/seamlessly-conversion-tracking Jun 5, 2024
5 checks passed

eason9487 deleted the tweak/2215-event-tracking-part-2 branch June 5, 2024 08:59

eason9487 mentioned this pull request Jun 5, 2024

Enable users to seamlessly set up conversion tracking during the onboarding flow #2415

Merged

2 tasks

mikkamp mentioned this pull request Jun 10, 2024

Release 2.7.2 #2426

Merged

21 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjust click event tracking when connecting, disconnecting, and opening billing setup for Google Ads account #2421

Adjust click event tracking when connecting, disconnecting, and opening billing setup for Google Ads account #2421

eason9487 commented May 31, 2024

codecov bot commented May 31, 2024 •

edited

Loading

ianlin left a comment

ianlin Jun 3, 2024

eason9487 Jun 3, 2024 •

edited

Loading

ianlin left a comment

ianlin Jun 3, 2024

eason9487 Jun 3, 2024

ianlin Jun 3, 2024

eason9487 Jun 3, 2024

ianlin Jun 4, 2024

ianlin Jun 3, 2024

eason9487 Jun 3, 2024

	/*
	* Please be aware of when to use these context values
	* - 'setup-mc': Extension onboarding (a.k.a Merchant Center Setup or MC Setup)
	* - 'setup-ads': Ads onboarding (a.k.a Google Ads Setup)
	*
	* Since Google Ads Setup has been added to the extension onboarding,
	* the 'setup-mc' is no longer an appropriate value to identify it.
	* The same is the case for 'setup-ads', which represents Google Ads Setup.
	*
	* However, as these values are heavily used in codebase and event tracking,
	* these values continue to be used at present for consistency.
	*/
	export const CONTEXT_EXTENSION_ONBOARDING = 'setup-mc';
	export const CONTEXT_ADS_ONBOARDING = 'setup-ads';

		* @property {string} [context] Indicates the place where the button is located.
		* @property {string} [step] Indicates the step in the onboarding process.

Adjust click event tracking when connecting, disconnecting, and opening billing setup for Google Ads account #2421

Adjust click event tracking when connecting, disconnecting, and opening billing setup for Google Ads account #2421

Conversation

eason9487 commented May 31, 2024

Changes proposed in this Pull Request:

Detailed test instructions:

Changelog entry

codecov bot commented May 31, 2024 • edited Loading

Codecov Report

ianlin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

eason9487 Jun 3, 2024 • edited Loading

Choose a reason for hiding this comment

ianlin left a 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

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

codecov bot commented May 31, 2024 •

edited

Loading

eason9487 Jun 3, 2024 •

edited

Loading