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
44 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°12036 par Anais Marini
Anais Marini mardi 8 mars 2022, 13:37
Votre mari ou votre petit ami vous a-t-il quitté pour une autre femme ? contact : Le Dr Emwanta est certainement le meilleur lanceur de sorts et son résultat est garanti à 100 %. J'ai 42 ans. Mon mari m'a quitté pour une autre femme il y a 3 mois et depuis lors, ma vie a été remplie de douleurs, de chagrin et de chagrin parce qu'il était mon premier amour avec qui j'ai passé toute ma vie. Un de mes amis m'a dit qu'il avait vu des témoignages d'un lanceur de sorts appelé. Dr Emwanta qu'il peut ramener un amant dans les 48 heures, j'en ris et j'ai dit que je ne suis pas intéressé mais à cause de l'amour que mon amie avait pour moi, elle a consulté le grand Dr Emwanta en mon nom et à ma plus grande surprise après 48 heures plus tard, mon mon mari m'a appelé pour la toute première fois après trois mois qu'il me manque et qu'il est tellement désolé pour tout ce qu'il m'a fait traverser. Il est revenu vers moi et maintenant nous sommes heureux ensemble. Je n'arrive toujours pas à y croire, car c'est très incroyable. Merci Dr Emwanta d'avoir ramené mon amant et aussi à ma charmante amie qui a intercédé en mon nom, je recommande vraiment fortement Dr Emwanta. Pour tous ceux qui ont des problèmes en ce moment, voici son contact, envoyez-lui un e-mail à: (dremwanta@gmail.com) ou WhatsApp +2348163136916, bonne chance toujours à vous tout sourire émotion
commentaire n°12223 par Rose
Rose lundi 21 mars 2022, 07:57
Je n'avais jamais cru au lancement de sorts jusqu'à ce que je rencontre le Dr Ogbetta, un lanceur de sorts puissant qui m'a aidé à redevenir une personne heureuse. Je m'appelle Rose, après 4 ans de mariage brisé, mon mari m'a laissé deux enfants. J'avais l'impression que ma vie était sur le point de se terminer et j'ai failli me suicider, j'étais émotionnellement déprimée pendant très longtemps. Grâce à un grand lanceur de sorts appelé Dr Ogbetta que j'ai rencontré en ligne un jour fatidique alors que je naviguais sur Internet, j'ai rencontré de nombreux témoignages sur ce grand lanceur de sorts particulier sur la façon dont il a aidé tant de gens. il a aidé des gens à ramener leur ancien amant, certains ont témoigné qu'il restaure l'utérus, guérit le cancer et d'autres maladies, etc. Je suis également tombé sur un témoignage, il s'agissait d'une femme appelée Anita, elle a témoigné de la façon dont son sort l'a rendue enceinte après tant d'années de nudité et à la fin de son témoignage, elle a laissé tomber l'adresse e-mail du Dr Ogbetta. Après avoir lu tout cela, j'ai décidé d'essayer et je l'ai contacté et lui ai expliqué mon problème et il m'a assuré que mon mari m'appellerait et demanderait pardon mais je pensais que cela ne fonctionnerait pas. Quand il eut fini de lancer le sort, le lendemain, mon mari m'a appelé et il demandait pardon, comme l'a dit le Dr Ogbetta. Ce n'est pas un lavage de cerveau et après que le sort a été lancé, j'ai réalisé que mon mari m'aimait comme jamais auparavant et le lanceur de sorts l'a ouvert pour savoir combien je l'aime et combien d'amour nous devons partager. Nous sommes encore plus heureux maintenant qu'avant. Le Dr Ogbetta est vraiment un homme doué et je n'arrêterai pas de le publier car c'est un homme merveilleux. Si vous avez un problème et que vous cherchez un vrai lanceur de sorts pour résoudre tous vos problèmes, contactez le Dr Ogbetta maintenant sur drogbettaspellhome@gmail.com ou whatsapp : +2349067874181
commentaire n°12636 par Annie Nathalie
Annie Nathalie lundi 9 mai 2022, 21:14
Bonjour, je m'appelle Annie Nathalie. La vie n'a plus de sens lorsque vous perdez votre être cher et combattez un traumatisme émotionnel qui devient insupportable. Merci au DR ISIKOLO qui est venu à mon aide et m'a fourni une solution lorsque tout espoir était perdu. Sous mes yeux, mon homme m'a quitté pour une autre femme et j'ai essayé par tous les moyens de le récupérer mais je n'ai jamais réussi. J'ai dû chercher de l'aide jusqu'à ce que je découvre le DR Isikolo. Il m'a donné le maximum d'attention et de soutien dont j'avais besoin et il a fait de son mieux et a ramené mon homme vers moi et le résultat qui se manifeste après 48 heures m'étonne toujours. Maintenant, notre amour et notre bonheur ont été ravivés et fonctionnent mieux pour nous. Ne paniquez plus car le DR ISIKOLO peut aussi vous aider. Envoyez-lui simplement un SMS via WhatsApp +2348133261196 ou envoyez-lui un e-mail via: isikolosolutionhome@gmail.com
commentaire n°12692 par sanne willem
sanne willem mercredi 11 mai 2022, 21:10
Je suis l'une des trop nombreuses personnes ici à témoigner au monde que le Dr Isikolo est en effet un homme de bon cœur qui fait de son mieux pour aider les gens même lorsque tout espoir est perdu dans la recherche d'une solution à leurs problèmes. Mes propres problèmes ne diffèrent vraiment pas des autres parce que j'ai retrouvé mon fiancé après 48 heures lorsque le Dr Isikolo a travaillé pour moi. Je n'ai pas pu supporter le chagrin quand j'ai su que j'avais perdu mon fiancé au profit d'une autre femme. J'étais perdu dans le noir et je suis reconnaissant à Dieu que des gens honnêtes comme le Dr Isikolo existent vraiment juste pour essuyer les larmes des visages de ceux qui ont le cœur brisé. Je suis 100% garanti et assuré qu'il ne vous décevra pas lorsque vous chercherez son aide pour trouver des solutions à vos problèmes conjugaux ou relationnels ou à d'autres problèmes liés à la vie. Envoyez-lui simplement un e-mail via: isikolosolutionhome@gmail.com Vous pouvez également le WhatsApp au +234-813 326 1196.
commentaire n°12757 par Giovanni Jahem
Giovanni Jahem vendredi 13 mai 2022, 21:15
Je m'appelle Giovanni Jahem. J'ai traversé des moments difficiles avec différents hommes qui ont trouvé le véritable amour et une véritable acceptation jusqu'à ce que je rencontre mon mari qui est entré dans ma vie et m'a aimé au-delà des mots. Nous avons vécu ensemble pendant 2 ans et nous étions heureux jusqu'à ce que trop de disputes éclatent et que nous nous séparions. Je pensais que je pouvais passer à autre chose mais j'ai réalisé que j'étais profondément amoureuse de lui et que j'avais besoin de lui pour toujours. Je n'avais pas d'autre choix que de demander de l'aide, ce qui m'a amené à contacter le Dr Isikolo sachant comment il a pu aider les autres. Il m'a accordé son attention et a fait de son mieux pour nous réconcilier et en 48 heures, le résultat s'est manifesté et il est revenu vers moi et nous avons réconcilié les choses. Maintenant, l'amour et le bonheur ont été restaurés et tout ce que je peux dire, c'est que j'apprécie vraiment le Dr Isikolo pour son altruisme en m'aidant, moi et les autres. Son contact email : isikolosolutionhome@gmail.com Vous pouvez également le WhatsApp au 2348133261196.
commentaire n°12871 par Monalisa
Monalisa lundi 16 mai 2022, 22:12
Je m'appelle Monalisa Landeka. Hors de l'abondance de joie, mon cœur fait l'éloge du DR ISIKOLO. Il est venu à mon secours quand ma vie a été ruinée pendant des mois. Mon amant m'a quitté pour une autre femme et je ne savais pas qu'il était contrôlé par l'esprit et hypnotisé, j'ai fait tout ce que j'ai pu pour le faire revenir vers moi, mais en vain. Il a quitté la ville avec la dame et je n'ai jamais entendu parler de lui ni même ne l'ai revu. Je suis allé chercher de l'aide en ligne quand j'ai lu comment le DR ISIKOLO avait aidé d'autres femmes qui avaient les mêmes problèmes. Je l'ai contacté et il m'a dit tout ce qu'il fallait faire, ce que j'ai respecté. Comme il l'avait promis, l'amour et le bonheur que j'ai partagés avec mon partenaire ont été restaurés et il a été purifié du charme sombre qu'ils avaient placé sur lui et m'est revenu après 48 heures. DR ISIKOLO est honnête pour aider les gens et il peut vous aider si vous décidez aujourd'hui de le contacter. Son contact email : isikolosolutionhome@gmail.com Vous pouvez également le WhatsApp via : (+234-813 326 1196)
commentaire n°12901 par Arabella Matej
Arabella Matej mardi 17 mai 2022, 21:16
Salut tout le monde. Je m'appelle Arabella Matej et je suis ici pour remercier le grand Dr Isikolo d'avoir réglé mes problèmes conjugaux. Mon mariage s'est effondré en raison de problèmes et de difficultés sans fin que j'avais avec mon mari. Il est parti sans se retourner et j'ai été seule pendant tant de mois. Sa famille est intervenue et toujours rien n'a changé. J'ai été détruit émotionnellement et j'ai perdu l'espoir de retrouver l'amour parce qu'il était tout ce que j'avais toujours voulu chez un homme. Comme tant de gens, j'ai connu le DR ISIKOLO lorsque j'ai commencé à chercher de l'aide. Nous avons longuement discuté de mes problèmes et il m'a assuré d'obtenir la solution dont j'avais besoin. Je n'avais pas d'autre choix que de me conformer à ses procédures et il n'a rien retardé. Il a fait un lien de réunion d'amour pour moi et mon mari et l'amour et le bonheur que nous partagions ont été restaurés et il m'a atteint exactement après 48 heures comme le DR ISIKOLO l'avait promis. Il est en effet un assistant merveilleux et il est digne de confiance. si vous avez des problèmes, envoyez-lui simplement un SMS via WhatsApp +2348133261196 ou envoyez-lui un e-mail via: isikolosolutionhome@gmail.com
commentaire n°12931 par Daniela Tafre
Daniela Tafre jeudi 19 mai 2022, 21:30
L'amour reste incroyable lorsque vous êtes avec votre âme sœur et le bonheur pour toujours est assuré pour vous deux. DR ISIKOLO m'a fait réaliser que vous pouvez récupérer ce que signifie la vie belle pour vous juste au moment où j'ai perdu espoir de récupérer mon homme et il me l'a rendu. Nous avions une relation compliquée et nous nous disputions tout le temps et il a laissé le cœur brisé et j'étais misérable. Le DR ISIKOLO est entré en scène après plusieurs tentatives pour le reconquérir et a échoué. Il a rétabli l'amour et la connexion entre moi et mon homme et juste après 48 heures, nous avons eu un rendez-vous et discuté et maintenant nous prévoyons de nous marier et de vivre heureux ensemble pour toujours. Les mots ne peuvent exprimer ma gratitude envers le DR ISIKOLO et tous ceux qui ont fait l'éloge de lui n'ont jamais menti à son sujet car il est en effet digne de confiance. Contactez-le aujourd'hui et laissez-le vous aider aussi. email : (isikolosolutionhome@gmail.com) ou envoyez-lui un SMS via WhatsApp : (+234-813 326 1196)
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.
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é