www.damionmullins.com Damion Mullins, MS, MBA

Recommender System JS Plugin

Version 1.0, developed in 2022



This JavaScript plugin recommender system combines mode, manual relationships, and degree centrality to make recommendations. Each click or touch made on a recommender enabled element will get timestamped and saved in the user's browser, using indexedDb (IDB). The data saved in IDB is then processed into scores that are totaled, and then sorted in descending order.

Please try out the below examples to see and experience the recommender in action.

Example 1: Recommending menu options

Click the menu options (i.e. green buttons) and see your recommendations appear under, "Recommended for you"

Home Chairs Tables Carpets Desks Couches Beds Lights Pillows Applicances Computers Blankets Ottomans Sales Support
Recommended for you

Example 2: Recommending items

Click the items (i.e. images) and see your recommendations appear under, "Recommended for you"

Viewing
Recommended for you
Chairs
Tables
Carpets

The basic workflow is as follows:

  1. User clicks/touches on a recommender-enabled-element
  2. Recommender checks if there is data
    • if no data, the recommender will create the datastore architecture, and then save the click
    • if there is data, the recommender will save the click/touch as a timestamped datapoint
  3. After click/touch is saved, the recommender will process the calculations
  4. The mode of each clicked/touched datapoint in IDB is calculated
    • The mode is the the item that appears most frequently
    • Each mode value is sorted from the highest to the lowest number of clicks per each item
  5. Relationships based on manually added attributes are calculated between data in IDB
    • Each recommender enabled element can have many relationships to each other which are represented by comma delimited whole numbers (i.e. data-recommenderattributes="1,3,5")
    • A relationship exists when two or more recommender-enabled-elements have at least one same attribute value (i.e. data-recommenderattributes="1" & data-recommenderattributes="1,2": each has 1 as the similar attribute).
    • This is how you can relate shoelaces to shoes, for example. Therefore, if a user clicked on shoes, then shoelaces would also be included in the recommendation.
  6. Relationships based on manually added attributes are calculated between any recommender-enabled-elements on the page
    • If there are other recommender-enabled-elements visible on the webpage, but have not been saved in IDB, the recommender will check their attributes and ascertain any relationships.
    • Therefore, if only one recommender-enabled-element was clicked/touched and saved in IDB, then its relationships to other recommender-enabled-elements will still be recommended.
  7. Degree centrality is calculated for each saved recommender-enabled-element click/touch in IDB
    • Since each item's click data is timestamped and order consecutively, relationships can be deduced as links or hops based on Social Network Analysis (SNA)
    • For example, clicking on item-1, item-2, item-1 in that order would give item-1 and item-2 two omnidirectional links. Both items would have the same degree and would be recommended equally, based on degree measures of centrality.
  8. All calculated results are added up (i.e. each mode total, total number of relationships, and total number of links)
  9. The totals are sorted in descending order, from highest to lowest
  10. The results are returned so that a developer can render them as recommendations

Installation and usage instructions:

1. Add recommender.js to any page or all pages in your web application

2. Add special datasets to the elements you want recommended:

<span data-recommenderattributes="1,2,3, ..." data-recommendertable="any name" data-recommenderid="unique to the element"> anything here </span>

3. To access the recommendations, call the following method on page load

        
            (new Recommender()).getData("data-recommendertable", yourFunction);
        
    
        
            function yourFunction(arrayFromRecommender) {
                // [id1, id2, id3, etc...] order by highest to lowest score
                const orderedArrayOfRecommendedElementIds 
                    = arrayFromRecommender[0];
                
                /**
                * Example of data in object
                * { 
                *   id1: {
                *       attributes: ['1','2', ...], recommenderattributes in element
                *       datapoints: [1640705016252, 1640705016253, ...], timestamps when element was clicked
                *       degree: 3,  nth number
                *       occurence: 1, nth number
                *       related: ['id2', 'id3'] elements with the same recommenderattributes
                *   }
                *}
                */
                const orderedObjectOfRecommendedElementData 
                    = arrayFromRecommender[1];
            }
        
    
*You can see the results and data for this page by viewing the Console under Inspect in your browser

4. To save data on click of a recommender enabled element, and then get back the newly recommended results, use the following code snippet.

        
            document.addEventListener('click', (event) => {
                if (event.target && event.target.hasAttribute("data-recommendertable")) {
	                (new Recommender()).saveAndGetData(event, yourFunction);
	            }
            });
        
    
*saveAndGetData will return the same data as in getData.

5. To delete a table of data, call the following method

        
            (new Recommender()).deleteData("data-recommendertable", yourFunction);
        
    

The below code is the recommender.js plugin:

        
         // comes from JS
        
    
Download More Projects!