Add tracking to the WebKitViewController

[emilylaguna]

Project: #17503

Description

This adds tracking to the following actions on the WebKitViewController:

• Displayed
• Dismissed
• Open in Safari button tapped
• Reload tapped
• Navigated back
• Navigated forward
• Share button tapped

Each of these events also include a source property that is loaded when the WebKitViewController is created. I also updated the WebViewControllerFactory methods to include and pass the source along.

This change required me to update every instance that uses the factory or WebKitViewController to include a source.

To test:

There are a lot of areas this affects so these testing steps will be grouped by section:

WebKitView Testing (Steps to be performed when a webkit view is open)

1. When the webkit view is opened 🔵 Tracked: webkitview_displayed <source: SOURCE_NAME>
2. When the Share button is tapped: 🔵 Tracked: webkitview_share_tapped <source: SOURCE_NAME>
3. When the reload button is tapped: 🔵 Tracked: webkitview_reload_tapped <source: SOURCE_NAME>
4. When the back button is tapped: 🔵 Tracked: webkitview_navigated_back <source: SOURCE_NAME>
5. When the forward button is tapped: 🔵 Tracked: webkitview_navigated_forward <source: SOURCE_NAME>
6. When the open in safari button is tapped: 🔵 Tracked: webkitview_open_in_safari_tapped <source: SOURCE_NAME>

My Site

1. Launch the app
2. Tap on the My Site tab
3. Tap on your blog url in the header
4. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of my_site_view_site
5. Tap the device button in the bottom right corner and change the device
6. Verify you see 🔵 Tracked: preview_webkitview_device_changed <option: SELECTED_OPTION_NAME, source: my_site_view_site>
7. Go back to the My Site tab
8. Scroll down to the 'External' item
9. Tap the 'View Site' option
10. Verify you see 🔵 Tracked: preview_webkitview_device_changed <option: SELECTED_OPTION_NAME, source: my_site_view_site>

Me Settings

1. Tap on your profile icon in the top right of the screen
2. Tap the App Settings item
3. Tap on the Privacy Settings item
4. Tap on each of the links in the Collect Information section and verify you see the WebKitView testing steps from above with the SOURCE_NAME of privacy_settings
5. Tap back to the initial view
6. Tap on the 'About WordPress' item
7. Tap on the Twitter item, Verify you see the WebKitView testing steps from above with the SOURCE_NAME of about
8. Tap on the Blog item and repeat the steps
9. Tap on the Legal and More item
10. Tap each of the links and verify you see the events with the source name of about
11. Tap the Automattic Family item, repeat the steps above
12. Tap the Work with Us item, repeat the steps above

My Site: Stats

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Stats item
4. On the Insights tab, in the latest post summary tap the name of the post, and verify you see the WebKitView testing steps from above with the SOURCE_NAME of site_stats_insights
5. Tap on the Years tab
6. Locate the 'Posts and pages' section
7. Tap on the first item
8. Tap on the name of the post under 'Showing stats for'
9. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of stats_post_stats
10. Tap back
11. Tap on a referrer such as WordPress Reader or Facebook
12. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of site_stats_period
13. Under the Clicks section tap on any link
14. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of site_stats_period
15. Under the Published section
16. Tap the 'View more' item
17. Tap on any item in the list
18. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of site_stats_detail

My Site: Jetpack Settings

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Jetpack Settings item, if this is missing, switch to a site that is connected via Jetpack
4. Tap the 'Learn More' item at the bottom of the view
5. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of jetpack_settings_learn_more

My Site: Posts

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Posts item
4. Tap on the 'View' button
5. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of posts_pages_view_post
6. Tap on the post to enter the editor
7. Tap the ... button in the top right corner
8. Tap the 'Preview' item
9. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of edit_post_more_preview

My Site: Pages

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Pages item
4. Tap on the ... button on a page
5. Tap the 'View' item
6. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of posts_pages_view_post

My Site: Comments

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Comments item
4. Locate a comment where the user has a Web Address set
5. Tap on the comment, and tap on the web address button
6. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of comment_detail

My Site: Themes

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Themes item
4. Tap on a theme image
5. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of theme_browser
6. Tap on the ... button
7. Tap on View, repeat the webkit testing steps
8. Tap on Try & Customized, repeat the webkit testing steps
9. Tap on Details, repeat the webkit testing steps
10. Tap on Support, repeat the webkit testing steps
11. Close the menu
12. Tap on Customize button at the top of the view, repeat the webkit testing steps
13. Tap on Details button at the top of the view, repeat the webkit testing steps
14. Tap on Support button at the top of the view, repeat the webkit testing steps

My Site: People

1. Launch the app
2. Tap on the My Site tab
3. Tap on the People item
4. Tap the + button
5. Tap the 'Learn more about roles' item
6. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of invite_person_role_learn_more

My Site: Site Settings

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Site Settings item
4. Locate the 'Traffic' section, if you don't have this switch to a simple site
5. Tap the link below the 'AMP' option
6. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of site_settings_amp_footer
7. Tap the 'Start Over' item
8. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of site_settings_start_over

My Site: Plugins

1. Launch the app
2. Tap on the My Site tab
3. Tap on the Plugins item, if you don't see this switch to an atomic site
4. Tap on an item in the featured section
5. Tap on the author name,
6. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of plugins
7. Tap on a link in the plugin description
8. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of plugins

Reader: Post Card

1. Launch the app
2. Tap on the Reader tab
3. Tap on the Following tab
4. Tap on the ⠇ button to view the more menu
5. Tap on the 'Visit' item
6. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of reader_visit_site
7. Tap on the 'Discover' tap
8. Tap on the ⠇ button again to view the more menu
9. Tap on the 'Report this post' item
10. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of reader_report

Reader: Reader Detail

1. Launch the app
2. Tap on the Reader tab
3. Tap on the any Reader card
4. Tap on the Globe icon in the top corner of the view
5. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of reader_detail
6. Locate a link in the reader post content, tap on it
7. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of reader_detail
8. Tap on the ⠇ to view the more menu
9. Tap on the Visit button
10. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of reader_visit_site

Reader: Reader Comments

1. Launch the app
2. Tap on the Reader tab
3. Tap on the any Reader card with comments
4. Tap on the Authors name
5. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of reader_comments_author
6. Locate a comment with a link
7. Tap on the link
8. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of reader_comments

Notifications: Likes / Follows / Comments

1. Launch the app
2. Tap on the Notifications
3. Tap on the Likes tab
4. Tap on any item
5. Tap on the name of a person who liked your post
6. Tap on the 'Site' item
7. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of notif_like_list_user_profile
8. Tap back, then tap on the Follows tab
9. Tap on an item
10. Tap on a user who has a non-WP.com site set
11. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of notifications
12. Tap back, and tap on the Comments tab
13. Tap any post with a link
14. Tap on the link
15. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of notifications

Notification Details link

1. Launch the app
2. Tap on the Notifications
3. Locate a notification that has links such as 'Action required: Payment needed', 'WooCommerce new order', Jetpack scan risk found
4. Tap on the link
5. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of notifications

Story: Intro View

1. Launch the app
2. Tap on the My Site tab
3. Tap the floating action button in the bottom corner of the view
4. Tap 'Story Post'
5. Verify you see the Intro post, if not you can reset UserDefaults.standard.storiesIntroWasAcknowledged or reinstall the app
6. Tap on the preview image of a story
7. Verify you see the WebKitView testing steps from above with the SOURCE_NAME of show_story_example

Regression Notes

1. Potential unintended areas of impact

2. What I did to test those areas of impact (or what existing automated tests I relied on)

3. What automated tests I added (or what prevented me from doing so)

PR submission checklist:

• I have completed the Regression Notes.
• I have considered adding unit tests for my changes.
• I have considered adding accessibility improvements for my changes.
• I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

[peril-wordpress-mobile]

You can trigger an installable build for these changes by visiting CircleCI here.

[peril-wordpress-mobile]

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

[frosty]

Testing was all good! 👍
The only one potential issue I saw was that the dismiss event isn't tracked if you swipe down to dismiss the webview rather than closing it with the X.

✅ When the webkit view is opened 🔵 Tracked: webkitview_displayed <source: SOURCE_NAME>
✅ When the Share button is tapped: 🔵 Tracked: webkitview_share_tapped <source: SOURCE_NAME>
✅ When the reload button is tapped: 🔵 Tracked: webkitview_reload_tapped <source: SOURCE_NAME>
✅ When the back button is tapped: 🔵 Tracked: webkitview_navigated_back <source: SOURCE_NAME>
✅ When the forward button is tapped: 🔵 Tracked: webkitview_navigated_forward <source: SOURCE_NAME>
✅ When the open in safari button is tapped: 🔵 Tracked: webkitview_open_in_safari_tapped <source: SOURCE_NAME>

✅ My Site
✅ Me Settings
✅ My Site: Stats
✅ My Site: Jetpack Settings
✅ My Site: Posts
✅ My Site: Pages
✅ My Site: Comments
✅ My Site: Themes
✅ My Site: People
✅ My Site: Site Settings
✅ My Site: Plugins
✅ Reader: Post Card
✅ Reader: Reader Detail
✅ Reader: Reader Comments
✅ Notifications: Likes / Follows / Comments
✅ Notification Details link
✅ Story: Intro View

[emilylaguna]

Thank you for testing all of those scenarios! I know there are a lot of them.

Testing was all good! 👍 The only one potential issue I saw was that the dismiss event isn't tracked if you swipe down to dismiss the webview rather than closing it with the X.

Good catch! I moved the logic into viewWillDisappear instead of the close action now: 3cc23e5