PHP Classes

PHP Tracking User Activity: Track user activity on Web pages using screenshots

Recommend this page to a friend!
  Info   View files Example   View files View files (7)   DownloadInstall with Composer Download .zip   Reputation   Support forum (3)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStarStar 74%Total: 1,240 All time: 3,082 This week: 91Up
Version License PHP version Categories
track-user-activity 1.1Freeware5PHP 5, Graphics, Debug, User Management, A...
Collaborate with this project 

Author

Description

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.

Innovation Award
PHP Programming Innovation award nominee
May 2016
Number 2


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.

Manuel Lemos
Picture of Bharat Parmar
  Performance   Level  
Name: Bharat Parmar <contact>
Classes: 11 packages by
Country: India India
Age: 33
All time rank: 52031 in India India
Week rank: 312 Up22 in India India Up
Innovation award
Innovation award
Nominee: 3x

Example

<!DOCTYPE html>
<html>
    <head>
        <title>Track User Activity : Bharat Parmar</title>
        <script src="js/jquery.min.js"></script>
    </head>
<body>

<h4>Example : Track User' Following Activity Screenshot</h4>
<ol>
    <li>Form Submit</li>
    <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>
</ol>
<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>
<hr>
    <form method="post" enctype="multipar/form-data">
        <h3>Contact Us</h3>
        <table width="50%">
            <tr>
                <th>Full Name</th>
                <td><input type="text" name="full_name"></td>
            </tr>
            <tr>
                <th>Address</th>
                <td><textarea name="address"></textarea></td>
            </tr>
            <tr>
                <th>City</th>
                <td><input type="text" name="city"></td>
            </tr>
            <tr>
                <th>Contact Number</th>
                <td><input type="text" name="contact_number"></td>
            </tr>
            <tr>
                <th>Email</th>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <th>Message</th>
                <td><textarea name="message" cols="50" rows="10"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="submit" value="Send Message">
                    <input type="reset" name="cancel" value="Cancel">
                </td>
            </tr>
        </table>
    </form>

    <!-- BEGIN CODE FOR USER ACTIVITY LOG -->
        <div style="display:none;"></div><canvas id="image-canvas" style="display:none;"></canvas></div>
        <script type="text/javascript" src="js/html2canvas/html2canvas.js"></script>
        <script type="text/javascript" src="js/html2canvas/jquery.plugin.html2canvas.js"></script>
        <script type="text/javascript" src="js/trackuser.jquery.js"></script>
    <!-- END CODE FOR USER ACTIVITY LOG -->
</body>
</html>



Details

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 :

Bharat Parmar

Version :

1.0

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 Click
  • On Print
  • On Right Click

Requirements :

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.


  Files folder image Files  
File Role Description
Files folder imageajax (1 file)
Files folder imagejs (2 files, 1 directory)
Accessible without login Plain text file example.php Example Auxiliary script
Accessible without login Plain text file README.md Doc. Documentation

  Files folder image Files  /  ajax  
File Role Description
  Plain text file trackuser.php Class Class source

  Files folder image Files  /  js  
File Role Description
Files folder imagehtml2canvas (2 files)
  Accessible without login Plain text file jquery.min.js Data Auxiliary data
  Accessible without login Plain text file trackuser.jquery.js Data Auxiliary data

  Files folder image Files  /  js  /  html2canvas  
File Role Description
  Accessible without login Plain text file html2canvas.js Data Auxiliary data
  Accessible without login Plain text file jquery.plugin.html2canvas.js Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%
Total:1,240
This week:0
All time:3,082
This week:91Up
 User Ratings  
 
 All time
Utility:96%StarStarStarStarStar
Consistency:89%StarStarStarStarStar
Documentation:89%StarStarStarStarStar
Examples:85%StarStarStarStarStar
Tests:-
Videos:-
Overall:74%StarStarStarStar
Rank:93