Beacon API
window.addEventListener('unload', function() {
  navigator.sendBeacon(url, data);
});

Podpora v prohlížečích

  • Chrome 39
  • Firefox 31
  • Opera 26

Využití

V některých případech je potřeba poslat na server nějaká data před opuštěním stránky, typicky:

  1. Uložení rozepsaných dat na server k uživatelskému profilu.

  2. Skripty pro monitorování návštěvnosti / chování na webu potřebují požadavek před opuštěním k zaznamenání určením konce návštěvy.

Situace před Beacon API nabízela cca 3 způsoby řešení.

  1. Data průběžně posílat na základě časovače. To zvýší počet požadavků a není jisté, že se odešle aktuální stav.

  2. Odeslat data asynchronně AJAXem před opuštěním stránky (událost unload). Prohlížeče ale často takový obsah nestihnou odeslat.

  3. Odeslat data synchronně (zajistí to třetí parametr u metody open u XMLHttpRequestu nastavený na false):

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/ulozit.php?data=něco', false);
    xhr.send(null);

    Nevýhoda je v tom, že na tento požadavek bude prohlížeč čekat.

Ukázka použití

Beacon API tedy umožní spolehlivě uložit potřebný obsah bez blokování opuštění stránky (unload).

Metoda navigator.sendBeacon má dva parametry – adresu skriptu a data. Data je také možné pochopitelně přidat na přímo do URL. Požadavek na ukládací skript se přes sendBeacon odesílá metodou POST.

function log() {
  navigator.sendBeacon(
    "ulozit.php", 
    JSON.stringify(
      {
        'prvni': 'hodnota',
        'druha': 'jiná hodnota'
      }
    )
  );
}

Tuto funkci log je potom vhodné použít před opuštěním stránky (onload).

window.addEventListener('unload', log);

Ale nic nebrání jejímu použití při kliknutí na tlačítko – zkrátka u akcí, kde nepotřebujeme odpověď.

<button onclick="log()">
  Tlačítko
</button>

Zpracování dat v PHP

Dostat se k datům odeslaných výše uvedenou JS funkcí log a připsat je do souboru může v PHP vypadat následovně:

$payload = file_get_contents('php://input');
$data = json_decode($payload, true);
file_put_contents(
  "data.txt", 
  date('H:i:s') . ": " . $data['prvni'] . $data['druha'] . "\n", 
  FILE_APPEND
);

Použití v Google Analytics

V nástroji pro měření návštěvností – Google Analytics je možné předat parametr useBeacon, který v podporovaných prohlížečích použije Beacon API.

ga('send', 'event', 
  'click', 
  'download-me', 
  {useBeacon: true}
);

Zaslání požadavku do GA před opuštěním stránky jde potom docílit zkombinováním useBeacon s událostí unload.

window.addEventListener('unload', function() {
  ga('send', 'event', 
    'Unload', 
    location.pathname,  
    {useBeacon: true}
  );
});

Odkazy jinam

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Jak vytvořit WYSIWYG editor

Vlastní jednoduchý WYSIWYG editor

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

Detekce zapnutého JavaScriptu

Zapnutý a vypnutý JavaScript

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Plynulý přesun focusu

Plynulý přesun focusu

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Označení textu kliknutím

Označení kódu nebo textu po kliknutí

Jak označit text nebo zdrojový kód jedním kliknutím. Je to vůbec rozumné?

Komentáře