Merge pull request #5877 from woocommerce/issue/5798-Hub-Menu-Tracking-Events

Implemented tracking events for the Hub Menu

Author: pmusolino

WooCommerce/Classes/Analytics/WooAnalyticsStat.swift

@@ -550,6 +550,14 @@ public enum WooAnalyticsStat: String {
     case jetpackInstallFailed = "jetpack_install_failed"
     case jetpackInstallInWPAdminButtonTapped = "jetpack_install_in_wpadmin_button_tapped"
     case jetpackInstallContactSupportButtonTapped = "jetpack_install_contact_support_button_tapped"
+
+    // MARK: Hub Menu
+    //
+    case hubMenuTabSelected = "hub_menu_tab_selected"
+    case hubMenuTabReselected = "hub_menu_tab_reselected"
+    case hubMenuSwitchStoreTapped = "hub_menu_switch_store_tapped"
+    case hubMenuOptionTapped = "hub_menu_option_tapped"
+    case hubMenuSettingsTapped = "hub_menu_settings_tapped"
 }
 
 public extension WooAnalyticsStat {

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenu.swift

@@ -30,21 +30,22 @@ struct HubMenu: View {
 
                 LazyVGrid(columns: gridItemLayout, spacing: Constants.itemSpacing) {
                     ForEach(viewModel.menuElements, id: \.self) { menu in
-                        HubMenuElement(image: menu.icon, text: menu.title)
-                            .frame(width: Constants.itemSize, height: Constants.itemSize)
-                            .contentShape(Rectangle())
-                            .onTapGesture {
-                                switch menu {
-                                case .woocommerceAdmin:
-                                    showingWooCommerceAdmin = true
-                                case .viewStore:
-                                    showingViewStore = true
-                                case .reviews:
-                                    showingReviews = true
-                                case .coupons:
-                                    showingCoupons = true
-                                }
+                        HubMenuElement(image: menu.icon, text: menu.title, onTapGesture: {
+                            switch menu {
+                            case .woocommerceAdmin:
+                                ServiceLocator.analytics.track(.hubMenuOptionTapped, withProperties: [Constants.option: "admin_menu"])
+                                showingWooCommerceAdmin = true
+                            case .viewStore:
+                                ServiceLocator.analytics.track(.hubMenuOptionTapped, withProperties: [Constants.option: "view_store"])
+                                showingViewStore = true
+                            case .reviews:
+                                ServiceLocator.analytics.track(.hubMenuOptionTapped, withProperties: [Constants.option: "reviews"])
+                                showingReviews = true
+                            case .coupons:
+                                ServiceLocator.analytics.track(.hubMenuOptionTapped, withProperties: [Constants.option: "coupons"])
+                                showingCoupons = true
                             }
+                        })
                     }
                     .background(Color(.listForeground))
                     .cornerRadius(Constants.cornerRadius)
@@ -129,6 +130,7 @@ struct HubMenu: View {
                         }
                     }
                     .onTapGesture {
+                        ServiceLocator.analytics.track(.hubMenuSettingsTapped)
                         showSettings = true
                     }
                     Spacer()
@@ -152,6 +154,7 @@ struct HubMenu: View {
         static let padding: CGFloat = 16
         static let topBarSpacing: CGFloat = 2
         static let avatarSize: CGFloat = 40
+        static let option = "option"
     }
 
     private enum Localization {

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuElement.swift

@@ -5,38 +5,44 @@ import SwiftUI
 struct HubMenuElement: View {
     let image: UIImage
     let text: String
+    let onTapGesture: (() -> Void)
 
     @ScaledMetric var imageSize: CGFloat = 58
     @ScaledMetric var iconSize: CGFloat = 34
 
     var body: some View {
-        VStack {
-            ZStack {
-                Color(UIColor(light: .listBackground,
-                              dark: .secondaryButtonBackground))
-                Image(uiImage: image)
-                    .resizable()
-                    .scaledToFit()
-                    .frame(width: iconSize, height: iconSize)
+        Button {
+            onTapGesture()
+        } label: {
+            VStack {
+                ZStack {
+                    Color(UIColor(light: .listBackground,
+                                  dark: .secondaryButtonBackground))
+                    Image(uiImage: image)
+                        .resizable()
+                        .scaledToFit()
+                        .frame(width: iconSize, height: iconSize)
+                }
+                .frame(width: imageSize, height: imageSize, alignment: .center)
+                .cornerRadius(imageSize/2)
+                .padding(.bottom, Constants.paddingBetweenElements)
+                Text(text)
+                    .bodyStyle()
             }
-            .frame(width: imageSize, height: imageSize, alignment: .center)
-            .cornerRadius(imageSize/2)
-            .padding(.bottom, Constants.paddingBetweenElements)
-            Text(text)
-                .bodyStyle()
+            .frame(width: Constants.itemSize, height: Constants.itemSize)
         }
     }
 
     enum Constants {
         static let paddingBetweenElements: CGFloat = 8
+        static let itemSize: CGFloat = 160
     }
 }
 
 struct HubMenuElement_Previews: PreviewProvider {
     static var previews: some View {
-
         HubMenuElement(image: .starOutlineImage(),
-                       text: "Menu")
+                       text: "Menu", onTapGesture: { })
             .previewLayout(.fixed(width: 160, height: 160))
             .previewDisplayName("Hub Menu Element")
     }

WooCommerce/Classes/ViewRelated/Hub Menu/HubMenuViewModel.swift

@@ -62,7 +62,7 @@ final class HubMenuViewModel: ObservableObject {
     /// Present the `StorePickerViewController` using the `StorePickerCoordinator`, passing the navigation controller from the entry point.
     ///
     func presentSwitchStore() {
-        //TODO-5509: add analytics events
+        ServiceLocator.analytics.track(.hubMenuSwitchStoreTapped)
         if let navigationController = navigationController {
             storePickerCoordinator = StorePickerCoordinator(navigationController, config: .switchingStores)
             storePickerCoordinator?.start()

WooCommerce/Classes/ViewRelated/MainTabBarController.swift

@@ -226,7 +226,7 @@ private extension MainTabBarController {
         case .reviews:
             ServiceLocator.analytics.track(.notificationsSelected)
         case .hubMenu:
-            //TODO-5509: implement tracking
+            ServiceLocator.analytics.track(.hubMenuTabSelected)
             break
         }
     }
@@ -244,7 +244,7 @@ private extension MainTabBarController {
         case .reviews:
             ServiceLocator.analytics.track(.notificationsReselected)
         case .hubMenu:
-            //TODO-5509: implement tracking
+            ServiceLocator.analytics.track(.hubMenuTabReselected)
             break
         }
     }