Generic mobile analytics

[akiva10b]

Implementation of Generic Analytics Function in React Native App

Objectives

• Create a generic analytics function that can capture events and augment them with relevant global state information.
• Ensure consistency with web analytics by matching event names and parameter structures.
• Facilitate decision-making regarding the topics feature by understanding user interactions through analytics.
• Maintain flexibility so that the function can handle both specific and general analytics events.

Implementation

1. Modify Global State Management

Objective: Expose the current global state so that it can be accessed by the analytics function.

Steps:

• Introduce a Module-Level Variable:

  • Declare a variable currentGlobalState initialized with DEFAULT_STATE.

    let currentGlobalState = DEFAULT_STATE;

• Update currentGlobalState in Reducer:

  • In the reducer function, capture the new state in a variable newState within the switch cases.

  • After the switch statement, assign newState to currentGlobalState.

    const reducer = function (state, action) {
      // ... existing code
    
      let newState;
    
      switch (action.type) {
        // ... cases
        default:
          newState = state;
          break;
      }
    
      currentGlobalState = newState;
      return newState;
    };

• Provide a Getter Function:

  • Create a function getCurrentGlobalState() that returns currentGlobalState.

    const getCurrentGlobalState = () => currentGlobalState;

• Export the Getter Function:

  • Ensure getCurrentGlobalState is exported from the global state module.

    export {
      // ... other exports
      getCurrentGlobalState,
    };

2. Create the Generic Analytics Function

Objective: Develop a function trackEvent that captures events, augments them with global state data, and sends them to the analytics service.

Steps:

• Create Analytics.js Module:

  • This module will house the trackEvent function and handle interaction with the analytics service.

• Import Global State Getter:

  • Import getCurrentGlobalState from the global state module.

    import { getCurrentGlobalState } from './GlobalState';

• Define trackEvent Function:

  • The function accepts eventName and eventParams.

  • Retrieves the current global state using getCurrentGlobalState().

  • Augments the eventParams with additional data from the global state.

    const trackEvent = (eventName, eventParams = {}) => {
      const globalState = getCurrentGlobalState();
    
      const isLoggedIn = globalState.isLoggedIn;
      const usesOfflinePackages = globalState.offlinePackages && globalState.offlinePackages.length > 0;
    
      const augmentedParams = {
        ...eventParams,
        is_logged_in: isLoggedIn,
        user_uses_offline_packages: usesOfflinePackages,
        project_name: 'topics',
      };
    
      // Send the event using the analytics service
      analytics().logEvent(eventName, augmentedParams);
    };

• Export trackEvent:

  • Make the function available for import in other modules.

    export { trackEvent };

3. Integrate Analytics Function into Components

Objective: Use trackEvent in relevant components to capture events as per requirements.

Steps:

• Identify Key Components:

  • Components related to the topics feature:
    • Main navigation component.
    • Topics panel component.
    • Topic screen component.
  • General components where analytics are needed.

• Import trackEvent:

  • In each component, import the analytics function.

    import { trackEvent } from './Analytics';

• Capture Events with Parameters:

  • Use trackEvent when events occur, providing the event name and parameters.

  • For topics-related events, include parameters as specified.

    // Example: Handling a topic navigation click
    const handleTopicNavigationClick = () => {
      trackEvent('Main Topic Navigation Clicked', {
        book_name: currentBookName,
        selected_reference: currentReference,
        book_category: currentBookCategory,
        book_full_category_path: currentBookFullCategoryPath,
      });
    };

• Ensure Consistency with Web Analytics:

  • Match event names and parameter names with those used in web analytics.
  • Consult the web analytics documentation to ensure alignment.

4. Implement Specific Analytics Requirements for Topics Feature

Objective: Fulfill the detailed analytics requirements for the topics feature.

Steps:

• Main Topic Navigation Clicked:

  • Event Name: 'Main Topic Navigation Clicked'
  • Parameters:
    • book_name
    • selected_reference
    • book_category
    • book_full_category_path

• Topics Link Clicked in Resource Panel:

  • Event Name: 'Topics Link Clicked in Resource Panel'
  • Parameters: Same as above.

• User Clicks Through to Topic Screen:

  • Event Name: 'Topic Link Clicked in Resources Panel'
  • Parameters:
    • book_name
    • selected_reference
    • book_category
    • book_full_category_path
    • topic_name
    • topic_category

• Topic Screen Viewed:

  • Event Name: 'Topic Screen Viewed'
  • Parameters:
    • topic_name
    • topic_category
    • referrer (values: 'Reader', 'Navigation')

• User Clicks Through to Source or Sheet:

  • Event Name: 'Topic Source Clicked'
  • Parameters:
    • topic_name
    • topic_category
    • tab (values: 'Sources', 'Sheets')

• Include Global Parameters:

  • is_logged_in (from global state)
  • user_uses_offline_packages (from global state)
  • project_name: 'topics'

5. Ensure General Use Cases Are Handled

Objective: Make sure that the analytics function works for non-topics events as well.

Steps:

• Use trackEvent in Other Components:

  • Implement the function in components handling general events, such as user login, settings changes, etc.

• Parameter Flexibility:

  • Design trackEvent to accept any event name and parameters, augmenting them with global state data.

• Example Usage:

  const handleLogin = () => {
    trackEvent('User Logged In', {
      method: 'Email',
    });
  };