Tracking de clic dans une iframe

Tracking de clic dans une iframe

Tutoriel publié en mars 2013 par Galdon dans la catégorie jQuery

En utilisant javascript il est très facile de détecter les clics sur n'importe quel élément d'une page web, c'est encore plus facile avec un framework comme jQuery. Par contre c'est impossible à faire sur une iframe et son contenu.

La raison à ça est assez simple à comprendre : une iframe c'est comme un navigateur imbriqué dans une page web (exactement comme si la page ciblée par l'iframe se trouvait dans un autre onglet ou dans une autre fenêtre de navigateur).

En javascript, on n’a pas accès aux autres onglets pour des raisons évidentes de sécurité, et bien pour les iframe c'est la même chose, les navigateurs ne donnent pas accès au contenu d'une iframe via Javascript.

Lorsque l'iframe se trouve sur le même domaine que la page parente, le navigateur donne accès au contenu de l'iframe depuis la page parente, et vice-versa, mais c'est la seule exception à ces règles de sécurité.

Pourtant, il est quand même possible de détecter les clics sur une iframe en utilisant habillement l'événement blur et quelques variables...

Dans ce tutoriel, je vais donc vous présenter une technique "maison" qui permet de faire du tracking de clics sur une iframe (en utilisant jQuery), que l'on peut utiliser pour de nombreuses applications : tracking de clic sur un bouton "J'aime" Facebook, un bouton Google +1, un player youtube ou encore les clics sur les annonces Google Adsense (ou une autre régie de pub).

C'est parti !

Tracking de clic sur une iframe

Dans cette partie, je vais vous expliquer le fonctionnement général, le principe qui permet de détecter les clics.

Pour ça, on va travailler sur une page web très simple qui contient une iframe, comme ceci :

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tracker les clics dans une iframe avec jQuery</title>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
	<style>
	body{background:#efefef; padding:15px 20px;}
	.iframetrack{margin:20px 0;}
	#consoleDebug{position:fixed; top:30px; right:30px; z-index:9999; background:rgba(0,0,0,0.3);}
	#consoleDebug .alert{margin:20px;}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<p>Element actif : <span class="label" id="actif"></span></p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam.</p>
	<div class="iframetrack">
		<iframe width="468" height="110" src="./sample-iframe/red.html" frameborder="0" allowtransparency="true" scrolling="no"></iframe>
	</div>
	<p>Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh.</p>
	<div id="consoleDebug"></div>
</body>
</html>

Le div #consoleDebug va simplement servir à afficher un message à chaque fois qu'un clic est détecté.

Au chargement d'une page web, le navigateur donne par défaut le focus à l'élément <body>, qui correspond en gros à toute la page web.

Qu'est-ce que le focus ?

Une page web est composée d'une arborescence d'éléments qu'on appelle le DOM. Certains de ses éléments comme des champs de formulaire (<input>, <textarea>), ou les liens (<a>) peuvent êtres marqués comme l'élément actif. C'est ça qu'on appelle le focus.

Lorsqu'un champ de formulaire a le focus, le curseur clignote à l'intérieur, et lorsqu'on appuie sur des touches du clavier, on écrit dans ce champ. En jQuery, on peut détecter lorsqu'un élément obtiens le focus, en utilisant l'événement .focus().

Mais ça n'est pas tout, il existe le contraire de focus, il s'agit de l'événement blur. Cet événement survient lorsqu'un élément perd le focus, ce qui est le cas par exemple lorsqu'on change de champ dans un formulaire.

Pourquoi je vous parle de ça ?
Et bien parce que l'événement blur va nous permettre de détecter le clic sur une iframe, car lorsqu'on clique sur une iframe, la page web perd le focus.

Le problème c'est qu'il y a plein d'autres cas dans lesquels la page reçoit l'événement blur, en voici quelques exemples :

  • L'utilisateur change d'onglet
  • L'utilisateur clique sur une autre fenêtre que celle du navigateur web qui affiche la page

Du coup il va falloir être en mesure de savoir si le blur a été provoqué par un clic sur une iframe, ou par autre chose.

Quand la souris survole une iframe ou au contraire revient dans la page après avoir survolé l'iframe, les événements mouseover et mouseout se produisent. Donc il est très facile de savoir si la souris est au dessus d'une iframe ou pas, en surveillant la frontière page web/iframe grâce à ces 2 événements.

Et bien voici le code javascript qui permet de faire tout ça avec jQuery :

jQuery(document).ready(function($){
	// Affichage de l'élément actif (pour aider à comprendre ce qui se passe)
	setInterval(function(){
		$('#actif').text(document.activeElement.tagName);
	}, 100);
	
	// Initialisation variable
	iframe_survol = false;
	
	// Surveillance frontière
	$('.iframetrack iframe').mouseover(function(){
		iframe_survol = true;
	}).mouseout(function(){
		iframe_survol = false;
	});
	
	// On donne le focus à la fenêtre au chargement
	$(window).focus();
	
	// Ecoute blur
	$(window).blur(function(e){
		$('<div class="alert alert-info">').html("Clic sur l'iframe").appendTo('#consoleDebug').delay(3000).fadeOut();
	});
	
	// Retour du focus sur la page au survol
	$(document).mousemove(function(e){
		if( document.activeElement.tagName == 'IFRAME' ){
			$(window).focus();
		}
	});
});

Voilà ce que ça donne en live :

Tester /ressources/exemple/jquery-iframe-track/simple.html
Iframe tracking
Tracker les clics dans une iframe avec jQuery

Cette technique fonctionne, mais elle est assez lourde à mettre en place, et ne permet pas de gérer plusieurs iframes.

De plus, elle n'est pas compatible avec tous les navigateurs : Internet Explorer gère le blur de manière très différente des autres navigateurs, et certaines fonctions ne marchent pas sur Firefox, comme le $(window).focus();.

Plugin jQuery : iframeTracker

iframeTracker est un plugin jQuery que j'ai moi-même créé, et qui permet de faire la même chose que ce qui a été présenté dans la première partie, sauf qu'il est compatible avec tous les navigateurs (j'ai résolu les soucis de compatibilité avec IE8 et Firefox grâce à une astuce un peu complexe qu'il n'est pas nécessaire d'expliquer dans ce tutoriel).

De plus, ce plug-in permet de gérer un nombre d'iframe illimité, et d'effectuer différentes actions au survol de ces iframes grâce à des callback (fonctions appelées automatiquement par le plugin en réaction à des événements).

Je vous conseille vivement d'utiliser ce plugin plutôt que le code vu dans la première partie, qui n'est là que pour montrer le fonctionnement avec un exemple assez simple.

Vous pouvez le télécharger ici (version utilisée pour ce tutoriel, avec les commentaires en français) : jquery.iframetracker.fr.js ou alors sur GitHub : iframeTracker-jquery.

Voici comment il s'utilise :

jQuery(document).ready(function($){
	// Facebook iframe
	$('.socialiframetrack_facebook iframe').iframeTracker({
		blurCallback: function(){
			$('<div class="alert alert-info">').html('Click on Facebook iframe').appendTo('#consoleDebug').delay(3000).fadeOut();
		}
	});
	
	// Autres iframes (entourées par un élément de classe CSS .iframetrack)
	$('.iframetrack iframe').iframeTracker({
		blurCallback: function(){
			$('<div class="alert alert-info">').html('Click on iframe : #' + this._overId).appendTo('#consoleDebug').delay(3000).fadeOut();
		},
		overCallback: function(element){
			// Mémorisation de l'id de l'iframe survollée
			this._overId = $(element).parents('.iframetrack').attr('id');
		},
		outCallback: function(element){
			// Reset lorsque la souris sort de l'iframe et revient dans la fenêtre
			this._overId = null;
		},
		_overId: null
	});
});

C'est très simple, il faut utiliser un sélecteur qui match toutes les iframes que vous voulez "écouter" avec un sélecteur jQuery, et d'appeler la fonction iframeTracker en lui passant en paramètre un objet qui possède ces slots :

  • blurCallback
    obligatoire
    Cette fonction est appelée lorsque la fenêtre perd le focus alors que le pointeur de la souris est au dessus d'une iframe parmi celles matchées par le sélecteur (car il peut y en avoir plusieurs)
  • overCallback
    facultatif
    Cette fonction est appelée lorsque la souris entre dans une iframe écoutée par le sélecteur.
    Elle prend en paramètre l'élément qui représente l'iframe survolée.
    C'est très pratique car on peut alors mémoriser l'iframe actuellement survolée lorsque le sélecteur match plusieurs iframe. Dans l'exemple, je stocke cette information dans la variable _overId que j'utilise ensuite dans le blurCallback.
  • outCallback
    facultatif
    Réciproque de overCallback, cette fonction est appelée lorsque la souris ressort de l'iframe pour revenir dans la page web.

Ensuite vous pouvez parfaitement ajouter des attributs supplémentaires pour stocker les différentes variables dont vous avez besoin dans vos callbacks, comme je l'ai fait avec _overId.

Voilà ce que ça donne :

Tester /ressources/exemple/jquery-iframe-track/
Demo jQuery iframeTracker
Exemple d'utilisation du plugin jQuery iframeTracker

Encore faim ? allez lire ça : zombie poulpe !

Tutoriaux similaires
52 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°12949 par Lydia Kroos
Lydia Kroos lundi 23 mai 2022, 21:33
Je m'appelle Lydia Kroos. Quand mon homme m'a quitté, j'ai été traumatisée et j'ai eu le cœur brisé et je n'ai pas pu me reprendre pendant des mois. J'ai tout fait pour le récupérer mais en vain. Je suis parti dans une autre ville en espérant pouvoir tout recommencer. Je suis entré en contact avec un autre homme avec qui j'ai fait de mon mieux pour être mais ça n'a pas marché parce que je ne pouvais pas l'aimer. Je savais que j'aimais toujours et que je voulais que mon homme me revienne. J'ai donc commencé à chercher de l'aide et c'est à ce moment-là que j'ai trouvé le DR ISIKOLO à partir de différents points de vue que j'ai lu à son sujet. Nous avons discuté et je lui ai fait comprendre tout ce que je devais savoir et j'ai cru en lui et j'ai respecté les procédures. Il a travaillé pour moi et a rétabli l'amour et la connexion entre moi et mon homme et juste après 48 heures comme il l'avait promis, mon homme m'a cherché et nous avons parlé et il est descendu pour me voir où je suis et nous avons inventé les choses et sommes devenus heureux ensemble à nouveau. DR ISIKOLO est digne de confiance et il peut aussi vous aider si vous le contactez pour quoi que ce soit. Envoyez-lui simplement un SMS via WhatsApp +2348133261196 ou envoyez-lui un e-mail via: isikolosolutionhome@gmail.com
commentaire n°12965 par Denisa Popescu
Denisa Popescu vendredi 27 mai 2022, 19:42
DR ISIKOLO EST UNE VIE SAUVEUR ET JE PEUX VOUS ASSURER À CE SUJET.
Je m'appelle Denisa Popescu et je suis ici pour me joindre aux nombreuses personnes ici présentes pour remercier le Dr Isikolo pour son aide et ses gestes aimables envers moi. J'ai vécu une expérience horrible en traversant un chagrin d'amour avec mon homme. Il m'a quitté et j'ai été dévasté et je n'ai trouvé aucune aide recherchée pour le récupérer. À un moment donné, j'étais déprimé jusqu'à ce que je tombe sur des pages où des gens témoignaient de la façon dont le Dr Isikolo les avait aidés. Je l'ai contacté et il n'a jamais hésité à m'aider également. Non seulement j'ai récupéré mon homme après 48 heures, mais l'amour et le bonheur ont également été restaurés mieux que jamais. Le Dr Isikolo est une personnalité incroyable et je ne le remercierai jamais assez pour ses services désintéressés envers l'humanité. contactez-le maintenant par e-mail : isikolosolutionhome@gmail.com ou envoyez-lui un SMS via WhatsApp : +234-8133261196.
commentaire n°12981 par Maria Dronca
Maria Dronca lundi 30 mai 2022, 21:13
Je suis Maria Dronca. Mon mari m'a quitté ainsi que mon fils et n'est jamais revenu jusqu'à ce que le DR ISIKOLO intervienne. Mon histoire ne diffère pas des autres qui ont pris leur temps pour partager des informations sur lui avec le monde. J'ai eu des problèmes conjugaux avec mon mari qui l'ont poussé à me quitter et à voyager dans une autre ville. À un moment donné, j'étais déprimé et j'ai obtenu de l'aide de nulle part jusqu'à ce que je contacte le Dr Isikolo qui m'a aidé. Il a restauré l'amour et la connexion entre moi et mon partenaire et je l'ai récupéré après 2 jours comme il l'avait promis. Comme tout le monde qui parle de lui, je suis ici pour dire du bien de lui et le remercier d'avoir à nouveau apporté de la joie dans ma vie. Il n'échouera pas si vous lui donnez un essai pour vous aider aussi. Envoyez-lui simplement un SMS via WhatsApp : +2348133261196 ou envoyez-lui un e-mail via : isikolosolutionhome@gmail.com
commentaire n°13018 par wendyjones
wendyjones mercredi 8 juin 2022, 14:14
Je me sens si joyeuse aujourd'hui grâce à l'aide que le Dr Ozalogbo m'a apportée pour récupérer mon mari avec son sort. Je suis mariée depuis 3 ans et cela a été si terrible parce que mon mari me trompait et demandait le divorce. Mais quand je suis tombé sur le courrier électronique du Dr Ozalogbo sur Internet publié par une dame, j'ai décidé de le contacter et je lui ai expliqué ma situation, puis j'ai demandé son aide, mais à ma plus grande surprise, il m'a dit qu'il m'aiderait avec mon cas car il n'y a pas de problème sans solution. Ici, je célèbre parce que mon mari est de retour à la maison et je profite vraiment de mon mariage, quelle belle fête. Je continuerai à témoigner sur internet car le Dr Ozalogbo est vraiment un vrai lanceur de sorts. Pourquoi ne pas contacter le Dr Ozalogbo maintenant si vous rencontrez des difficultés dans votre vie relationnelle. Envoyez-lui un e-mail à ozalogboshrine@gmail.com ou whats-app au +2348162562991 sa page Facebook ; https://www.facebook.com/Drozalogbo/
commentaire n°13663 par Maggi
Maggi vendredi 15 juillet 2022, 21:59
Dr.Ibinoba est tout simplement le meilleur lanceur de sorts et assistant. Je m'appelle Maggi Phelan, Par respect pour vous et vos sorts, je dois faire connaître ce témoignage à tous. J'ai été voir d'autres lanceurs de sorts sans voir aucun résultat. J'aurais juste aimé venir vous voir plus tôt, j'ai tiré le meilleur de vous. Mon ex-mari était parti pendant un an et je suis allé partout et d'autres lanceurs de sorts pour obtenir de l'aide, mais aucun résultat jusqu'à ce que mon ami me présente le Dr Ibinoba. Une fois le Love Spell terminé, j'ai finalement reçu un appel de lui dans les 48 heures, comme le Dr Ibinoba me l'a assuré. Ses sorts ont fait des merveilles et mon mari est de retour plein d'amour. C'est un miracle! Il est soudainement revenu avec des fleurs en disant que je devrais lui pardonner, j'ai été vraiment sidéré et choqué quand mon mari s'est agenouillé pour demander pardon et que je l'accepte en retour. Je suis vraiment à court de mots et joyeux, tu es un Dieu envoyé à moi et à toute ma famille. Et maintenant je suis de nouveau une femme joyeuse. Merci beaucoup Dr Ibinoba. Tous ceux qui recherchent un vrai lanceur de sorts doivent contacter le Dr Ibinoba sur WhatsApp : +2348085240869
commentaire n°14502 par Maris
Maris mardi 16 août 2022, 17:59
Je m'appelle Maris Santos, je viens des États-Unis, Washington. J'ai toujours promis de vous recommander aux personnes qui pourraient également avoir besoin de votre aide, car trouver votre NUMÉRO WHATSAPP m'a été une bénédiction. Encore mieux, Dr IBINOBA vous êtes vraiment un grand et puissant lanceur de sorts. J'étais tellement déprimé après avoir été sans amour pendant près de cinq ans. J'ai demandé un sort d'amour de réunion et étonnamment, cela a fonctionné pour moi sans aucun effet secondaire. Je vis heureusement avec l'homme le plus charmant du monde et c'est pour cela que je prie. Vous remercier Dr IBINOBA ne suffirait pas, compte tenu de ce que vous avez fait pour moi, je dois donc partager ce témoignage de votre travail manuel au monde entier, pour connaître votre bon travail pour moi. Vous pouvez contacter cet homme pour tout problème relationnel ou tout problème que vous rencontrez et il vous aidera également ..WhatsApp : +2348085240869
commentaire n°14557 par Janet Rogers
Janet Rogers dimanche 21 août 2022, 12:59
Mon mari vient de se réveiller et a décidé que notre mariage était terminé. Depuis quelques mois, Roger et moi n'allons pas bien car il avait une liaison avec son assistante au travail. J'aimais tellement mon mari et j'ai décidé de rester et de travailler sur notre mariage. En peu de temps, Roger a cessé de venir à la maison et son ami proche m'a dit qu'il avait un autre appartement où il vivait avec elle. J'ai été blessé et j'ai continué à chercher de l'aide parce que Roger était différent de l'homme que j'ai épousé il y a 10 ans. Heureusement, j'ai trouvé le Dr Ilekhojie qui a promis de me rendre mon mari. Il a exécuté un sort de réconciliation qui a ramené Rogers et maintenant nous sommes à nouveau heureux avec nos garçons. Si vous avez des problèmes comme le mien, envoyez un e-mail au Dr Ilekhojie : (gethelp05@gmail.com ou contactez-le sur Whatsapp +2348147400259
commentaire n°16205 par Bridget Helen
Bridget Helen vendredi 28 octobre 2022, 20:44
L'amour est beau quand vous avez quelqu'un avec qui le partager Dr Ekpen ogiogun est un lanceur de sorts très authentique et un homme de sagesse très unique et puissant. Je n'ai pas pu tomber enceinte car j'avais des problèmes de fertilité. Mon mari a divorcé à cause de ça. J'étais tellement inquiète et je pleurais toujours et je pensais même à me suicider, mais un de mes amis m'a présenté un grand homme appelé le Dr Ekpen ogiogun qui l'a également aidée à résoudre son problème. Elle m'a donné son email et je l'ai contacté et lui ai tout expliqué. Il m'a assuré qu'il m'aiderait et que je ne devrais pas m'inquiéter. Le Dr Ekpen ogiogun a ramené la joie dans ma vie et dans ma famille en me ramenant mon mari avec ses pouvoirs spirituels, en me faisant tomber enceinte, en guérissant le cancer de ma sœur, en guérissant également le virus du vih de ma cousine avec son spécial pouvoirs, et il a aussi fait gagner à mon beau-frère une loterie de 2 millions de dollars. Le Dr Ekpen ogiogu est vraiment un homme doué, incroyable et très bon qui sait vraiment comment mieux faire son travail et sinon pour lui, à quoi ressemblerait ma vie ? Dr Ekpen ogiogun, merci beaucoup et je n'arrêterai jamais de parler de vos grandes actions. Les mots ne peuvent exprimer tout le bien que vous avez fait pour moi et ma famille et je crois que même mille mots ne suffiront pas à décrire vos bonnes œuvres. Si vous avez besoin d'aide spirituelle, pourquoi ne pas courir chez le Dr Ekpen ogiogun ? contactez simplement le Dr Ekpen ogiogun sur son email: (ekpenogiogunspellcaster@gmail.com) Et il vous aidera. Le Dr Ekpen ogiogun est inoffensif, sûr et fiable, alors contactez-le maintenant et obtenez votre solution. Merci Dr Ekpen ogiogun. ekpenogiogunspellcaster@gmail.com ou son numéro Whatsapp. +2347045604010
commentaire n°16333 par Annette Mylan
Annette Mylan vendredi 4 novembre 2022, 07:16
Maintenant, vous pouvez arrêter votre rupture, votre divorce ou votre rejet amoureux… même si votre situation semble sans espoir ! J'ai contacté un vrai lanceur de sorts DR Prince qui m'a aidé à changer le cœur de mon mari pour qu'il m'aime et me veuille à nouveau, et il l'a vraiment fait et maintenant nous sommes très heureux ensemble. Si vous êtes ici et que votre amoureux vous refuse, je vous conseillerai de contacter DR Prince. La puissance de son sort est si efficace et peut réunir une relation brisée et peut également faire tomber enceinte, peu importe la situation et pas seulement cela, il a également le pouvoir de guérir tous les types de maladies dans un délai de 48 heures. je suis un grand témoignage. Contactez-le aujourd'hui et remerciez-moi plus tard. Vous pouvez également le contacter sur WHATSAPP : +18144484537 EMAIL : obinnaspelltemple@yahoo.com site web https://obinnaspelltemple.com
commentaire n°16640 par Mejte Dehaan
Mejte Dehaan vendredi 11 novembre 2022, 13:13
Soyez juste heureux ! Aimer et être aimé! Soyez la meilleure version de vous-même pour vous !!! . Je voulais juste partager une histoire de réussite ! Je viens de récupérer mon ex mari avec l'aide du DR Ilekhojie.. Depuis son sort de réconciliation, mon mari est revenu et il est fidèle et plus proche de moi qu'avant. Vous pouvez également le contacter et réparer votre relation WhatsApp : +2348147400259 E-mail : (gethelp05@gmail.com)
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré