Tracker les affichages de slides avec PhotoSwipe
PhotoSwipe (http://photoswipe.com) permet de mettre en place assez facilement une galerie de photos. Pour paramétrer la liste d'images à utiliser, on génère typiquement une liste JSON de ce type:
var items = [ { src: 'pictures/120803-nihil-leroimendiant.jpg', w: 600, h: 900 }, { src: 'pictures/111210.jpg', w: 960, h: 643 }, ... { src: 'pictures/040910-28b.jpg', w: 800, h: 600 } ];
Nous voudrions tracker les images consultées, c'est-à-dire les enregistrer dans un fichier (ou une base de données) avec la date et l'heure de l'affichage en question. Pour cela, créons un classique script de tracking renvoyant un pixel gif transparent, et qui bien sûr enregistre au passage l'image passée en paramètre ainsi que la date et l'heure:
<?php file_put_contents(dirname(realpath(__FILE__)).'/script-de-tracking.log', date('Y-m-d H:i:s')."\t".$_GET['picture']."\n", FILE_APPEND); header("Content-type: image/gif"); echo "\x47\x49\x46\x38\x39\x61\x01\x00\x01\x00\x91\x00\x00\x00\x00\x00" ."\xFF\xFF\xFF\xFF\xFF\xFF\x00\x00\x00\x21\xF9\x04\x01\x00\x00\x02\x00" ."\x2C\x00\x00\x00\x00\x01\x00\x01\x00\x00\x02\x02\x54\x01\x00\x3B";
Habituellement, dans le contexte d'une page HTML, on appellerait ce pixel tag de la manière suivante:
<img src="script-de-tracking.php?picture=monimage.jpg" border="0">
Ici, on utilise PhotoSwipe et s'il est toujours possible de spécifier le contenu d'une slide en HTML, et donc d'afficher à la fois notre image et le pixel de tracking, il existe toutefois une méthode plus simple. Lorsque l'on spécifie directement les images à afficher comme précédemment, il est possible de spécifier également une image basse résolution qui va se charger juste avant l'image réelle. Donnons l'adresse de notre pixel tag comme adresse de cette image basse résolution et notre liste JSON d'images devient:
var items = [ { src: 'pictures/120803-nihil-leroimendiant.jpg', w: 600, h: 900, msrc: '/script-de-tracking.php?picture=120803-nihil-leroimendiant.jpg' }, { src: 'pictures/111210.jpg', w: 960, h: 643, msrc: '/script-de-tracking.php?picture=111210.jpg' }, ... { src: 'pictures/040910-28b.jpg', w: 800, h: 600, msrc: '/script-de-tracking.php?picture=040910-28b.jpg' } ];
Cliquons sur quelques images à la suite et l'on obtient dans le fichier 'script-de-tracking.log' un résultat du type suivant:
2015-12-02 18:38:11 070127-1583.jpg 2015-12-02 18:38:11 070127-1579-2.jpg 2015-12-02 18:38:11 070127-1576-1.jpg 2015-12-02 18:38:12 050325-14b.jpg
Cette implémentation est volontairement très simple dans un but didactique, à vous de l'adapter à vos besoins spécifiques.