Mit néznek pontosan a látogatóid?
A napokban azon gondolkodtam, hogy milyen jó lenne látni, hogy a látogatóim pontosan mely részén is töltenek el több időt a weboldalamon. A Google Analytics ugyan ad egy statisztikát az átlag tartózkodási időről, sőt a kattintási területek népszerűségéről is, de arról már sajnos nem, hogy a látogatók mondjuk többet nézik-e a cikket, vagy csak azon belül egy képet, esetleg beágyazott videót. Kíváncsiságom idáig terjedt, hogy végül megírtam ennek kiderítésére egy kis jQuery plugint. Az alábbi kódot jQuery függvénykönyvtár beolvasásával lehet futtatni és egyetlen függvény meghívásával lehet inicializálni.
Első lépésként létrehozunk egy önálló JavaScript fájlt, melyben a jQuery függvénykönyvtár kiegészítéseként írjuk a függvényeinket.
JavaScript
(function($){
reader_timer = '';
viewpoint_array = [];
viewpoint_time_array = [];
start_time_array = [];
$.fn.reader_check = function(viewpoint) {
$(viewpoint).each(function() {
viewpoint_array.push($(this).attr('id'));
viewpoint_time_array.push(0);
start_time_array.push(0);
});
$(this).reader_check_processor(viewpoint_array, viewpoint_time_array, start_time_array);
return this;
};
$.fn.reader_check_processor = function(viewpoint_array, viewpoint_time_array, start_time_array) {
$(this).reader_check_set(viewpoint_array, viewpoint_time_array, start_time_array);
$(this).scroll(function() {
$(this).reader_check_set(viewpoint_array, viewpoint_time_array, start_time_array);
});
return this;
};
$.fn.reader_check_set = function(viewpoint_array, viewpoint_time_array, start_time_array) {
return this;
};
})(jQuery);
HTML
<script type="text/javascript" src="javascript/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.reader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).reader_check('.text-container');
});
</script>
A kódrészlet elején létrehozzuk azokat a tömböket, melyekben tárolni fogjuk az egyes weboldal területek id attribútumát, illetve az ezeknél az elemeknél eltöltött időt. A "reader_check" nevű függvény egy változót vár. Ez a változó tárolja annak a szelektornak a nevét, mely alapján szét tudja majd bontani a weboldal elemeit kisebb egységekre. A "reader_check_processor" nevű függvény elindítja a kis programunkat. Meghívja a "reader_check_set" nevű függvényt a weboldal betöltésekor, illetve a görgetések pillanatában.
Most jön a lényeg
Most pedig megírjuk a program lelkét, magát a látható területek feltérképezését.
JavaScript
$.fn.reader_check_set = function(viewpoint_array, viewpoint_time_array, start_time_array) {
var current_viewpoint = $(document).scrollTop() + $(window).height();
clearTimeout(reader_timer);
$.each(viewpoint_array, function(i, val) {
if (($('#'+val).offset().top < current_viewpoint) && ($('#'+val).offset().top + $('#'+val).height() > current_viewpoint - $(window).height())) {
var now = $.now();
if (start_time_array[i] == 0) {
start_time_array[i] = now;
}
if (viewpoint_time_array[i] == 0) {
viewpoint_time_array[i] = now - start_time_array[i];
}
else {
if (now == start_time_array[i]) {
start_time_array[i] -= viewpoint_time_array[i];
}
else {
viewpoint_time_array[i] = now - start_time_array[i];
}
}
}
else {
start_time_array[i] = 0;
}
});
var output_array = [];
$.each(viewpoint_time_array, function(i, val) {
output_array.push(parseInt(viewpoint_time_array[i] / 1000));
});
var page = window.location.href;
reader_timer = setTimeout(function() {
$.ajax({
url: 'reader.php',
type: "POST",
data: ({
action: 'reader',
viewpoint_array: viewpoint_array.join(','),
output_array: output_array.join(','),
page: page
}),
success: function (data) {
}
});
}, 3000);
return this;
};
A "current_viewpoint" változó tárolja, hogy jelenleg a felhasználó mit is lát pontosan a képernyőjén. Ez a weboldal tetejétől való görgetési terület és az ablak magasságának összegéből adódik. A "reader_timer" változóban tároljuk az időzítéshez szükséges idő mértékét. Erre azért van szükségünk, hogy amikor görgetnek a weboldalon a látogatók ne azonnal mentse az eltelt időt az adatbázisba a program, hanem előbb győzödjön meg róla, hogy már abba maradt a görgetés. Jelen esetben ez úgy valósul meg, hogy görgetéskor újra indítja az időzítést, ami most 3 másodperc. Ha ebben a 3 másodpercben nem történik görgetési esemény, vagy nem kattintanak el a weboldalról, akkor elvégzi ajax segítségével a mentést az adatbázisba. A mentésre szolgáló kódrészlet továbbküldi a PHP számára a szekciók id-jait, az azokon eltelt időt és hogy ez ponntosan melyik URL-en történt.
Felmerülhet jogosan egy kérdés. Mégpedig, hogy honnan tudja a kis programunk, hogy elgörgettek már egy adott területről, majd visszagörgettek rá valamivel később? Az alábbi kódrészlet a "start_time_array" tömbben tárolja az adott elemek indulási idejét egy tömb formájában. Majd ezeket az értékeket módosítja, ha egyszer már a látható területen volt és később szeretnénk a további görgetések idejét is hozzáadni.
JavaScript
$.each(viewpoint_array, function(i, val) {
if (($('#'+val).offset().top < current_viewpoint) && ($('#'+val).offset().top + $('#'+val).height() > current_viewpoint - $(window).height())) {
var now = $.now();
if (start_time_array[i] == 0) {
start_time_array[i] = now;
}
if (viewpoint_time_array[i] == 0) {
viewpoint_time_array[i] = now - start_time_array[i];
}
else {
if (now == start_time_array[i]) {
start_time_array[i] -= viewpoint_time_array[i];
}
else {
viewpoint_time_array[i] = now - start_time_array[i];
}
}
}
else {
start_time_array[i] = 0;
}
});
Mi van akkor, ha kilép a látogató az oldalról?
Viszonylag egyszerű megoldás van erre is. az alábbi kódrészlettel meg tudjuk vizsgálni, hogy szeretnée valaki bezárni a böngésző adott fülét, vagy akár az egész böngészőt és az esemény előtt még le tudunk futtatni egy függvényt.
JavaScript
window.addEventListener('beforeunload', function(event) {
var output_array = [];
$.each(viewpoint_time_array, function(i, val) {
output_array.push(parseInt(viewpoint_time_array[i] / 1000));
});
var page = window.location.href;
$.ajax({
url: 'reader.php',
type: "POST",
data: ({
action: 'reader',
viewpoint_array: viewpoint_array.join(','),
output_array: output_array.join(','),
page: page
}),
success: function (data) {
}
});
});
Esetünkben itt az utolsó mentett eredményeket fogjuk tudni ajaxxal elküldeni a PHP feldolgozónak. Jelen esetben már nincs időzítés, mert nem szeretnénk feltartóztatni a látogatót távozási szándékában.
Tömlöcbe vele!
Az alábbi PHP fórráskód pedig elvégzi a szükséges adatbázis művelet a mentéshez.
SQL
CREATE TABLE IF NOT EXISTS reader (
r_id int(6) NOT NULL AUTO_INCREMENT,
session_id varchar(20) COLLATE utf8_hungarian_ci NOT NULL,
viewpoint_array text COLLATE utf8_hungarian_ci NOT NULL,
output_array text COLLATE utf8_hungarian_ci NOT NULL,
page varchar(250) COLLATE utf8_hungarian_ci NOT NULL,
date varchar(10) COLLATE utf8_hungarian_ci NOT NULL,
PRIMARY KEY (r_id)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_hungarian_ci AUTO_INCREMENT=1 ;
PHP
<?php
require_once('functions.php');
if (filter_input(INPUT_POST, 'action'))
{
if ($_POST['action'] == 'reader')
{
$_POST['viewpoint_array'] = clear_tags($_POST['viewpoint_array']);
$_POST['viewpoint_array'] = clear_sql_injection($_POST['viewpoint_array']);
$_POST['output_array'] = clear_tags($_POST['output_array']);
$_POST['output_array'] = clear_sql_injection($_POST['output_array']);
$_POST['page'] = clear_tags($_POST['page']);
$_POST['page'] = clear_sql_injection($_POST['page']);
$viewpoint_array = explode(',', $_POST['viewpoint_array']);
$output_array = explode(',', $_POST['output_array']);
$page = htmlentities($_POST['page']);
if ($_SESSION['reader_page'] != $page)
{
mysqli_query($GLOBALS['connect'], "INSERT INTO reader (session_id, viewpoint_array, output_array, page, date) VALUES ('".session_id()."', '".serialize($viewpoint_array)."', '".serialize($output_array)."', '".$page."', '".time()."')");
$_SESSION['reader_page'] = $page;
$_SESSION['reader_id'] = mysql_insert_id();
}
else
{
mysqli_query($GLOBALS['connect'], "UPDATE reader SET session_id = '".session_id()."', viewpoint_array = '".serialize($viewpoint_array)."', output_array = '".serialize($output_array)."', page = '".$page."' WHERE r_id = ".$_SESSION['reader_id']." LIMIT 1");
}
}
}
?>
Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.