Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upcoming: [M3-7753] - Tag custom analytics events for account switching #10190

Merged

Conversation

mjac0bs
Copy link
Contributor

@mjac0bs mjac0bs commented Feb 13, 2024

Description πŸ“

For Parent/Child account switching flows, we want to keep track of:

  • the number of users who click the Switch Account buttons in the user menu and Account Landing page
  • the number of proxy users who switch back to parent accounts via the Switch Account drawer
  • the number of proxy users who encounter the session expiry modal when a parent's token has expired

Changes πŸ”„

List any change relevant to the reviewer.

  • Adds the sendSwitchAccountEvent, sendSwitchToParentAccountEvent, and sendSwitchAccountSessionExpiryEvent functions to analytics.ts and calls them when the corresponding button clicks are made.

Preview πŸ“·

Component Custom Event
SwitchAccountButton-UserMenu Screenshot 2024-02-13 at 8 59 59 AM
SwitchAccountButton-AccountLanding Screenshot 2024-02-13 at 9 00 19 AM
SwitchAccountDrawer-ProxyToParent Screenshot 2024-02-13 at 9 05 31 AM
Screenshot 2024-02-13 at 9 17 32 AM Screenshot 2024-02-13 at 9 01 02 AM Screenshot 2024-02-13 at 9 02 24 AM

How to test πŸ§ͺ

Prerequisites

(How to setup test environment)

  • Check out this PR and yarn dev
  • Confirm the parent/child feature flag is on and mocks are on
  • Go to http://localhost:3000 and turn on analytics logs for Adobe:
    • In the browser console, type _satellite.setDebug(true)
  • Confirm that the user_type for */profile is "parent" in serverHandlers.ts

Verification steps

(How to verify changes)

  • Go to http://localhost:3000/account/billing
  • Open the browser console and click on the Switch Account button
  • Confirm the sendSwitchAccountEvent has fired in the browser console log with label Account Landing
  • Open the user menu and click the Switch Account button
  • Confirm the sendSwitchAccountEvent has fired in the browser console log with label User Menu
  • Change the user_type for */profile to "proxy" in serverHandlers.ts
  • Click the Switch Account button and click "switch back to parent account".
  • Confirm the sendSwitchToParentAccountEvent has fired in the browser console log
  • Clear the application data in the browser console so that no parent token is cached in local storage
  • Click the Switch Account button and observe the session expiry dialog pops up.
  • Confirm that clicking any of the buttons to dismiss the dialog fires a sendSwitchAccountSessionExpiryEvent with the appropriate label. Note that Log In is tricky because the event will only be visible for a brief moment before the page redirects.

As an Author I have considered πŸ€”

Check all that apply

  • πŸ‘€ Doing a self review
  • ❔ Our contribution guidelines
  • 🀏 Splitting feature into small PRs
  • βž• Adding a changeset
  • πŸ§ͺ Providing/Improving test coverage
  • πŸ” Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • πŸ‘£ Providing comprehensive reproduction steps
  • πŸ“‘ Providing or updating our documentation
  • πŸ•› Scheduling a pair reviewing session
  • πŸ“± Providing mobile support
  • β™Ώ Providing accessibility support

@mjac0bs mjac0bs self-assigned this Feb 13, 2024
@mjac0bs mjac0bs added the Analytics Relating to Analytics migration project or Adobe Analytics label Feb 13, 2024

// AccountLanding.tsx
// UserMenu.tsx
export const sendSwitchAccountEvent = (
Copy link
Contributor Author

@mjac0bs mjac0bs Feb 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sendSwitchAccountEvent is going to get called whenever the Switch Account button is clicked, which means the analytics event will fire when a user clicks the button to open the drawer and switch back to parent account (which then fires sendSwitchToParentAccountEvent) and when the user clicks the button in attempt to open the drawer and sees the session expiry modal.

I opted not to mention proxy in the function name or category out of concern that might be misleading since some of the times the event fires, users will not truly be switching to a proxy account, but doing something else. (But screenshots have not been updated since that change.)

@mjac0bs mjac0bs marked this pull request as ready for review February 13, 2024 18:55
@mjac0bs mjac0bs requested a review from a team as a code owner February 13, 2024 18:55
@mjac0bs mjac0bs requested review from jdamore-linode, carrillo-erik and jaalah-akamai and removed request for a team February 13, 2024 18:55
Copy link
Contributor

@jaalah-akamai jaalah-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

βœ… Confirmed events for:

  • Both Switch Account Buttons
  • Expiry Dialog
  • Return to parent link

@mjac0bs mjac0bs added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Feb 14, 2024
@carrillo-erik
Copy link
Contributor

@mjac0bs Is there another step required to set up the logging on the user's end?
I have turned on the parent/child feature flag and same with the MSW, however, I do not see the events in the browser console logs. I am also getting an error _satellite is not defined. I have a little experience working with Adobe Analytics and recall the using the window object but that did not help in this case.

The code looks good to me and I can verify everything else other than the issue mentioned above.
Screenshot 2024-02-15 at 3 05 12 AM

@jaalah-akamai
Copy link
Contributor

@carrillo-erik you'll need the env variable as well - i'll dm you

@carrillo-erik
Copy link
Contributor

Thanks @jaalah-akamai

After I added the env variable, I can confirm the events are shown in the browser console logs.
Screenshot 2024-02-15 at 8 33 56 AM

@mjac0bs mjac0bs added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Feb 15, 2024
Copy link

Coverage Report: ❌
Base Coverage: 81.26%
Current Coverage: 81.24%

@mjac0bs
Copy link
Contributor Author

mjac0bs commented Feb 15, 2024

Thanks @jaalah-akamai - I'd forgotten about the env var.

@carrillo-erik - we have a section on Adobe Analytics in our developer docs, in case that is helpful in the future.

Merged in develop to address the merge conflict in analytics.ts - merging this now.

@mjac0bs mjac0bs merged commit 9bdf50f into linode:develop Feb 15, 2024
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Analytics Relating to Analytics migration project or Adobe Analytics Approved Multiple approvals and ready to merge! Parent / Child Account
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants