{"id":19315382,"url":"https://github.com/thatisuday/jquery-page-reaction","last_synced_at":"2026-05-18T05:41:12.230Z","repository":{"id":58235024,"uuid":"80500492","full_name":"thatisuday/jquery-page-reaction","owner":"thatisuday","description":"a jQuery plugin to report user page interactions with web-ui using web-sockets","archived":false,"fork":false,"pushed_at":"2017-02-03T07:24:57.000Z","size":20,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-10T16:48:46.595Z","etag":null,"topics":["jquery","websocket"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thatisuday.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-31T07:41:10.000Z","updated_at":"2018-06-20T14:30:11.000Z","dependencies_parsed_at":"2022-08-31T09:21:56.866Z","dependency_job_id":null,"html_url":"https://github.com/thatisuday/jquery-page-reaction","commit_stats":null,"previous_names":["thatisuday/page-reaction"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fjquery-page-reaction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fjquery-page-reaction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fjquery-page-reaction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thatisuday%2Fjquery-page-reaction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thatisuday","download_url":"https://codeload.github.com/thatisuday/jquery-page-reaction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240416999,"owners_count":19797922,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jquery","websocket"],"created_at":"2024-11-10T01:06:42.819Z","updated_at":"2025-12-12T04:25:29.858Z","avatar_url":"https://github.com/thatisuday.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# page-reaction\nA jQuery plugin to report user page interactions with web-ui using web-sockets\n\n##[DEMO](https://rawgit.com/thatisuday/page-reaction/master/demo/index-raw.html)\n\n### install\n```\nbower install page-reaction\n```\n\n### dependencies\n```\n\u003c!-- required --\u003e\n\u003cscript src=\"./bower_components/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./bower_components/protonet/jquery.inview/jquery.inview.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./bower_components/socket.io-client/dist/socket.io.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- plugin --\u003e\n\u003cscript src=\"./bower_components/page-reaction/dist/plugin.min.js\"\u003e\u003c/script\u003e\n```\n\n### use\n```\nvar socket = io('http://127.0.0.1:3158');\nvar sessionId = 'abcd1234'; // you should get session id from cookie (or print from template engine)\n\n$(document).ready(function(){\n\t$(selector).pageReact(options);\n});\n```\n\n### options\n```\n{\n\ton : 'click',\t\t\t\t\t// default 'click' event\n\tonce : true,\t\t\t\t\t// default is true,\n\tsocket : socket, \t\t\t\t// a websocket connection (must provide)\n\tsessionId : sessionId, \t\t\t// user session id\n\tpickData : ['sku']\t\t\t\t// default empty array ([]),\n\tcallback : fn($elem, data){}\t// default null function\n}\n```\n- on =\u003e Interaction event with the element. Possible values `click` (element mouse click), `mouseenter` (when mouse is entered in the element), `inview` (when element is inside viewport), `ready` (when document is ready).\n- once =\u003e Ping interaction only once to listening socket server.\n- socket =\u003e A web socket connection (using socket.io).\n- sessionId =\u003e User session id to send along with ping payload.\n- pickData =\u003e Collect values from html data attributes to send along with ping payload.\n- callback =\u003e Invoke a callback function after ping. \n\n#### Set options globally\nYou can setup above options globally like below.\n```\n$(document).pageReactConfig({\n\tsocket : socket,\n\tsessionId : sessionId,\n\tpickData : ['productsku'],\n\tcallback : function($elem, data){\n\t\t$elem.text(data.event);\n\t}\n});\n```\n\n\u003e Any options mentioned in `$(selector).pageReact(options);` fashion will override global options.\n\n\n### Events\n```\n$(document).ready(function(){\n\t$('#box1').pageReact({\n\t\ton:'click',\n\t\tsocket:socket,\n\t\tsessionId : sessionId,\n\t\tpickData:['sku', 'color'],\n\t\tcallback : function($elem){\n\t\t\t$elem.css('color', 'yellow');\n\t\t}\n\t});\n\t\n\t$('#box2').pageReact({\n\t\ton:'mouseenter',\n\t\tsocket:socket,\n\t\tsessionId : sessionId,\n\t\tpickData:['sku']\n\t});\n\n\t$('#box3').pageReact({\n\t\ton:'inview',\n\t\tsocket:socket,\n\t\tsessionId : sessionId,\n\t\tpickData:['sku']\n\t});\n\n\t$('#box4').pageReact({\n\t\ton:'ready',\n\t\tsocket:socket,\n\t\tsessionId : sessionId\n\t});\n});\n```\n\n### Payload\nThis plugin will send payload with every single interaction which will look like below\n\n```\n// when document is ready\n{\n\tevent: 'ready',\n\tsessionId: 'RjvU1yeamoFB01kl',\n\tpickData: {}\n}\n\n// when user clicks on element\n{\n\tevent: 'click',\n\tsessionId: 'RjvU1yeamoFB01kl',\n\tpickData: {\n\t\tsku: 'abcd1234',\n\t\tcolor: 'red'\n\t}\n}\n\n// when user enters mouse cursor inside an element\n{\n\tevent: 'mouseenter',\n\tsessionId: 'RjvU1yeamoFB01kl',\n\tpickData: {\n\t\tsku: 'abcd5678'\n\t}\n}\n\n// when elements comes into view\n{\n\tevent: 'inview',\n\tsessionId: 'RjvU1yeamoFB01kl',\n\tpickData: {\n\t\tsku: 'abcd1357'\n\t}\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthatisuday%2Fjquery-page-reaction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthatisuday%2Fjquery-page-reaction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthatisuday%2Fjquery-page-reaction/lists"}