Dynamic JavaScript Event Tracker Creation
Budget: $30 – $250 USD
I am looking for an expert JavaScript developer who can build and implement a dynamic event tracker for my website.
The event tracker should be able to handle the following types of events:
- Click events
- Scroll events
- Hover events
- Page opens
These events should be triggered based on the following actions:
- Element clicks
- Page scrolls
- Element hovers
- Upon page load
The main functionality of the events is to fire a JS tracking event to an Analytics platform such as Mixpanel and Amplitude.
The ideal candidate for this project will be proficient in JavaScript programming, with a solid understanding of website analytics and experience in the integration of analytics platforms like Mixpanel and Amplitude. Familiarity with implementing dynamic event tracking is a definite plus.
In your proposal, please showcase previous JavaScript projects where you successfully integrated event tracking. I look forward to seeing your bids.
Here's a high level PRD:
Title: Dynamic JavaScript Event Implementer for Websites
1. Purpose and Scope
Objective: Develop a system that allows website administrators to dynamically define JavaScript events on web elements, which are then executed by all users visiting the website, regardless of whether they have the Chrome extension installed.
Components:
Chrome Extension: For administrators to define and send JavaScript event triggers and associated actions to a server.
Server: To store and manage JavaScript actions.
Client-Side Script: For integration into the target website, fetching and applying JavaScript actions.
2. Target Users
Administrators/Developers: Users who will use the Chrome extension to define JavaScript events.
End Users: Visitors of the website who will experience the effects of these JavaScript events.
3. Features and Functionality
3.1 Chrome Extension
Editing Mode: A mode where administrators can click on elements of a webpage and define JavaScript events.
Event Association: Capability to associate custom JavaScript code with selected DOM elements.
Server Communication: Send defined event-action pairs to the server for storage.
3.2 Server
API Endpoints: For receiving event-action pairs from the extension and serving them to the client-side script.
Database: To store and manage event-action pairs with appropriate security measures.
3.3 Client-Side Script
Dynamic Script Execution: Fetches event-action data from the server and applies it to the webpage in real-time for all users.
Compatibility and Performance: Ensures minimal impact on website performance and broad compatibility with different browsers.
4. User Interface
Chrome Extension UI: Intuitive interface for selecting webpage elements and entering JavaScript code.
Admin Panel (Optional): Web interface for viewing and managing defined events and actions.
5. Security
Code Validation: Ensure all JavaScript entered through the extension is validated to prevent XSS attacks.
Server Security: Robust security measures to protect the database and API from unauthorized access and data breaches.
6. Performance Requirements
Minimal Latency: Ensure the client-side script fetches and executes JavaScript with minimal delay.
Low Overhead: Ensure the extension and script do not significantly affect webpage loading times.
7. Constraints and Limitations
Browser Compatibility: The extension should be compatible with the latest version of Chrome.
Website Integration: The client-side script should be lightweight and easily integrable with existing websites without major changes.
8. Testing and Quality Assurance
Extension Testing: Test the extension for functionality, usability, and security.
Server Testing: Ensure robustness and reliability of the server and API.
End-to-End Testing: Simulate real-world usage scenarios to test the entire system.
The event tracker should be able to handle the following types of events:
- Click events
- Scroll events
- Hover events
- Page opens
These events should be triggered based on the following actions:
- Element clicks
- Page scrolls
- Element hovers
- Upon page load
The main functionality of the events is to fire a JS tracking event to an Analytics platform such as Mixpanel and Amplitude.
The ideal candidate for this project will be proficient in JavaScript programming, with a solid understanding of website analytics and experience in the integration of analytics platforms like Mixpanel and Amplitude. Familiarity with implementing dynamic event tracking is a definite plus.
In your proposal, please showcase previous JavaScript projects where you successfully integrated event tracking. I look forward to seeing your bids.
Here's a high level PRD:
Title: Dynamic JavaScript Event Implementer for Websites
1. Purpose and Scope
Objective: Develop a system that allows website administrators to dynamically define JavaScript events on web elements, which are then executed by all users visiting the website, regardless of whether they have the Chrome extension installed.
Components:
Chrome Extension: For administrators to define and send JavaScript event triggers and associated actions to a server.
Server: To store and manage JavaScript actions.
Client-Side Script: For integration into the target website, fetching and applying JavaScript actions.
2. Target Users
Administrators/Developers: Users who will use the Chrome extension to define JavaScript events.
End Users: Visitors of the website who will experience the effects of these JavaScript events.
3. Features and Functionality
3.1 Chrome Extension
Editing Mode: A mode where administrators can click on elements of a webpage and define JavaScript events.
Event Association: Capability to associate custom JavaScript code with selected DOM elements.
Server Communication: Send defined event-action pairs to the server for storage.
3.2 Server
API Endpoints: For receiving event-action pairs from the extension and serving them to the client-side script.
Database: To store and manage event-action pairs with appropriate security measures.
3.3 Client-Side Script
Dynamic Script Execution: Fetches event-action data from the server and applies it to the webpage in real-time for all users.
Compatibility and Performance: Ensures minimal impact on website performance and broad compatibility with different browsers.
4. User Interface
Chrome Extension UI: Intuitive interface for selecting webpage elements and entering JavaScript code.
Admin Panel (Optional): Web interface for viewing and managing defined events and actions.
5. Security
Code Validation: Ensure all JavaScript entered through the extension is validated to prevent XSS attacks.
Server Security: Robust security measures to protect the database and API from unauthorized access and data breaches.
6. Performance Requirements
Minimal Latency: Ensure the client-side script fetches and executes JavaScript with minimal delay.
Low Overhead: Ensure the extension and script do not significantly affect webpage loading times.
7. Constraints and Limitations
Browser Compatibility: The extension should be compatible with the latest version of Chrome.
Website Integration: The client-side script should be lightweight and easily integrable with existing websites without major changes.
8. Testing and Quality Assurance
Extension Testing: Test the extension for functionality, usability, and security.
Server Testing: Ensure robustness and reliability of the server and API.
End-to-End Testing: Simulate real-world usage scenarios to test the entire system.