Beacon

A built-in JavaScript function allows your web page to send a quick message to a URL on the same domain.

Data isn't actually required. You may wish to touch the page or script without sending anything.

No response is received from the page or script. But data may be sent. If sent, the data size is limited to about 64k.

The beacon may be used to:

• Log a page load.
• Record clicks on certain links.
• Make a note when a user requests the full size of an image.
• Cause a script to send an email.
• Other uses you would find handy to have available.

Code examples are further below. First, here is the format for using the function.

navigator.sendBeacon(URL,OPTIONALDATA)

The URL may be an absolute or relative URL. As an example, the URL may be https://example.com/my/script.php or /my/script.php

With the example relative URL and no data, this would be valid code.

<script type="text/javascript">
navigator.sendBeacon('/my/script.php');
</script>

The above may be used to log a page load or send an email. Or anything else the script does when its URL is loaded without accompanying data.

Now let's also send some data.

<script type="text/javascript">
navigator.sendBeacon('/my/script.php','My name is, hmm, I don\'t remember.');
</script>

The script may log the message, send an email, or anything else the script can do with data it receives.

Note: To use examples in this article, replace /my/script.php with the relative URL of your script or web page.

This example will send a "link clicked" message when the "Tap Me" link is clicked.

<a href="https://flowto.us" onclick="navigator.sendBeacon('/my/script.php','Link clicked.');return true;">Tap Me</a>

The href attribute holds the link destination. The onclick attribute holds the code for sending the message to the script. The onclick code returns true so the browser can go ahead and load the page at the destination URL. The onclick code will run before the new page is loaded.

Before providing more examples, here is a script you may put on your server to send your beacons to. It is a PHP script that creates a CSV file whenever it is loaded. The script logs the data, the IP address, the message, and the browser's identification. If no message is received, it logs the occurrence anyway.

<?php
$LogFile = './BeaconSignals.csv'; // Location of CSV log file (may be relative or complete server path).
$Lines = array();
$Lines[] = date('r');
$Lines[] = $_SERVER['REMOTE_ADDR'];
$Lines[] = str_replace('"','""',file_get_contents("php://input"));
$Lines[] = str_replace('"','""',$_SERVER['HTTP_USER_AGENT']);
if(!file_exists($LogFile)) { file_put_contents($LogFile,'"Date","IP","Info","UA"'."\r\n"); }
file_put_contents($LogFile,'"'.implode('","',$Lines)."\"\r\n",FILE_APPEND);
?>

The log file location needs to be specified. As the code stands, the value is ./BeaconSignals.csv to put the BeaconSignals.csv file in the same directory as the script.

Let's enhance the link-clicked beacon so it reports the link destination instead of just "link clicked."

<a href="https://flowto.us/" onclick="navigator.sendBeacon('/my/script.php',this.href+' was clicked');return true;">Tap Me</a>

this.href inserts the value of the href attribute into the message. The above will send "https://flowto.us/ was clicked" to the beacon script.

To send the web page URL when a page loads, something like this can be put anywhere on the web page.

<script type="text/javascript">
navigator.sendBeacon('/my/script.php',document.URL+' was loaded');
</script>

document.URL inserts the web page URL into the message. If this web page had that code, it would send "https://www.willmaster.com/library/statistics/beacon.php was loaded" to the beacon script.

The sendBeacon() function provided with JavaScript is a handy little thing. Your imagination will come up with many uses, I'm certain.

To send a message when the page loads, the sendBeacon() code can launch from anywhere on the page.

The sendBeacon() function can send a message when the user taps a link, photo, div, or any other container that can have an onclick attribute.

Other events can also send a beacon message. These would include a form field gaining focus, the web page being scrolled, or the current web page losing focus (like when the user goes to a different browser tab).

Have fun!

(This content first appeared in Possibilities newsletter.)

Will Bontrager