firebase typescript

WebTrace Tracker is an interaction tracking tool for web applications. The Tracker is provided as a Chrome extension and is designed to remotely monitor client-side user interactions during usability testing.

The tracked data is recorded in Firebase and can be reviewed through the WebTrace Dashboard, which is designed for managing and analyzing tests.

• eventType: The type of event that occurred (e.g., "scroll down", "left click", "data input")
• hostName: The domain of the accessed website (e.g., "www.amazon.com")
• pathName: The path portion of the URL (e.g., "/s", "/dp/B007TIN0GW/ref=as_sl_pc_as_ss_li_til")
• url: The full URL address
• time: The timestamp when the event occurred
• xpath: The XPath path of the element where the event occurred
• imageUrl: The URL of the screenshot captured during the event (stored in Firebase Storage).

• x: The X coordinate of the mouse pointer when the event occurred
• y: The Y coordinate of the mouse pointer when the event occurred
• scrollDirection: The direction of the mouse scroll (e.g., "scroll down", "scroll up")
• scrollState: The state of the scroll event (e.g., "scroll start", "scrolling", "scroll end")

• keyboardInputKeyCode: The code of the pressed key (e.g., "KeyH", "Backspace")
• keyboardInputPressedKey: The pressed key (e.g., "A")
• keyboardInputState: The state of the keyboard input (e.g., "input start", "input ongoing", "input end")
• keyboardInputType: The type of keyboard input (e.g., "keydown")

• h: Screen height
• w: Screen width

• accessedAt: The date when the user performed the task (timestamp)
• browser: The browser used by the user (e.g., "Chrome")
• device: The device used by the user (e.g., "Desktop")
• durationSec: Task duration time
• isFinished: Whether the task is completed (true/false)
• os: he operating system used by the user (e.g., "Windows 10.0")

• Create a project in Firebase and obtain the SDK.

• Clone the project repository by running the following command

  git clone [https://github.com/SIT-Lab/WebTrace-Tracker]

• Create a .env file in the root directory and add the Firebase configuration settings as follows:

  REACT_APP_FIREBASE_API_KEY=Your_Firebase_API_Key
  REACT_APP_FIREBASE_AUTH_DOMAIN=Your_Firebase_Auth_Domain
  REACT_APP_FIREBASE_PROJECT_ID=Your_Firebase_Project_ID
  REACT_APP_FIREBASE_STORAGE_BUCKET=Your_Firebase_Storage_Bucket
  REACT_APP_FIREBASE_MESSAGING_SENDER_ID=Your_Firebase_Messaging_Sender_ID
  REACT_APP_FIREBASE_APP_ID=Your_Firebase_App_ID
  REACT_APP_FIREBASE_MEASUREMENT_ID=Your_Firebase_Measurement_ID

• Install the necessary dependencies by running:

   npm install

• Build the application by running the following command:

   npm run build

• Once the project is built, tester will need to distribute the necessary files to test participant.
• The key folder to distribute is the build folder, which contains all the necessary files to run the Chrome extension.

1. Make sure that the test participants receive the build folder.

2. Instruct the test participants to follow these steps to install the Chrome extension:

   • Open the Chrome browser and go to the extensions management page by typing chrome://extensions/ in the address bar.
   • Enable Developer Mode in the top right corner.
   • Click on the Load unpacked button.
   • Select the build folder that tester provided to test participant.
   • The extension will be uploaded and installed in their Chrome browser.

For further details, refer the test participants to the Google Chrome Extension Guide.

image1

This is the page where you enter the Session Code provided by the tester.

• Enter the Session Code provided by the tester into the Tracker
• After entering the Session Code correctly, click the Submit button to proceed to the next page

image2

This is the page where the personal Details of the Test participant is entered.

• Enter the user ID, age, gender, and country
• After entering the Personal Details correctly, Click the Submit button to proceed to the next page

image3

This is the page where you decide whether to start the task.

• Confirm the notification message
• Click the "Click to Start" button to begin the task.
• The Tracker begins monitoring the participant's interactions with the currently active Chrome browser tab

image4

This is the page where you decide how to end the task.

• Pause: Participants can pause the test by clicking the "Pause" button during the session. When this feature is activated, the recording of participant activities is temporarily halted until the "Resume" button is clicked.

• Finish: Participants can complete the test by clicking the "Finish" button when they successfully accomplish the given task. In this case, all collected data up to that point is sent to Firebase, and the test session ends.

• Give up: Participants can end the test by clicking the "Give up" button if they believe completing the task is impossible.

• Quit: Participants can quit the test at any time by clicking the "Quit" button, unrelated to the task itself. In this case, the collected data is considered unsuitable for analysis and is therefore discarded instead of being sent to Firebase.

This project is licensed under the Apache License 2.0. For more details, please refer to the LICENSE file.

This project includes third-party libraries that are licensed under the Apache License 2.0. For more details, please refer to the NOTICE file.

 Copyright [2024] [Division of Computer Science and Engineering,
 Jeonbuk National University SIT Lab]
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.