Challenge Overview
Trixel Challenge series
The Trixel challenge series will be a multi-part series of challenges that will eventually produce an application for tracking a users internet usage across a set of sites where trixel components exist. There are several different pieces of this application that will be developed in parallel then combined in future challenges.
Overview:
In this challenge we want to build two scripts. One (trixel.js) that will be loaded in several webpages for tracking a user's history when visiting those pages. trixel.js will interact with a sister script in an iframe on the current page. The iframe script (trixel-iframe.js) will listen for calls from trixels.js and update a cookie with page view information as well as processing the data and reporting it on when a user is identified. The purpose being to track the users usage pattern and save it in a cookie for the iframe domain. This data will be reported to a logging API when we have an event that identifies the user.
Scope:
- You should write a javascript file to be embedded in webpages. The name of this file should be trixel.js. The functions of trixel.js are described in the requirements.
- You should write a javascript file to be embedded in an iframe. The name of this file should be trixel-iframe.js. The functions of trixel-iframe.js are described in the requirements.
- You should include a build script for minifying trixel.js and trixel-iframe.js.
- Document all of you code. Ensure that whatever minification tool you use removes all comments and uglifies the code.
Requirements trixel.js:
- The script should include:
- onload event handler that will do the following:
- Get the current url
- Fire a postMessage event to a iframe element with the id 'trixel-iframe'. The message should be a json object with the following structure:
Current Page message
{
"URL": "https://thesite.url"
}
Requirements trixel-iframe.js:
- The iframe script should include:
- A postMessage handler that will accept posted message and save the data about the current site, and information about the current user to a cookie called trixel. The information about the current visit should have the following structure:
Visits object
{
"userId": "IfAUserIdIsKnownItGoesHere",
"cookieId": "uniqueCookieId",
“url”: “http://whatdomain.com”,
"viewed_at": "DateSiteWasVisited"
}
- An event handler for when the current user has authenticated. The handler message will include the user id for the current user. This handler will take that user id and update the trixel cookie to indicate that the user has been identified. The cookie should be a stringified json object the has two fields:
Trixel Cookie Structure
{
"user": "userIdIfItHasBeenDetected",
"visits": [ Object, Object, Object ]
}
Where the Objects in the visits array are objects that were saved when the browser visited sites with the trixel scripts embedded. For this challenge the handler only needs to console.log the cookie value. The actual call to the log api service will be added in a later challenge.
SETUP & REFERENCE:
- Request access to the Gitlab group by posting on the forums or email gbockus.
- Once added to the team, fork the repository and work off this branch.
- The uncompressed trixel.js and trixel-iframe.js scripts go in the src directory.
- The minified versions go in the dist directory.
- An example of the scripts interacting should be created and put in the example directory.
- postMessage reference: https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Questions
- Please post any questions or concerns you have to the forum. They will be addressed in a timely manner.
Final Submission Guidelines
SUBMISSION:
- Upload documentation for how to run your submission
- Upload all your source code as a zip
- Add lazybaer and gbockus as members of your forked repository
- Provide a video overview of your submission. Please describe what you did in the video.
- Winner will be required to submit a merge request on gitlab against the branch specified!