We need a javacript-experienced developer for the following application:
The javascrip application dynamically collects contact information that was submitted in certain forms at specific pages of a website. It will display notification cads at specific pages, showing the data that was collected. Certain URLs will be identified as Data Input URLs (collecting data) while others will be Display URLs (displaying notification cards).
The application's system allows
- The creation and setup of campaigns. Each campaign has specific URLs to draw information of and URLs to display information.
- The system will collect data from certain web pages' visitors. The data which will be collected depends on the setup of each campaign.
There 3 kinds of cards, that will define the type od collected data:
- Conversion Card: collects data that was submitted via forms; collects the time in which the form was submitted;
- Access Card: collects data to display the number of people seeing a page, in real time;
- Time Card: collects the same data as the conversion card, but doesn't display it's information individually. Instead shows the number of people who submitted a certain form in a determined time window (I.E: 123 users have filled this form in the last 24 hours);
The application will identify, at specific URLs, the user acoount's ID, search its campaigns and check if this URL is set as Data Input or Display. In case it is, the application will run, collecting data or displaying notification cards.
It is REALLY IMPORTANT for the application to be safe, to avoid data leaks and account cracking (since the service will have paid subscriptions).
Data Input Pages:
Each time a visitor enters a page with an URL set as Display URL, the application must check the cards settings within the campaigns and display the notification cards.
It must also track card clicks.
Using a dynamic system (setTimeouts), it must check if there are new cards to be displayed, without repeating cards for the same visitor.
Each card must collect the client's browser IP, browser type (Chrome, Firefox, Opera, Edge, etc), device type, date and time of visit/action/form submit for Data Input and Display.
A few notes
Same-origin policy / CORS: in order to develop the application, for safe server requests, accepting only requests from a specific domain. Develop the application considering the safety of headers and server requests.
The system must be ready for different languages. It must detect the user's browser language and display cards in that language, or display cards according to the cards settings.
The system must detect the user (visitor) device type.
Use a library (XMLHttpRequest) to send and receive server information.
The application must be compatible with most internet browsers.
Some card samples are attached.