2021-04-18 10:23:24 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > YBlog - Track Events with Google Analytics< / title >
< meta name = "keywords" content = "blog, javascript, jQuery, Google, analytics, analyser, User, Asynchronous" / >
< link rel = "shortcut icon" type = "image/x-icon" href = "../../../../Scratch/img/favicon.ico" / >
2021-05-25 20:25:47 +00:00
< link rel = "stylesheet" type = "text/css" href = "/css/y.css" / >
< link rel = "stylesheet" type = "text/css" href = "/css/legacy.css" / >
< link rel = "alternate" type = "application/rss+xml" title = "RSS" href = "/rss.xml" / >
2021-04-18 10:23:24 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "apple-touch-icon" href = "../../../../Scratch/img/about/FlatAvatar@2x.png" / >
<!-- [if lt IE 9]>
< script src = "http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" > < / script >
<![endif]-->
<!-- IndieAuth -->
< link href = "https://twitter.com/yogsototh" rel = "me" >
< link href = "https://github.com/yogsototh" rel = "me" >
< link href = "mailto:yann.esposito@gmail.com" rel = "me" >
< link rel = "pgpkey" href = "../../../../pubkey.txt" >
< / head >
< body lang = "en" class = "article" >
< div id = "content" >
< div id = "header" >
< div id = "choix" >
< span id = "choixlang" >
< a href = "../../../../Scratch/fr/blog/2010-06-17-track-events-with-google-analytics/" > French< / a >
< / span >
< span class = "tomenu" > < a href = "#navigation" > ↓ Menu ↓< / a > < / span >
< span class = "flush" > < / span >
< / div >
< / div >
< div id = "titre" >
< h1 > Track Events with Google Analytics< / h1 >
< h2 > Asynchronous Complete Google Analytics with jQuery< / h2 >
< / div >
< div class = "flush" > < / div >
< div id = "afterheader" class = "article" >
< div class = "corps" >
< p > Here is how to track all clicks on your website using google analytics asynchronously.< / p >
< p > First in your < sc > html< / sc > you need to use < a href = "http://jquery.com" > jQuery< / a > and a javscript file I named < code > yga.js< / code > :< / p >
< div class = "sourceCode" id = "cb1" > < pre class = "sourceCode html" > < code class = "sourceCode html" > < a class = "sourceLine" id = "cb1-1" title = "1" > < span class = "kw" > < script< / span > < span class = "ot" > type=< / span > < span class = "st" > " text/javascript" < / span > < span class = "ot" > src=< / span > < span class = "st" > " jquery.js" < / span > < span class = "kw" > > < /script> < / span > < / a >
< a class = "sourceLine" id = "cb1-2" title = "2" > < span class = "kw" > < script< / span > < span class = "ot" > type=< / span > < span class = "st" > " text/javascript" < / span > < span class = "ot" > src=< / span > < span class = "st" > " yga.js" < / span > < span class = "kw" > > < /script> < / span > < / a > < / code > < / pre > < / div >
< p > And here is the < code > yga.js< / code > file:< / p >
< div class = "sourceCode" id = "cb2" > < pre class = "sourceCode javascript" > < code class = "sourceCode javascript" > < a class = "sourceLine" id = "cb2-1" title = "1" > < span class = "at" > $< / span > (document).< span class = "at" > ready< / span > ( < span class = "kw" > function< / span > () < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-2" title = "2" > < span class = "co" > // add an event to all link for google analytics< / span > < / a >
< a class = "sourceLine" id = "cb2-3" title = "3" > < span class = "at" > $< / span > (< span class = "st" > 'a'< / span > ).< span class = "at" > click< / span > (< span class = "kw" > function< / span > () < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-4" title = "4" > < span class = "co" > // tell analytics to save event< / span > < / a >
< a class = "sourceLine" id = "cb2-5" title = "5" > < span class = "cf" > try< / span > < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-6" title = "6" > < span class = "kw" > var< / span > identifier< span class = "op" > =< / span > < span class = "at" > $< / span > (< span class = "kw" > this< / span > ).< span class = "at" > attr< / span > (< span class = "st" > 'id'< / span > ) < span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-7" title = "7" > < span class = "kw" > var< / span > href< span class = "op" > =< / span > < span class = "at" > $< / span > (< span class = "kw" > this< / span > ).< span class = "at" > attr< / span > (< span class = "st" > 'href'< / span > )< / a >
< a class = "sourceLine" id = "cb2-8" title = "8" > < span class = "kw" > var< / span > label< span class = "op" > =< / span > < span class = "st" > " " < / span > < span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-9" title = "9" > < span class = "cf" > if< / span > ( < span class = "kw" > typeof< / span > ( identifier ) < span class = "op" > !=< / span > < span class = "st" > 'undefined'< / span > ) < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-10" title = "10" > label< span class = "op" > =< / span > label< span class = "op" > +< / span > < span class = "st" > '[id]:'< / span > < span class = "op" > +< / span > identifier< / a >
< a class = "sourceLine" id = "cb2-11" title = "11" > category< span class = "op" > =< / span > < span class = "st" > 'JSLink'< / span > < / a >
< a class = "sourceLine" id = "cb2-12" title = "12" > < span class = "op" > }< / span > < / a >
< a class = "sourceLine" id = "cb2-13" title = "13" > < span class = "cf" > if< / span > ( < span class = "kw" > typeof< / span > ( href ) < span class = "op" > !=< / span > < span class = "st" > 'undefined'< / span > ) < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-14" title = "14" > label< span class = "op" > =< / span > label< span class = "op" > +< / span > < span class = "st" > ' [href]:'< / span > < span class = "op" > +< / span > href< / a >
< a class = "sourceLine" id = "cb2-15" title = "15" > < span class = "cf" > if< / span > ( href[< span class = "dv" > 0< / span > ] < span class = "op" > ==< / span > < span class = "st" > '#'< / span > ) < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-16" title = "16" > category< span class = "op" > =< / span > < span class = "st" > 'Anchor'< / span > < span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-17" title = "17" > < span class = "op" > }< / span > < span class = "cf" > else< / span > < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-18" title = "18" > category< span class = "op" > =< / span > < span class = "st" > 'Link'< / span > < span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-19" title = "19" > < span class = "op" > }< / span > < / a >
< a class = "sourceLine" id = "cb2-20" title = "20" > < span class = "op" > }< / span > < / a >
< a class = "sourceLine" id = "cb2-21" title = "21" > < span class = "va" > _gaq< / span > .< span class = "at" > push< / span > ([< span class = "st" > '_trackEvent'< / span > < span class = "op" > ,< / span > category< span class = "op" > ,< / span > < span class = "st" > 'clicked'< / span > < span class = "op" > ,< / span > label])< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-22" title = "22" > < span class = "co" > // console.log('[tracked]: ' + category + ' ; clicked ; ' + label );< / span > < / a >
< a class = "sourceLine" id = "cb2-23" title = "23" > < span class = "op" > }< / span > < / a >
< a class = "sourceLine" id = "cb2-24" title = "24" > < span class = "cf" > catch< / span > (err) < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-25" title = "25" > < span class = "va" > console< / span > .< span class = "at" > log< / span > (err)< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-26" title = "26" > < span class = "op" > }< / span > < / a >
< a class = "sourceLine" id = "cb2-27" title = "27" > < / a >
< a class = "sourceLine" id = "cb2-28" title = "28" > < span class = "co" > // pause to allow google script to run< / span > < / a >
< a class = "sourceLine" id = "cb2-29" title = "29" > < span class = "kw" > var< / span > date < span class = "op" > =< / span > < span class = "kw" > new< / span > < span class = "at" > Date< / span > ()< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-30" title = "30" > < span class = "kw" > var< / span > curDate < span class = "op" > =< / span > < span class = "kw" > null< / span > < span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-31" title = "31" > < span class = "cf" > do< / span > < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-32" title = "32" > curDate < span class = "op" > =< / span > < span class = "kw" > new< / span > < span class = "at" > Date< / span > ()< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-33" title = "33" > < span class = "op" > }< / span > < span class = "cf" > while< / span > (curDate< span class = "op" > -< / span > date < span class = "op" > < < / span > < span class = "dv" > 300< / span > )< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-34" title = "34" > < span class = "op" > }< / span > )< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-35" title = "35" > < span class = "op" > }< / span > )< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-36" title = "36" > < / a >
< a class = "sourceLine" id = "cb2-37" title = "37" > < span class = "kw" > var< / span > _gaq < span class = "op" > =< / span > _gaq < span class = "op" > ||< / span > []< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-38" title = "38" > < span class = "va" > _gaq< / span > .< span class = "at" > push< / span > ([< span class = "st" > '_setAccount'< / span > < span class = "op" > ,< / span > < span class = "st" > 'UA-XXXXXXXX-1'< / span > ])< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-39" title = "39" > < span class = "va" > _gaq< / span > .< span class = "at" > push< / span > ([< span class = "st" > '_trackPageview'< / span > ])< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-40" title = "40" > < / a >
< a class = "sourceLine" id = "cb2-41" title = "41" > (< span class = "kw" > function< / span > () < span class = "op" > {< / span > < / a >
< a class = "sourceLine" id = "cb2-42" title = "42" > < span class = "kw" > var< / span > ga < span class = "op" > =< / span > < span class = "va" > document< / span > .< span class = "at" > createElement< / span > (< span class = "st" > 'script'< / span > )< span class = "op" > ;< / span > < span class = "va" > ga< / span > .< span class = "at" > type< / span > < span class = "op" > =< / span > < span class = "st" > 'text/javascript'< / span > < span class = "op" > ;< / span > < span class = "va" > ga< / span > .< span class = "at" > async< / span > < span class = "op" > =< / span > < span class = "kw" > true< / span > < span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-43" title = "43" > < span class = "va" > ga< / span > .< span class = "at" > src< / span > < span class = "op" > =< / span > (< span class = "st" > 'https:'< / span > < span class = "op" > ==< / span > < span class = "va" > document< / span > .< span class = "va" > location< / span > .< span class = "at" > protocol< / span > < span class = "op" > ?< / span > < span class = "st" > 'https://ssl'< / span > : < span class = "st" > 'http://www'< / span > ) < span class = "op" > +< / span > < span class = "st" > '.google-analytics.com/ga.js'< / span > < span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-44" title = "44" > < span class = "kw" > var< / span > s < span class = "op" > =< / span > < span class = "va" > document< / span > .< span class = "at" > getElementsByTagName< / span > (< span class = "st" > 'script'< / span > )[< span class = "dv" > 0< / span > ]< span class = "op" > ;< / span > < span class = "va" > s< / span > .< span class = "va" > parentNode< / span > .< span class = "at" > insertBefore< / span > (ga< span class = "op" > ,< / span > s)< span class = "op" > ;< / span > < / a >
< a class = "sourceLine" id = "cb2-45" title = "45" > < span class = "op" > }< / span > )()< span class = "op" > ;< / span > < / a > < / code > < / pre > < / div >
< p > Replace the: < code > UA-XXXXXXXX-1< / code > by your google analytics code and you’ re done.< / p >
< p > To see what occurs, simply go in < code > Content< / code > and < code > Event Tracking< / code > as shown in the following screenshot:< / p >
< div >
< img src = "../../../../Scratch/img/blog/2010-06-17-track-events-with-google-analytics/GA_events.png" alt / >
< / div >
< p > Happy tracking!< / p >
< / div >
< div id = "afterarticle" >
< div id = "social" >
2021-05-25 20:25:47 +00:00
< a href = "/rss.xml" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > RSS< / a >
2021-04-18 10:23:24 +00:00
·
< a href = "https://twitter.com/home?status=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2010-06-17-track-events-with-google-analytics/%20via%20@yogsototh" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > Tweet< / a >
·
< a href = "http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fyannesposito.com/Scratch/en/blog/2010-06-17-track-events-with-google-analytics/" target = "_blank" rel = "noopener noreferrer nofollow" class = "social" > FB< / a >
< br / >
< a class = "message" href = "../../../../Scratch/en/blog/Social-link-the-right-way/" > These social sharing links preserve your privacy< / a >
< / div >
< div id = "navigation" >
< a href = "../../../../" > Home< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/blog" > Blog< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/softwares" > Softwares< / a >
< span class = "sep" > ¦< / span >
< a href = "../../../../Scratch/en/about" > About< / a >
< / div >
< div id = "totop" > < a href = "#header" > ↑ Top ↑< / a > < / div >
< div id = "bottom" >
< div >
Published on 2010-06-17
< / div >
< div >
< a href = "https://twitter.com/yogsototh" > Follow @yogsototh< / a >
< / div >
< div >
< a rel = "license" href = "http://creativecommons.org/licenses/by/3.0/deed.en_US" > Yann Esposito©< / a >
< / div >
< div >
Done with
< a href = "http://www.vim.org" target = "_blank" rel = "noopener noreferrer nofollow" > < strike > Vim< / strike > < / a >
< a href = "http://spacemacs.org" target = "_blank" rel = "noopener noreferrer nofollow" > spacemacs< / a >
< span class = "pala" > & < / span >
< a href = "http://nanoc.ws" target = "_blank" rel = "noopener noreferrer nofollow" > < strike > nanoc< / strike > < / a >
< a href = "http://jaspervdj.be/hakyll" target = "_blank" rel = "noopener noreferrer nofollow" > Hakyll< / a >
< / div >
< hr / >
< div style = "max-width: 100%" >
< a href = "https://cardanohub.org" >
< img src = "../../../../Scratch/img/ada-logo.png" class = "simple" style = "height: 16px ;
border-radius: 50%;
vertical-align:middle;
display:inline-block;" />
ADA:
< / a >
< code style = "display:inline-block;
word-wrap:break-word;
text-align: left;
vertical-align: top;
max-width: 85%;">
DdzFFzCqrhtAvdkmATx5Fm8NPJViDy85ZBw13p4XcNzVzvQg8e3vWLXq23JQWFxPEXK6Kvhaxxe7oJt4VMYHxpA2vtCFiP8fziohN6Yp
< / code >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >