Your cart is currently empty!
Script to Get Users System or Browser Data When Link Open Grab Using PHP & JavaScript
In this tutorial, we’ll walk you through the process of capturing client-side data when someone opens a link on your website. We’ll use JavaScript for client-side data gathering and PHP for server-side processing. This Script works like Grabifywebsite script By the end of this tutorial, you’ll be able to collect information such as IP address, referring URL, operating system, and more.
Prerequisites
Before we begin, make sure you have the following in place:
- A web server with PHP support.
- A basic understanding of JavaScript and PHP.
Step 1: Create an HTML File
Let’s start by creating an HTML file where we’ll place the link that users will click to trigger the data capture.
<!DOCTYPE html> <html> <head> <title>Client Data Capture</title> </head> <body> <a href="#" id="captureLink">Open Link</a> <script> // JavaScript code will go here </script> </body> </html>
In this code, we’ve created a simple HTML page with a link having the ID captureLink
. Clicking this link will initiate the data capture process.
Step 2: Add JavaScript for Data Capture
Next, we need to add JavaScript code to gather the client-side data. Here’s the updated JavaScript section within the HTML file:
<script> document.getElementById("captureLink").addEventListener("click", function(e) { e.preventDefault(); // Gather information using JavaScript const dateTime = new Date().toLocaleString(); const ipAddress = window.location.host; // Note: This won't provide the client's IP address directly. const userAgent = navigator.userAgent; const referringURL = document.referrer; const platform = navigator.platform; const operatingSystem = navigator.appVersion; const gpu = 'Your GPU information'; // You may need to find a way to get this information via a third-party library or API. const screenSize = `${window.screen.width} x ${window.screen.height}`; const device = 'Your device information'; // You may need to find a way to get this information via a third-party library or API. // Create an object to store the data const data = { dateTime, ipAddress, userAgent, referringURL, platform, operatingSystem, gpu, screenSize, device, }; // Send the data to a server-side script using AJAX const xhr = new XMLHttpRequest(); xhr.open("POST", "capture.php", true); xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log("Data sent successfully!"); } }; xhr.send(JSON.stringify(data)); }); </script>
In this JavaScript code, we’ve added functionality to gather various client-side data, including the date and time, IP address (note: this might not give the actual client IP), user agent, referring URL, platform, operating system, GPU (if available), screen size, and device information.
Step 3: Create the PHP Script
Now, let’s create the PHP script (capture.php) that will receive and process the data sent by the JavaScript code.
<?php // Capture information received from the client $data = json_decode(file_get_contents('php://input'), true); // Store the captured information in a database or log it to a file // For this example, we will just append it to a log file $logFile = 'capture.log'; file_put_contents($logFile, json_encode($data) . PHP_EOL, FILE_APPEND); // Respond with a success message http_response_code(200); ?>
In this PHP script, we receive the JSON data sent by the JavaScript code, store it in a log file (you can adapt this to store in a database or perform any other processing as needed), and respond with a success message.
Step 4: Testing
To test this setup, open the HTML file in a web browser. Clicking the “Open Link” will trigger the JavaScript code, which will capture client-side data and send it to the server-side PHP script.
Download and View Full Code on GitHub
Conclusion
In this tutorial, you’ve learned how to capture client-side data when someone opens a link on your website. This data can be valuable for analytics and tracking user behavior. Keep in mind that capturing some information, such as the client’s real IP address, may require additional server-side configurations due to security measures. Additionally, gathering GPU and device information might involve third-party libraries or APIs.
Comments
Grabber Pro
Original price was: $ 59.00.$ 39.00Current price is: $ 39.00.Insertcart Custom WooCommerce Checkbox Ultimate
Original price was: $ 39.00.$ 19.00Current price is: $ 19.00.Android App for Your Website
Original price was: $ 49.00.$ 35.00Current price is: $ 35.00.Abnomize Pro
Original price was: $ 30.00.$ 24.00Current price is: $ 24.00.Medical Portfolio Pro
Original price was: $ 31.00.$ 24.00Current price is: $ 24.00.
Latest Posts
- How to Use AWS SES Email from Localhost or Website: Complete Configuration in PHP
- How to Upload Images and PDFs in Android Apps Using Retrofit
- [Fix] File Permission Issue in Apache Website WordPress Not Writable to 775
- Best PHP ini Settings for WordPress & WooCommerce: Official Recommendations
- Script to Get Users System or Browser Data When Link Open Grab Using PHP & JavaScript
Leave a Reply