2010-08-23 12:26:48 +00:00
<?xml version="1.0" encoding="utf-8"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" lang = "fr" xml:lang = "fr" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "keywords" content = "blog, javascript, jQuery, Google, analytics, analyser, utilisateur, asynchrone" >
< link rel = "shortcut icon" type = "image/x-icon" href = "/Scratch/img/favicon.ico" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/assets/css/main.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/twilight.css" / >
< link rel = "stylesheet" type = "text/css" href = "/Scratch/css/idc.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "http://feeds.feedburner.com/yannespositocomfr" / >
< link rel = "alternate" lang = "fr" xml:lang = "fr" title = "Analyser les clicks sur votre Site" type = "text/html" hreflang = "fr" href = "/Scratch/fr/blog/2010-06-17-track-events-with-google-analytics/" / >
< link rel = "alternate" lang = "en" xml:lang = "en" title = "Track Events with Google Analytics" type = "text/html" hreflang = "en" href = "/Scratch/en/blog/2010-06-17-track-events-with-google-analytics/" / >
< script type = "text/javascript" src = "/Scratch/js/jquery-1.3.1.min.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/jquery.cookie.js" > < / script >
< script type = "text/javascript" src = "/Scratch/js/index.js" > < / script >
< title > Analyser les clicks sur votre Site< / title >
< / head >
< body lang = "fr" >
< script type = "text/javascript" > / / < ! [ C D A T A [
document.write('< div id = "blackpage" > < img src = "/Scratch/img/loading.gif" alt = "Chargement en cours..." / > < / div > ');
// ]]>
< / script >
< div id = "content" >
< div id = "choix" >
< div class = "return" > < a href = "#entete" > ↓ Menu ↓ < / a > < / div >
< div id = "choixlang" >
< a href = "/Scratch/en/blog/2010-06-17-track-events-with-google-analytics/" onclick = "setLanguage('en')" > Switch to English< / a >
< / div >
< / div >
< div id = "titre" >
< h1 >
Analyser les clicks sur votre Site
< / h1 >
< h2 >
Utiliser Google Analytics comme un Pro
< / h2 >
< / div >
< div class = "flush" > < / div >
< div class = "flush" > < / div >
< div id = "afterheader" >
< div class = "corps" >
< p > Voici comment analyser tous les clics que font vos utilisateurs sur votre blog en incluant google analytics de façon asynchrone.< / p >
< p > Dans le html, il faut utiliser < a href = "http://jquery.com" > jQuery< / a > et un fichier que j’ ai appelé < code > yga.js< / code > :< / p >
< pre class = "twilight" >
< span class = "EmbeddedSource" > < span class = "EmbeddedSource" > < < / span > < span class = "MetaTagInline" > script< / span > < span class = "MetaTagInline" > type< / span > =< span class = "String" > < span class = "String" > " < / span > text/javascript< span class = "String" > " < / span > < / span > < span class = "MetaTagInline" > src< / span > =< span class = "String" > < span class = "String" > " < / span > jquery.js< span class = "String" > " < / span > < / span > < span class = "EmbeddedSource" > > < / span > < span class = "EmbeddedSource" > < /< / span > < span class = "MetaTagInline" > script< / span > < span class = "EmbeddedSource" > > < / span > < / span >
< span class = "EmbeddedSource" > < span class = "EmbeddedSource" > < < / span > < span class = "MetaTagInline" > script< / span > < span class = "MetaTagInline" > type< / span > =< span class = "String" > < span class = "String" > " < / span > text/javascript< span class = "String" > " < / span > < / span > < span class = "MetaTagInline" > src< / span > =< span class = "String" > < span class = "String" > " < / span > yga.js< span class = "String" > " < / span > < / span > < span class = "EmbeddedSource" > > < / span > < span class = "EmbeddedSource" > < /< / span > < span class = "MetaTagInline" > script< / span > < span class = "EmbeddedSource" > > < / span > < / span >
< / pre >
< p > Voici le contenu du fichier < code > yga.js< / code > :< / p >
< div class = "code" > < div class = "file" > < a href = "/Scratch/fr/blog/2010-06-17-track-events-with-google-analytics/code/yga.js" > ➥ yga.js < / a > < / div > < div class = "withfile" >
< pre class = "twilight" >
< span class = "Keyword" > $< / span > (< span class = "Support" > document< / span > ).ready( < span class = "Storage" > function< / span > () {
< span class = "Comment" > < span class = "Comment" > //< / span > add an event to all link for google analytics< / span >
< span class = "Keyword" > $< / span > (< span class = "String" > < span class = "String" > '< / span > a< span class = "String" > '< / span > < / span > ).< span class = "SupportFunction" > click< / span > (< span class = "Storage" > function< / span > () {
< span class = "Comment" > < span class = "Comment" > //< / span > tell analytics to save event< / span >
< span class = "Keyword" > try< / span > {
< span class = "Storage" > var< / span > identifier< span class = "Keyword" > =< / span > < span class = "Keyword" > $< / span > (< span class = "Variable" > this< / span > ).attr(< span class = "String" > < span class = "String" > '< / span > id< span class = "String" > '< / span > < / span > ) ;
< span class = "Storage" > var< / span > href< span class = "Keyword" > =< / span > < span class = "Keyword" > $< / span > (< span class = "Variable" > this< / span > ).attr(< span class = "String" > < span class = "String" > '< / span > href< span class = "String" > '< / span > < / span > )
< span class = "Storage" > var< / span > label< span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > " < / span > < span class = "String" > " < / span > < / span > ;
< span class = "Keyword" > if< / span > ( < span class = "Keyword" > typeof< / span > ( identifier ) < span class = "Keyword" > !< / span > < span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > '< / span > undefined< span class = "String" > '< / span > < / span > ) {
label< span class = "Keyword" > =< / span > label< span class = "Keyword" > +< / span > < span class = "String" > < span class = "String" > '< / span > [id]:< span class = "String" > '< / span > < / span > < span class = "Keyword" > +< / span > identifier
category< span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > '< / span > JSLink< span class = "String" > '< / span > < / span >
}
< span class = "Keyword" > if< / span > ( < span class = "Keyword" > typeof< / span > ( href ) < span class = "Keyword" > !< / span > < span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > '< / span > undefined< span class = "String" > '< / span > < / span > ) {
label< span class = "Keyword" > =< / span > label< span class = "Keyword" > +< / span > < span class = "String" > < span class = "String" > '< / span > [href]:< span class = "String" > '< / span > < / span > < span class = "Keyword" > +< / span > href
< span class = "Keyword" > if< / span > ( href[< span class = "Constant" > 0< / span > ] < span class = "Keyword" > ==< / span > < span class = "String" > < span class = "String" > '< / span > #< span class = "String" > '< / span > < / span > ) {
category< span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > '< / span > Anchor< span class = "String" > '< / span > < / span > ;
} < span class = "Keyword" > else< / span > {
category< span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > '< / span > Link< span class = "String" > '< / span > < / span > ;
}
}
_gaq.< span class = "SupportFunction" > push< / span > ([< span class = "String" > < span class = "String" > '< / span > _trackEvent< span class = "String" > '< / span > < / span > , category, < span class = "String" > < span class = "String" > '< / span > clicked< span class = "String" > '< / span > < / span > , label]);
< span class = "Comment" > < span class = "Comment" > //< / span > console.log('[tracked]: ' + category + ' ; clicked ; ' + label );< / span >
}
< span class = "Keyword" > catch< / span > (err) {
< span class = "Entity" > console< / span > < span class = "SupportFunction" > .log< / span > (err);
}
< span class = "Comment" > < span class = "Comment" > //< / span > pause to allow google script to run< / span >
< span class = "Storage" > var< / span > date < span class = "Keyword" > =< / span > < span class = "Keyword" > new< / span > < span class = "Entity" > Date< / span > ();
< span class = "Storage" > var< / span > curDate < span class = "Keyword" > =< / span > < span class = "Constant" > null< / span > ;
< span class = "Keyword" > do< / span > {
curDate < span class = "Keyword" > =< / span > < span class = "Keyword" > new< / span > < span class = "Entity" > Date< / span > ();
} < span class = "Keyword" > while< / span > (curDate< span class = "Keyword" > -< / span > date < span class = "Keyword" > < < / span > < span class = "Constant" > 300< / span > );
});
});
< span class = "Storage" > var< / span > _gaq < span class = "Keyword" > =< / span > _gaq < span class = "Keyword" > ||< / span > [];
_gaq.< span class = "SupportFunction" > push< / span > ([< span class = "String" > < span class = "String" > '< / span > _setAccount< span class = "String" > '< / span > < / span > , < span class = "String" > < span class = "String" > '< / span > UA-XXXXXXXX-1< span class = "String" > '< / span > < / span > ]);
_gaq.< span class = "SupportFunction" > push< / span > ([< span class = "String" > < span class = "String" > '< / span > _trackPageview< span class = "String" > '< / span > < / span > ]);
(< span class = "Storage" > function< / span > () {
< span class = "Storage" > var< / span > ga < span class = "Keyword" > =< / span > < span class = "Support" > document< / span > .< span class = "SupportFunction" > createElement< / span > (< span class = "String" > < span class = "String" > '< / span > script< span class = "String" > '< / span > < / span > ); ga.< span class = "SupportConstant" > type< / span > < span class = "Keyword" > =< / span > < span class = "String" > < span class = "String" > '< / span > text/javascript< span class = "String" > '< / span > < / span > ; ga.async < span class = "Keyword" > =< / span > < span class = "Constant" > true< / span > ;
ga.< span class = "SupportConstant" > src< / span > < span class = "Keyword" > =< / span > (< span class = "String" > < span class = "String" > '< / span > https:< span class = "String" > '< / span > < / span > < span class = "Keyword" > ==< / span > < span class = "Support" > document< / span > .< span class = "SupportConstant" > location< / span > .< span class = "SupportConstant" > protocol< / span > ? < span class = "String" > < span class = "String" > '< / span > https://ssl< span class = "String" > '< / span > < / span > : < span class = "String" > < span class = "String" > '< / span > http://www< span class = "String" > '< / span > < / span > ) < span class = "Keyword" > +< / span > < span class = "String" > < span class = "String" > '< / span > .google-analytics.com/ga.js< span class = "String" > '< / span > < / span > ;
< span class = "Storage" > var< / span > s < span class = "Keyword" > =< / span > < span class = "Support" > document< / span > .< span class = "SupportFunction" > getElementsByTagName< / span > (< span class = "String" > < span class = "String" > '< / span > script< span class = "String" > '< / span > < / span > )[< span class = "Constant" > 0< / span > ]; s.< span class = "SupportConstant" > parentNode< / span > .< span class = "SupportFunction" > insertBefore< / span > (ga, s);
})();
< / pre >
< / div > < / div >
< p > Remplacez le : < code > UA-XXXXXXXX-1< / code > par votre code google analytics. Maintenant l’ installation est finie.< / p >
< p > Pour l’ utiliser il suffit de se rendre dans google analytics rubrique < code > Content< / code > puis < code > Event Tracking< / code > comme sur la capture d’ écran suivante :< / p >
< p > < img alt = "Where to find events tracking in google analytics interface" src = "/Scratch/img/blog/2010-06-17-track-events-with-google-analytics/GA_events.png" / > < / p >
< p > Joyeuse inspection du comportement de vos utilisateurs.< / p >
< / div >
< div id = "choixrss" >
< a id = "rss" href = "http://feeds.feedburner.com/yannespositocomfr" >
s'abonner
< / a >
< / div >
< script type = "text/javascript" >
$(document).ready(function(){
$('#comment').hide();
$('#clickcomment').click(showComments);
});
function showComments() {
$('#comment').show();
$('#clickcomment').fadeOut();
}
document.write('< div id = "clickcomment" > Commentaires< / div > ');
< / script >
< div class = "flush" > < / div >
< div class = "corps" id = "comment" >
< h2 class = "first" > commentaires< / h2 >
< noscript >
< / noscript >
< script type = "text/javascript" >
var idcomments_acct = 'a307f0044511ff1b5cfca573fc0a52e7';
var idcomments_post_id = '/Scratch/fr/blog/2010-06-17-track-events-with-google-analytics/';
var idcomments_post_url = 'http://yannesposito.com/Scratch/fr/blog/2010-06-17-track-events-with-google-analytics/';
< / script >
< span id = "IDCommentsPostTitle" style = "display:none" > < / span >
< script type = 'text/javascript' src = '/Scratch/js/genericCommentWrapperV2.js' > < / script >
< / div >
< div id = "entete" class = "corps_spaced" >
< div id = "liens" >
< ul > < li > < a href = "/Scratch/fr/" > Acceuil< / a > < / li >
< li > < a href = "/Scratch/fr/blog/" > Blog< / a > < / li >
< li > < a href = "/Scratch/fr/about/" > À propos< / a > < / li >
< li > < a href = "/Scratch/fr/contact/" > Contact< / a > < / li > < / ul >
< / div >
< div class = "flush" > < / div >
< hr / >
< div id = "next_before_articles" >
< div id = "previous_articles" >
articles précédents
< div class = "previous_article" >
< a href = "/Scratch/fr/blog/2010-06-15-Get-my-blog-engine/" > ← Récupérez mon système de blog< / a >
< / div >
< div class = "previous_article" >
< a href = "/Scratch/fr/blog/2010-06-14-multi-language-choices/" > ← choix liés à l'écriture dans plusieurs langues< / a >
< / div >
< div class = "previous_article" >
< a href = "/Scratch/fr/blog/2010-05-24-Trees--Pragmatism-and-Formalism/" > ← Arbres ; Pragmatisme et Formalisme< / a >
< / div >
< / div >
< div id = "next_articles" >
articles suivants
< div class = "next_article" >
< a href = "/Scratch/fr/blog/2010-06-17-hide-yourself-to-analytics/" > Se cacher de ses statistiques web→ < / a >
< / div >
< div class = "next_article" >
< a href = "/Scratch/fr/blog/2010-06-19-jQuery-popup-the-easy-way/" > Comment faire des popups en jQuery rapidement→ < / a >
< / div >
< div class = "next_article" >
< a href = "/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/" > Cappuccino ou jQuery ?→ < / a >
< / div >
< / div >
< div class = "flush" > < / div >
< / div >
< / div >
< div id = "bottom" >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by-sa/3.0/deed.fr" > Droits de reproduction ©, Yann Esposito< / a >
< / div >
< div id = "lastmod" >
2010-08-31 13:06:43 +00:00
Écrit le : 17/06/2010
2010-09-02 09:51:46 +00:00
modifié le : 17/06/2010
2010-08-23 12:26:48 +00:00
< / div >
< div >
Site entièrement réalisé avec
< a href = "http://www.vim.org" > Vim< / a >
et
< a href = "http://nanoc.stoneship.org" > nanoc< / a >
< / div >
< div >
< a href = "/Scratch/fr/validation/" > Validation< / a >
< a href = "http://validator.w3.org/check?uri=referer" > [xhtml] < / a >
.
< a href = "http://jigsaw.w3.org/css-validator/check/referer?profile=css3" > [css] < / a >
.
< a href = "http://validator.w3.org/feed/check.cgi?url=http%3A//yannesposito.com/Scratch/fr/blog/feed/feed.xml" > [rss]< / a >
< / div >
< / div >
< div class = "clear" > < / div >
< / div >
< / body >
< / html >
