Event Tracking Google Analytics

Lucas Cavalcanti

Front-end Engineer

at: MGR Tech

O que veremos:

1. O que é o GA?
2. O que é Event Tracking?
3. Vantagens
4. Como configurar?
5. Utilizando o _trackPageview
6. Utilizando o _trackEvent
7. Tracking Scroll Page
8. Tracking nas Redes Sociais
9. Como testar?

O que é GA?

Ferramenta do Google de análise de sites.

O que é o Event Tracking?

Event Tracking ( Rastreamento de Evento ) é um método do GA de rastreamento de código, que pode-se usar para registrar eventos do usuário fazendo interações com a página, possibilitando ter uma análise geral de como o usuário usou o seu site.

Vantagens

Configurando

Basta utilizar o código que o GA disponibiliza, e colocar no Head

						
							var _gaq = _gaq || [];
						    _gaq.push(['_setAccount', 'UA-xxxxxxx-xx']);
						    _gaq.push(['_trackPageview']);
						    (function() {
						        var ga = document.createElement('script');
						 		ga.type = 'text/javascript'; ga.async = true;
						        ga.src = ('https:' == document.location.protocol
						 		? 'https://ssl' : 'http://www')
						 		+ '.google-analytics.com/ga.js';
						        var s = document.getElementsByTagName('script')[0];
						 		s.parentNode.insertBefore(ga, s);
						    })();
						
					

_trackPageview

_trackPageview

					
					
					_gaq.push(['_trackPageview', '/lucascavalcanti/blog/portfolio']);
					
					
					

_trackEvent

_trackEvent

					
					
					_gaq.push(['_trackEvent', 'Videos', 'Play', 'Video_Principal']);
					
					
					

Tracking Scroll Page

					
					function ScrollPx ( ) {
						// pega a altura da janela e a posicao do scroll relacionado ao topo da janela.
						var bottom_px = jQuery(window).height() + jQuery(window).scrollTop();
						return bottom_px;
					}

					jQuery(window).scroll(function(){
						var scrollPx = ScrollPx();
						// flags
						var flag_px_800 = 0,
							flag_px_1200 = 0;

						if(scrollPx >= 800 && scrollPercent <= 900){
							if(flag_px_800 == 0){
								flag_px_800 = 1;
								_gaq.push(['_trackEvent', 'scroll', '800px']);     }
							}
							else if(scrollPercent > 1200){
								if(flag_px_1200 == 0){
									flag_px_1200 = 1;
									_gaq.push(['_trackEvent', 'scroll', '1200px']);       
								}
							}
						});
					
					

Tracking Redes Sociais

Tracking Redes Sociais

				    
					window.fbAsyncInit = function() {
					//like
					FB.Event.subscribe('edge.create', function(UrlLink) {
						_gaq.push(['_trackEvent', 'facebook', 'like',UrlLink]);
					});
					
					//unlike
					FB.Event.subscribe('edge.remove', function(targetUrl) {
						_gaq.push(['_trackEvent', 'facebook', 'unlike', targetUrl]);
					});
					
					//send
					FB.Event.subscribe('message.send', function(targetUrl) {
						_gaq.push(['_trackEvent', 'facebook', 'send',targetUrl]);
					});
					}
				    
					

Tracking Redes Sociais

				    
					// tweet
					twttr.events.bind('tweet', function(){
						_gaq.push(['_trackEvent', 'twitter', 'tweet']);
					});

					// retweet
					twttr.events.bind('retweet', function(){
						_gaq.push(['_trackEvent', 'twitter', 'retweet']);
					});

					// follow
					twttr.events.bind('follow', function(){
						_gaq.push(['_trackEvent', 'twitter', 'follow']);
					});
				    
					

E como a gente testa?

E como a gente testa?

Plugin do Google Chrome:

Plugin para o Firefox:

Links:

• eventTrackerGuide
• Tracking Social

Valeuuu feras!