|Ratings|| ||Unique User Downloads|| ||Download Rankings|
| 74%||Total: 1,240 This week: 1||All time: 3,082 This week: 375|
|Collaborate with this project|| |
This class can track user activity on Web pages using screenshots.
It uses a jQuery plugin that can take a screenshot of the Web page when the user performs events like click, double click, print, copy-paste, form submit and form reset. It uses a canvas object and sends the screenshot data to the server using AJAX.
The class receives the screenshot data, decodes and saves the image to the screenshots directory. It also also logs the details of the event including the screenshot file name, time and the user IP address.
Prize: 1 year subscription to the Basic Plan of an API product of choice
|Sometimes it is necessary to understand what is going on the browser side to verify if what the user is seeing is the same as he is expected to see after certain interactions.
This class can address this need with the help of jQuery plugin that can capture screenshots of the current page after certain user interaction events like click or form submissions for instance.
The PHP class receives the screenshot images sent by AJAX and records logs of the associated activities so the developers can analyze it in the future to determine what could be wrong and fix eventual issues.
<title>Track User Activity : Bharat Parmar</title>
<h4>Example : Track User' Following Activity Screenshot</h4>
<li>Form Data Clear</li>
<li>Click on your Web Page</li>
<li>Copy Web Page Content</li>
<li>Print Web Page</li>
<li>Right Click on Web Page</li>
<p>Whenever the above events will be triggered, the screenshot of the webpage will be stored in the Screenshot Directory as well as the event log will be generated in event-log.log file in the same directory. Event Log will store data like Event Name, Screenshot Image File Name, Time and IP Address.</p>
<form method="post" enctype="multipar/form-data">
<td><input type="text" name="full_name"></td>
<td><input type="text" name="city"></td>
<td><input type="text" name="contact_number"></td>
<td><input type="email" name="email"></td>
<td><textarea name="message" cols="50" rows="10"></textarea></td>
<td colspan="2" align="center">
<input type="submit" name="submit" value="Send Message">
<input type="reset" name="cancel" value="Cancel">
<!-- BEGIN CODE FOR USER ACTIVITY LOG -->
<div style="display:none;"></div><canvas id="image-canvas" style="display:none;"></canvas></div>
<!-- END CODE FOR USER ACTIVITY LOG -->
Track User Activity Log
Track User Activity on your webpage whenever the user will click, double click, print, copy-paste, form submit and form reset.
This script will take screentshot of the webpage and add event log for the same which will store the event details, screenshot file name, time and the user's IP Address.
Developed By :
File Structure :
1) example.php : Example Script file
2) ajax/trackuser.php : Saving Screentshot image and adding event log.
3) screenshot/event-log.log : This file will store the data of the Event like Event Details, Screenshot File Name, Time and IP Address.
4) screenshot : this directory will store all the screenshots which will be taken on the below listed events.
On Form Submit
On Form Rest
On Right Click
1) PHP Version : 3.0 and above
How It Works :
1) HTML to Canvas : Script will read the HTML code of the Web Page.
2) HTML2Canvas Plugin : This plugin will generate Canvas content into the base64 data url of the image.
3) trackuser.php : Jquery send the Canvas Image Data URL to php file which will created new png image file. It will also store the event details, Time, Screenshot Image file name and IP Address.
4) "screenshot" directory should have writeable permission.
How to use :
Please check example.php.
||Applications that use this package
No pages of applications that use this class were specified.
If you know an application of this package, send a message to the author to add a link here.