246 lines
No EOL
17 KiB
HTML
246 lines
No EOL
17 KiB
HTML
<?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>
|
||
<!--[if lt IE 9]>
|
||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||
<![endif]-->
|
||
<title>Analyser les clicks sur votre Site</title>
|
||
</head>
|
||
<body lang="fr" class="article">
|
||
<script type="text/javascript">// <![CDATA[
|
||
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')">in English</a>
|
||
</div>
|
||
<div class="flush"></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>
|
||
Vous devez activer javascript pour commenter.
|
||
</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/">Bienvenue</a></li>
|
||
<li><a href="/Scratch/fr/blog/">Blog</a></li>
|
||
<li><a href="/Scratch/fr/softwares/">Softwares</a></li>
|
||
<li><a href="/Scratch/fr/about/">À propos</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/"><span class="nicer">«</span> 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/"><span class="nicer">«</span> 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/"><span class="nicer">«</span> 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 <span class="nicer">»</span></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 <span class="nicer">»</span></a>
|
||
</div>
|
||
|
||
|
||
<div class="next_article">
|
||
<a href="/Scratch/fr/blog/2010-07-05-Cappuccino-and-Web-applications/">Cappuccino ou jQuery ? <span class="nicer">»</span></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">
|
||
Écrit le : 17/06/2010
|
||
modifié le : 17/06/2010
|
||
</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> |