Silent Notes

There is a web page functionality that I use quite often. My thought is you might find it handy, too.

An action taken on a web page can cause a note to be logged in a file on the server. As examples, that action might be tapping on something or staying on the page longer than a certain length of time.

When the note-logging is triggered, JavaScript sends the note to a PHP script on the server. The script on the server records the note in a file. Everything is done silently.

That's all this system does. But it sure can come in handy.

Here is the code for the PHP script.

<?php
/*
Save Data to a File
Version 1.0
August 30, 2025
Will Bontrager Software LLC
https://www.willmaster.com/
*/
if(empty($_POST['filename']) or empty($_POST['data']) or empty($_POST['separator'])) { exit; }
if(!preg_match('/\.te?xt$/i',$_POST['filename'])) { $_POST['filename'].='.txt'; }
if(strpos($_POST['separator'],'DATETIMESTAMP')!==false) { $_POST['separator']=str_replace('DATETIMESTAMP',date('r'),$_POST['separator']); }
file_put_contents(__DIR__."/{$_POST['filename']}","{$_POST['data']}{$_POST['separator']}",FILE_APPEND);
exit;
?>

There is nothing to customize.

Name the PHP script savedata.php or other file name with a .php file name extension. Upload savedata.php into the directory on your server where the saved-data file will be updated. Make a note of the savedata.php file's URL.

The JavaScript Logging Code

Next in line for implementation is the JavaScript. This JavaScript needs to be somewhere on each page that can have an event that records a note. The code has three places to customize.

<script type="text/javascript">
function SaveOnServer(data)
{
   var script = "/littlelogs/savedata.php";
   var filename = "savedstuff.txt";
   var separator = "\r\n*** ** * Above saved at DATETIMESTAMP * ** ***\r\n";
   var http = new XMLHttpRequest();
   if(! http) { return false; }
   var params = new Array();
   params.push( "data=" + encodeURIComponent(data) );
   params.push( "filename=" + encodeURIComponent(filename) );
   params.push( "separator=" + encodeURIComponent(separator) );
   http.open("POST",script,true);
   http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   http.send(params.join("&"));
   return true;
}
</script>

Let's do the customizations.

1. /littlelogs/savedata.php

   Replace the blue value with the savedata.php file's URL. Make the URL relative to document root. In other words, if the absolute URL was https://example.com/littlelogs/savedata.php then /littlelogs/savedata.php is the URL relative to document root.

2. savedstuff.txt

   Replace the purple value with the file name to log the note.

   To prevent bad actors from destroying your software or system files, the file name specified here is checked at the PHP script. If the specified file name does not have a .txt or .text file name extension, then .txt is appended to it.

3. \r\n*** ** * Above saved at DATETIMESTAMP * ** ***\r\n

   Replace the red value with however you want to separate logged notes. The example has linefeed characters "\r\n" at each end so the separator is on a line by itself. You don't have to use linefeed characters if your implementation doesn't need them.

Place the JavaScript in the source code of your web page anywhere that JavaScript can run. Near the bottom, above the closing </body> tag should work just fine.

Examples for Logging Messages

Example Links —

There are two ways to log a "visitor tapped this" message when a link is tapped. One is to just log a message. The other is to log a message and then take the browser to another URL like a normal link would.

A. Here is the example and the code for the first.

When you tap here, the action is logged.

When you 
<a href="javascript:SaveOnServer('the link was tapped')">tap here</a>, 
the action is logged.

The blue code is the link. SaveOnServer is the JavaScript function. And the link was tapped is the message to be logged.

B. And here is the example and the code for the second.

When you tap here for example.com, the action is logged and then the browser opens a new web page in a new tab.

When you 
<a href="https://example.com/" onclick="return SaveOnServer('tapped link')" target="_blank">tap here for example.com</a>, 
the action is logged and then the browser opens a new web page in a new tab.

When a regular URL is desired for the link's href value, then the onclick attribute can be used. You'll see how it's done with the blue code in the above code box.

The onclick attribute needs a return value of true so it can allow the link click to proceed to its destination. You'll see how that's handled in the above code. The SaveOnServer and the message are parts that were discussed with the previous example code.

Time on Page Message —

To log a message when a site visitor is at the web page for a certain duration, paste certain JavaScript into your web page. The JavaScript will measure the length of time and send the message.

Here is the JavaScript. It has two places to customize.

<script type="text/javascript">
function MessageAtTimepoint()
{
   var howManySeconds = 120;
   var sendData = "Browser was here for more than 2 minutes.";
   setTimeout(SaveOnServer,parseInt(howManySeconds*1000),sendData);
}
MessageAtTimepoint();
</script>

Replace blue value with the number of seconds to wait before recording a message. Replace the red value with the message to record.

Paste the JavaScript anywhere on your web page that can run JavaScript. Near the bottom, above the closing </body> tag is a viable option.

The JavaScript will start the timer automatically. If the page is still in the browser when the timer runs out, the message will be recorded in the log file.

Message Log Example

Here is an example of what the message log file can look like when it is updated by the examples in this article.

the link was tapped
*** ** * Above saved at Sun, 31 Aug 2025 14:33:50 +0000 * ** ***
Browser was here for more than 2 minutes.
*** ** * Above saved at Sun, 31 Aug 2025 14:34:48 +0000 * ** ***
the link was tapped
*** ** * Above saved at Sun, 31 Aug 2025 15:15:08 +0000 * ** ***
tapped link
*** ** * Above saved at Sun, 31 Aug 2025 15:21:25 +0000 * ** ***
tapped link

You'll see the message followed by the message separator. Then another message and separator. And so forth.

Once implemented, this system is a nice logger when occurrences of extra-important events on a web page need to be known.

(This content first appeared in Possibilities newsletter.)

Will Bontrager