Dyrk.org
Do You Really Know

 

Coucou les amis !

Ravi de pouvoir vous offrir un article qui je l’espère vous plaira !
Souvent on vous parle du tracking, du jeux de pistage auquel se livre un certain nombre d’entreprises, afin de déterminer quel contenu sera le plus percutant pour vous.

Tout cela à pour but de mieux vous connaitre. Ainsi une entreprise va se rendre compte d’un certain nombre de comportements similaires parmi ses internautes, puis en tirer des conclusions.

Je ne sais pas s’il existe des solutions open source, ou des démonstrations de « tracking », mais j’ai souhaité vous partager un script que j’ai rapidement écrit, et qui vous permettra de voir chacun de vos fait et geste.
Vous pourrez ensuite vraiment avoir une idée de ce que peuvent percevoir de grandes plateformes comme Google, Amazon, AliExpress, Facebook, …

 

Cas annexes d’utilisation

Protéger

Comme évoquer dans mon introduction, il y a le tracking publicitaire et commercial, mais il y a une autre forme de tracking « utile ».
Dans le cas où vous auriez des enregistrements de l’activité de vos utilisateurs, vous pourriez très facilement déterminer lorsqu’une manipulation d’un internaute est volontaire ou non :

Piratage, Fraude, ….

Vous pourriez avec la date et l’heure, visualiser comme au travers d’une caméra l’activité des personnes à un moment précis.

Attaquer

Bien entendu, les motivations ne sont pas toujours de se sécuriser ou de vendre plus de boite de friandise. Certains utilisent ce genre d’outils au travers d’un malware afin de vous espionner et de connaitre tous vos faits et gestes.

 

Le script

 

Voilà le gros script qu’il faudra insérer sur votre plateforme.

[pastacode lang= »javascript » manual= »%2F*%0A*%09%09%20User%20Activity%20Tracking%0A*%09%09(c)%20Dyrk.org%202019%20-%202020%0A*%0A*%0A*%2F%0A%0Avar%20%20userActivityTracker%20%3D%20%7B%0A%09%09%20mouse%20%3A%20%5B%5D%2C%0A%09%09%20t%20%3A%20(new%20Date()).getTime()%2C%0A%09%09%20lastCursorPosition%3Anull%2C%0A%09%09%2F*%0A%09%09*%0A%09%09*%09Effectuer%20une%20action%20de%20la%20souris%0A%09%09*%0A%09%09*%2F%0A%09%09drawPixel%20%3Afunction(color%2C%20x%2Cy%2C%20size%2C%20el)%7B%0A%09%09%09px%20%3D%20document.createElement(‘div’)%3B%0A%09%09%09px.setAttribute(‘style’%2C%20’z-index%3A999999999%3Bopacity%3A0.5%3Bbackground%3A’%2Bcolor%2B’%3Bheight%3A’%2Bsize%2B’px%3Bwidth%3A’%2Bsize%2B’px%3B%20position%3Aabsolute%3Bleft%3A’%2Bx%2B’px%3Btop%3A’%2By%2B’px%3Bborder-radius%3A20px’)%3B%0A%09%09%09document.getElementsByTagName(‘html’)%5B0%5D.appendChild(px)%3B%0A%09%09%09if%20(el.click)%20el.target.click()%3B%0A%09%09%09setTimeout((function(el)%7B%20el.parentNode.removeChild(el)%3B%20%7D).bind(null%2C%20px)%2C%202500)%3B%0A%09%09%7D%2C%0A%09%09%2F*%0A%09%09*%0A%09%09*%09Effectuer%20une%20saisie%20clavier%0A%09%09*%0A%09%09*%2F%09%0A%09%09writeKeyboard%20%3A%20function(target)%7B%0A%09%09%09%09var%20%20%09s%20%09%09%3D%20new%20XMLSerializer()%2C%20%0A%09%09%09%09%09%09items%20%09%3D%20document.getElementsByTagName(target.identifier.type)%2C%0A%09%09%09%09%09%09search%20%09%3D%20decodeURIComponent(atob(target.identifier.matchHTML))%3B%0A%09%09%09%09for%20(var%20i%20in%20items)%7B%0A%09%09%09%09%09if%20(typeof%20items%5Bi%5D%20!%3D%20’object’)%20continue%3B%0A%09%09%09%09%09var%20strTmp%20%3D%20s.serializeToString(items%5Bi%5D)%3B%0A%09%09%09%09%09if%20(strTmp%20%3D%3D%20search)%7B%0A%09%09%09%09%09%09items%5Bi%5D.value%20%2B%3D%20target.recordValue%3B%0A%09%09%09%09%09%7D%0A%09%09%09%09%7D%0A%09%09%7D%2C%0A%09%09%2F*%0A%09%09*%0A%09%09*%09Effectuer%20un%20scroll%0A%09%09*%2F%0A%09%09scroll%20%3Afunction(e)%7B%0A%09%09%09document.getElementsByTagName(‘html’)%5B0%5D.scrollTo(e.scrollLeft%20%2C%20e.scrollTop)%0A%09%09%7D%2C%0A%09%09%2F*%0A%09%09*%0A%09%09*%09T%C3%A9l%C3%A9charger%20l’activit%C3%A9%20de%20l’utilisateur%0A%09%09*%2F%0A%09%09downloadUserWay%20%3A%20function()%7B%0A%09%09%09var%20a%20%3D%20document.createElement(‘a’)%3B%0A%09%09%09a.setAttribute(‘href’%2C%20’data%3Atext%2Fcsv%2C’%2BencodeURIComponent(JSON.stringify(userActivityTracker.mouse)))%3B%0A%09%09%09a.setAttribute(‘download’%2C%20’recorder.txt’)%3B%0A%09%09%09a.click()%3B%0A%09%09%7D%2C%0A%09%09%0A%09%09%2F*%0A%09%09*%0A%09%09*%09Rejouer%20l’activit%C3%A9%20de%20l’utilisateur%0A%09%09*%0A%09%09*%2F%0A%09%09drawUserWay%20%3A%20function()%7B%0A%09%09%09document.getElementsByTagName(‘html’)%5B0%5D.scrollTo(0%20%2C%200)%3B%0A%09%09%09userActivityTracker.mouse.map%20(e%3D%3E%7B%0A%09%09%09%09switch%20(e.recordType)%7B%0A%09%09%09%09%09case%20’mouse’%3A%0A%09%09%09%09%09%09setTimeout(userActivityTracker.drawPixel.bind(null%2C%20e.color%2C%20e.positionX%2C%20e.positionY%2Ce.size%2C%20e)%2C%20e.time)%3B%0A%09%09%09%09%09break%3B%0A%09%09%09%09%09case%20’keyboard’%20%3A%0A%09%09%09%09%09%09setTimeout(userActivityTracker.writeKeyboard.bind(null%2C%20e)%2C%20e.time)%3B%0A%09%09%09%09%09break%3B%0A%09%09%09%09%09case%20’scroll’%20%3A%0A%09%09%09%09%09%09setTimeout(userActivityTracker.scroll.bind(null%2C%20e)%2C%20e.time)%3B%0A%09%09%09%09%09break%3B%0A%09%09%09%09%7D%0A%09%09%09%7D)%3B%0A%09%09%7D%2C%0A%09%09%2F*%0A%09%09*%0A%09%09*%09D%C3%A9marrer%20un%20enregistrement%20de%20l’activit%C3%A9%20de%20l’utilisateur%0A%09%09*%09%40time%20%3A%20dur%C3%A9e%20d’enregistrement%0A%09%09*%0A%09%09*%2F%0A%09%09initRecord%20%3A%20function(time)%7B%0A%09%09%09var%20listener%20%3D%20%5B%5D%2C%20x%20%3D%20document.getElementsByTagName(‘html’)%5B0%5D%3B%0A%09%09%09document.getElementsByTagName(‘html’)%5B0%5D.scrollTo(0%20%2C%200)%3B%0A%09%09%09%2F%2FMet%20en%20place%20tous%20les%20listeners%0A%09%09%09listener.push(x.addEventListener(‘mousemove’%2C%20function(e)%7B%0A%09%09%09%09e.color%20%09%3D%20’%23000’%3B%0A%09%09%09%09e.size%20%20%09%3D%20%205%3B%0A%09%09%09%09e.recordType%20%3D%20’mouse’%3B%0A%09%09%09%09e.positionX%09%3D%20%09e.pageX%20%3B%0A%09%09%09%09e.positionY%09%3D%09e.pageY%3B%0A%09%09%09%09e.time%09%09%3D%20(new%20Date()).getTime()%20-%20userActivityTracker.t%3B%0A%09%09%09%09userActivityTracker.mouse.push(e)%3B%0A%09%09%09%09userActivityTracker.lastCursorPosition%20%3D%20e%3B%0A%09%09%09%7D))%3B%0A%09%09%09listener.push(x.addEventListener(‘click’%2C%20function(e)%7B%0A%09%09%09%09e.color%20%09%3D%20’%23452FFE’%3B%0A%09%09%09%09e.size%20%20%09%3D%20%2015%3B%0A%09%09%09%09e.recordType%3D%20’mouse’%3B%0A%09%09%09%09e.click%09%09%3D%20true%3B%0A%09%09%09%09e.positionX%09%3D%20%09e.pageX%20%3B%0A%09%09%09%09e.positionY%09%3D%09e.pageY%3B%0A%09%09%09%09e.time%09%09%3D%20(new%20Date()).getTime()%20-%20userActivityTracker.t%3B%0A%09%09%09%09userActivityTracker.mouse.push(e)%3B%0A%09%09%09%09lastCursorPosition%20%3D%20e%3B%0A%09%09%09%7D))%3B%0A%09%09%09listener.push(x.addEventListener(‘keyup’%2C%20function(e)%7B%0A%09%09%09%09var%20s%20%3D%20new%20XMLSerializer()%2C%20str%20%3D%20s.serializeToString(e.target)%2C%0A%09%09%09%09type%20%3D%20e.target.nodeName%3B%0A%09%09%09%09e.identifier%20%3D%20%7BmatchHTML%3A%20btoa(encodeURIComponent(str))%2C%20type%3Atype%7D%3B%0A%09%09%09%09e.recordType%20%3D%20’keyboard’%3B%0A%09%09%09%09e.recordValue%20%3D%20e.key%3B%0A%09%09%09%09e.time%09%09%3D%20(new%20Date()).getTime()%20-%20userActivityTracker.t%3B%0A%09%09%09%09userActivityTracker.mouse.push(e)%3B%0A%09%09%09%7D))%3B%0A%09%09%09listener.push(window.addEventListener(‘scroll’%2C%20function(e)%7B%0A%09%09%09%09e.recordType%20%3D%20’scroll’%3B%0A%09%09%09%09e.scrollTop%20%20%3D%20document.getElementsByTagName(‘html’)%5B0%5D.scrollTop%3B%0A%09%09%09%09e.scrollLeft%20%20%3D%20document.getElementsByTagName(‘html’)%5B0%5D.scrollLeft%3B%0A%09%09%09%09e.time%09%09%3D%20(new%20Date()).getTime()%20-%20userActivityTracker.t%3B%0A%09%09%09%09userActivityTracker.mouse.push(e)%3B%0A%09%09%09%09if%20(userActivityTracker.lastCursorPosition)%20userActivityTracker.mouse.push(userActivityTracker.lastCursorPosition)%3B%0A%09%09%09%7D))%3B%0A%09%09%09%0A%09%09%09%2F%2FFonction%20qui%20met%20fin%20%C3%A0%20l’enregistrement%0A%09%09%09setTimeout(%20function()%7B%20%0A%09%09%09%09listener.map%20(function(e)%7B%20clearInterval(e)%3B%20%7D)%0A%09%09%09%09console.log(%22enregistrement%20termin%C3%A9%22)%3B%0A%09%09%09%09%2F%2FuserActivityTracker.downloadUserWay()%3B%0A%09%09%09%09%2F%2FuserActivityTracker.drawUserWay()%3B%0A%09%09%09%7D%2C%20time)%3B%0A%09%7D%0A%7D%3B%0A » message= » » highlight= » » provider= »manual »/]

 

Enregistrement

Ensuite, vous pourrez démarrer un enregistrement d’une certaine durée avec la ligne de code suivante :

[pastacode lang= »javascript » manual= »userActivityTracker.initRecord(30000)%3B » message= » » highlight= » » provider= »manual »/]

Ici, je demande d’enregistrer 30 secondes d’activité.

Une fois l’enregistrement terminé, si vous souhaitez admirer votre activité, il vous suffit d’utiliser la fonction suivante :

[pastacode lang= »javascript » manual= »userActivityTracker.drawUserWay()%3B » message= » » highlight= » » provider= »manual »/]

Vous pouvez télécharger l’activité de l’utilisateur avec la ligne de code ci-dessous :

[pastacode lang= »javascript » manual= »userActivityTracker.downloadUserWay()%3B » message= » » highlight= » » provider= »manual »/]

 

Toute l’activité de l’utilisateur est enregistré dans une variable « mouse » :

• déplacement de la souris
• clics
• scroll
• saisi de texte

Rejouer un enregistrement

Pour rejouer un enregistrement, il faut vous rendre sur la page où l’enregistrement a été réalisé.
Récupérer le contenu du fichier que vous aurez récupéré avec la fonction « downloadUserWay() »
et l’injecter dans la variable « mouse »

[pastacode lang= »javascript » manual= »userActivityTracker.mouse%20%3D%20JSON.parse(‘%20%20Contenu%20du%20fichier%20g%C3%A9n%C3%A9r%C3%A9%20par%20la%20fonction%20downloadUserWay%20’)%3B » message= » » highlight= » » provider= »manual »/]

Une fois que vous avez fait l’étape ci-dessus, il ne vous reste plus qu’à lancer le scénario avec la ligne de code suivante :

[pastacode lang= »javascript » manual= »userActivityTracker.drawUserWay()%3B » message= » » highlight= » » provider= »manual »/]

 

 

La vidéo

Comme d’habitude, n’hésitez pas à mettre un petit commentaire, vous abonner, ou bien mettre un petit  j’aime pour motiver le petit gars derrière le clavier ;)

Bon visionnage !!!

 

 

Conclusion

 

Pour les personnes un peu néophytes et tombées là par hasard, vous aurez pu avoir un petit avant-goût des outils qu’utilisent certaines grandes entreprises pour mieux vous cibler et vous vendre plus facilement de la crème pour les pieds ;)
Quant aux autres personnes, j’espère vous avoir donné ici des outils qui vous permettront d’améliorer la qualité de vos plateformes, et des idées d’utilisations plus « conventionnelles ».