10/02/2012

Monitorar e Contar Cliques em Links Externos - Eventos Google Analytics

Você pode monitorar os links externos do seu site ou blog e saber quantos cliques cada link de parceiro ou banner de anúncios recebeu. Para ter essas informações só precisamos configurar o Google Analytics no blog e poderemos saber exatamente quantas pessoas clicaram em cada link do nosso blog ou site e assim poder planejar melhor o posicionamento de links ou preços de anúncios no blog.
monitorar cliques em links com o Analytics

Para começar a monitorar os links externos com o Google analytics é fácil de fazer e como esse é um contador de visitas grátis você não gastará nada para ter essas informações. Então vamos mostrar como instalar os códigos do analytics para analisar os links externos do blogspot.

O primeiro passo é saber se o código do seu Google Analytics está completo e atualizado ele deve ser assim:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_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); })();
</script>

Esse trecho é apenas para verificar você não precisa nem deve adicioná-lo novamente no seu blog se já tiver. Agora entre na pagina editar html, procure por </head> e coloque esse código antes dele:

<script type="text/javascript">
function recordOutboundLink(link, category, action) {
try {
var pageTracker=_gat._getTracker("UA-XXXXX-X");
pageTracker._trackEvent(category, action);
setTimeout('document.location = "' + link.href + '"', 100)
}catch(err){}
}
</script>

No lugar onde está UA-XXXXX-X é para colocar a ID do seu site no analytics que você pode ver no código do analytics como no exemplo inicial, se tiver duvidas sobre qual a numeração correta veja aqui Blogger Integra Contador Google Analytics. Esse código atrasa o link, ou seja, faz demorar um décimo de segundo para entrar no site quando clicar no link. A utilidade disso é garantir que o Google Analytics terá tempo para contar o clique naquele link especifico. Então depois que colocar o código clique para salvar as alterações do HTML.

Agora vamos colocar o código para monitorar e contar cliques nos links. Normalmente o link é deste jeito:
<a href='http://www.dicasparablogs.com.br'>Dicas para Blogs</a>

Então você deve adicionar alguns códigos e o link ficará deste jeito:

<a href="http://www.dicasparablogs.com.br" onClick="recordOutboundLink(this, 'Links Externos', 'Dicas para Blogs');return false;">


São apenas duas alterações que precisará fazer aqui:
Links Externos – é um titulo para agrupar os links e será desta forma você poderá separar os links por categorias, por exemplo: parceiros, publicidade e outros que precisar.

Dicas para Blogs – isso é o nome especifico deste link e será dessa forma que você o encontrará nas estatísticas do Google analytics. Portanto você pode escrever o nome do site ou o endereço dele isso só depende de como preferir ver nas estatísticas.

Dando outro exemplo para monitorar um link para o nosso site de frases curtas o código ficaria assim:

<a href="http://www.frasescurtas.com.br" onClick="recordOutboundLink(this, 'Links Externos', 'Frases Curtas');return false;">

Então faça as alterações em todos os links que deseja contar os cliques. Nós testamos e funcionou também em links com imagens.

Mas finalmente onde posso ver as estatísticas e saber quantos cliques em links para fora do meu blog foram feitos? Isso é na pagina do Google analytics entrando no menu conteúdo > eventos > principais eventos.
contar cliques em links

Veja que temos o evento links externos que é o marcador que usamos se você utilizar mais categorias elas aparecem aqui separadamente e clicando nela poderá ver os cliques de cada link.
analisar links de parceiros

E clicando no sub item paginas nos eventos você poderá saber de quais paginas do seu site ou blog partiram os links nesses links externos.
monitorar eventos google analytics

Veja aqui outras formas de aproveitar melhor os recursos do Google analytics:
Usar Informações do Contador de Visitas para Melhorar o Blog
Estatísticas Botões de Compartilhamento - Curtir, Retweet, +1 e Outros

E você já conhecia essa função do analytics? Esperamos que gostem e aproveitem para conseguir mais informações úteis para ajudar a melhorar o blog.
Related Posts with Thumbnails

75 comentários:

  1. achei muito bom... faz tempo que procuro algo isso

    ResponderExcluir
  2. Fabiano como posso colocar uma imagem na frente do titulo da postagem,e com fotos diferentes para cada autor ?

    aguardo resposta...

    ResponderExcluir
  3. Olá Fabiano. Gostaria de saber, como se faz para usar a fonte Comic Sans MS na areá de comentarios, quando você está na Home. Se nao intendeu, me refiro a isso Escrito por Fabiano Roberto às 16:11 1 Comentários

    Tutoriais sobre: Configurações Avançadas, Contador de Visitas, Mais visitas, Seo, Sites Úteis. Na area 1 Comentários, apresenta-se esta fonte.

    ResponderExcluir
  4. Fala, Fabiano!

    Cara, o slide do meu blogger ficou em branco de repente, do nada. Veja:
    http://www.leituraesportiva.com.br

    Pior que eu tenho outros dois endereços blogspot de teste, que estão com o mesmo template. Até ontem, nesses dois endereços e no meu site, o slide funcionava corretamente. Hoje o slide desse template não funciona em nenhum endereço.

    Será que é problema do servidor?

    Você sabe como faço pra responder?

    Obrigado e abraço!

    ResponderExcluir
  5. ImOrTaL_SiEgHaRt

    veja aqui: Mostrar Imagem Diferente para Cada Autor da Postagem no Blogger

    Iguinho__- HQ

    é formatando o estilo .post-comment-link a.

    o nosso está assim:

    .post-comment-link a{font-size: 12pt;float: right;letter-spacing: 1px;margin-right:10px;display:block;font-family: "Comic Sans MS"}
    .post-comment-link a:hover{text-decoration: underline overline;}

    e os marcadores tente fazer o mesmo mas com o estilo
    .post-labels a

    ResponderExcluir
  6. Wilson Hebert
    não tenho certeza sobre isso, mas na minha opinião esse problema no feed está atrapalhando muitos blogs, nem o google está indexando as postagens mais recentes.

    espero que o blogger resolva isso logo.

    ResponderExcluir
  7. Pois é, cara. Eu já fui no Simplex Design, que é o site onde baixei o template e vi que no link de demonstração, o slide também não funciona. Inclusive tem outro brasileiro lá também reclamando a mesma coisa que eu...

    Só resta aguardar, né...

    Um abração e parabéns por sempre responder seus leitores! Me tornei visitante assíduo do seu site por isso.

    ResponderExcluir
  8. mais eu quero deixar do lado esquerdo da postagem,num sei se vc ja viu isso que eu to falando,mas se eu dexar assim ficará embaixo...quero do lado do titulo d a postagem!!!

    ResponderExcluir
  9. Gostei dessa função, também conheço o abre.ai um encurtador de links que também conta os cliques.

    Abraços!!!

    ResponderExcluir
  10. ImOrTaL_SiEgHaRt
    se usar o código antes do post.body, ficará antes do texto.

    não é ao lado do titulo mas é bem proximo.

    se quiser procurar no html o código do titulo do post é data:post.title, mas não tenho como dizer o lugar exato para colocar o código pois os templates são diferentes

    ResponderExcluir
  11. Fabiano,


    Ao clicar no contador online do amung, você tem muitas opções com saber de onde é as pessoas que estão visitando seu Blog e tem como ver ports que FORAM copiados do seu Blog... Se eu cadastrar tem como ver mais opções de tudo que foi copiado?

    ResponderExcluir
  12. Gostaria de colocar a data em minhas postagens do blog, junto a hora da mesam. Mas já fiz de tudo, cliquei nas opções de layout da postagem, tentei adicionar os códigos e nada, pode me ajudar?

    ResponderExcluir
  13. Fabiano quando coloca códigos antes de /head o blog fica mais lento, se colocar antes de /body também funciona?

    Abraços!!!

    ResponderExcluir
  14. Rosiel T.S.
    não testei antes de body.
    o que fica mais lento é o link, mas é um decimo de segundo ou seja ninguém vai perceber.


    Anônimo
    tentou colocar a hora onde? não entendi sua pergunta

    ResponderExcluir
  15. No meu blogger, mesmo com as opções selecionadas, para apareçer a data e hora da postagem, ela não apareçe. Tentei adicionar os códigos correspondentes e tbm não funcionou.

    ResponderExcluir
  16. Eu já uso o Analytics a muito tempo, antes de usar no meu blog já usava em três outros sites meus, mas realmente não conhecia essa função.

    Com a função "Google Analytics na página" da pra ver os clicks em links em porcentagem mas desse jeito é mais preciso.

    Veleu pela dica

    ResponderExcluir
  17. Anônimo
    se tiver outro blog pode usar para comparar o html proximo das postagens e procurar o erro.

    mas se for um desses templates que baixa da internet pode ter códigos nele gerando erros e isso é muito dificil de corrigir

    ResponderExcluir
  18. como que coloca o código 'onClick="recordOutboundLink(this, 'Links Externos', 'Frases Curtas');return false;">' num link que contém imagem com complementos de "target_blank", "title="?

    ResponderExcluir
  19. o target=blank não tem como funcionar ,mas o trecho title funciona do mesmo jeito:

    < a href="http://www.dicasparablogs.com.br" title="dicas para blogs" onClick="recordOutboundLink(this, 'Links Externos', 'Dicas para Blogs');return false;" >

    ResponderExcluir
  20. Ah é por isso que o target=blank ficava de fora da imagem!
    ii, então isto não tem importancia nenhuma, pois todos os links do meu blog tem este complemento!
    Obg por responder.

    ResponderExcluir
  21. Como Colocar para contar os clik´s em um banner de imagem ?

    ResponderExcluir
  22. é praticamente igual ao link de texto, veja:

    < a href="http://www.dicasparablogs.com.br/p/lista-de-tutoriais.html" onClick="recordOutboundLink(this, 'Links Externos', 'Dicas para Blogs');return false;" >< img src="http://1.bp.blogspot.com/_-v7nVhXnPEc/SmzwP5crumI/AAAAAAAAAUc/LRfITC6TwvM/s400/dicas2.jpg" border="0" / >< /a >

    ResponderExcluir
  23. E PARA ELE ABRIR EM UMA NOVA GUIA ? PODE USAR TARGET BLANK ?

    ResponderExcluir
  24. infelizmente o target blank não funciona junto com esse código

    ResponderExcluir
  25. Olá Fabiano Consegui fazer para ele abrir em uma nova guia

    o código do analytics que você disponibilizou foi esse:


    <***script type="text/javascript" >
    function recordOutboundLink(link, category, action) {
    try {
    var pageTracker=_gat._getTracker("UA-XXXXX-X");
    pageTracker._trackEvent(category, action);
    setTimeout('document.location = "' + link.href + '"', 100)
    }catch(err){}
    }


    mais para eles abrirem em uma nova guia é só substituir o

    setTimeout('document.location = "' + link.href + '"', 100)

    pelo

    setTimeout(function(){window.open(link.href);}, 100)

    ou seja ele tem que ser assim

    <***script type="text/javascript">
    function recordOutboundLink(link, category, action) {
    try {
    var pageTracker=_gat._getTracker("UA-XXXXX-X");
    pageTracker._trackEvent(category, action);
    setTimeout(function(){window.open(link.href);}, 100)
    }catch(err){}
    }



    =P

    ResponderExcluir
  26. iPedro Martins
    muito bom, sem duvida é mais util abrir os links em uma nova janela

    ResponderExcluir
  27. Fabiano não entendi direito, para colocar em um link tem que colocar assim?

    <a href="http://www.dicasparablogs.com.br/" onclick="recordOutboundLink(this, 'Parceiros', 'Dicas para Blogs');return false;"><a href="http://www.dicasparablogs.com.br/" >Dicas para Blogs</a></a>

    E tem como colocar o nofollow?

    Abraços!!!

    ResponderExcluir
  28. Rosiel T.S.
    poderia colocar assim:

    < a href="http://www.dicasparablogs.com.br/" rel='nofollow' onclick="recordOutboundLink(this, ......

    ResponderExcluir
  29. Não entendi muito bem... Onde é que eu irei colocar esse codigo?

    ResponderExcluir
  30. o monitoramente é em duas partes.

    um código você coloca no html do seu blog e outra em cada link que deseja monitorar

    ResponderExcluir
  31. Fabiano eu tenho que colocar o script do Google Analytics ou se coloca só a ID la em "Configurações" → "Outros" → "Google Analytics" também funciona?

    ResponderExcluir
  32. Rosiel
    não testei desse jeito que você falou, mas deve funcionar

    mas coloque o código antes do < /head > para atrasar o link

    ResponderExcluir
  33. Fabiano achei um jeito de coloca o rel='nofollow' e target='_blank' automático, nessa parte

    setTimeout('document.location = "' + link.href + '"', 100)

    é só colocar assim

    setTimeout('document.location = "' + link.href + rel='nofollow' + target='_blank' '"', 100)

    ResponderExcluir
  34. eu não tinha feito esse teste.

    mas o importante é que funcionou

    ResponderExcluir
  35. Fabiano:

    Gostei muito do seu blog. Pra quem não tem intimidade com os HTML's e CSS's da vida, suas dicas são muito importantes. Por isso criei um espaço na barra lateral do meu blog, o Dando Pitacos, só pra recomendar trabalhos como o seu. O Dando Pitacos não é nenhuma Brastemp mas pode ajudar na divulgação.

    Perdoe a minha ignorância, mas apenas para confirmar: basta adicionar os dois códigos mostrados acima para saber que parceiro acessou minha página?

    Parabéns pelo blog!

    ResponderExcluir
  36. Carlos Roberto
    é ao contrário.

    você vai saber quantas pessoas que visitaram sua pagina clicaram naquele link que modificou, por exemplo, se usar esse tutorial no seu blog e colocar o link:

    < a href="http://www.dicasparablogs.com.br" onClick="recordOutboundLink(this, 'Links Externos', 'Dicas para Blogs');return false;" >

    saberá quantas pessoas clicaram no link Dicas para Blogs e vieram para minha pagina.

    e não quando entraram na sua pagina a partir do Dicas para blogs

    ResponderExcluir
  37. Entendi, Fabiano!

    O meu problema, não sei se você pode me ajudar, está no sistema de parcerias que criei, que é o adotado hoje pela maioria dos blogs.

    O "parceiro" copia e cola o meu banner no seu blog, que "será automaticamente monitorado através do Google Analytics, e a partir de um determinado número de visitas, aparecerá na nossa página principal, em atualizações que ocorrem quinzenalmente".

    Aí surge o meu drama: como fazer esse monitoramento. Onde encontrar esses dados no Google Analytics?

    Você pode me ajudar?

    Um abraço...

    ResponderExcluir
  38. Carlos Roberto
    na pagina do google analytics você pode ver as fontes de trafego lá mostra quais sites enviaram visitas para o seu blog e assim pode criar sua lista de top parceiros.

    mas isso não tem nada a ver com os códigos que mostramos aqui.

    para fazer essa lista de top parceiros usando o analytics não precisa de nada só o código do analytics no seu blog.

    ResponderExcluir
  39. Olá Fabiano! Eu não consegui colocar esse codigo auxiliar do link... Estou fazendo primeiro num blog de testes!
    testei em uma postagem com 3 links, mas quando mudou do HTML pra escrita, o codigo adicionado antes some! e não consigo ver os resultados, nem os marcadores no analytics.
    queria saber também, se eu posso colocar em qualquer link do blog.
    obg

    ResponderExcluir
  40. caaaami está tentando usar dentro das postagens? acho que tem que publicar na guia html e deixar marcada a opção de executar o html.

    mas só fiz testes usando gadgets

    ResponderExcluir
  41. Fabiano como colocar um contador de cliques em uma imagem, sem que ela abra uma página, apenas um contador com o números de cliques que o leitor clicou naquela imagem, igual ao botão curtir do Facebook só que com imagens, por favor, se puder me ajudar!!! Abraço!!!

    ResponderExcluir
  42. Júnnyor Grigolo se quiser contar os cliques para você ver e analisar seu site esse código do tutorial funciona perfeitamente para links externos ou internos no seu blog.

    mas não tenho código para mostrar os cliques em imagens

    ResponderExcluir
  43. Obrigado mesmo assim Fabiano!! Valeu pela resposta! vou tentar aplicar esse código no meu blog!

    ResponderExcluir
  44. Rodei rodei e voltei pra cá, o jeito é usar estes códigos aí, vou tentar encaixar no meu blog.

    ResponderExcluir
  45. Cara, estou fazendo algo errado. Vamos lá:

    Antes do /head>

    Colei o primeiro código fornecido pelo Google Analytcs.

    Segundo, colei o código aqui do site com a ajuda que o iPedro Martins deu, ficando assim:


    < ***script type='text/javascript'>
    function recordOutboundLink(link, category, action) {
    try {
    var pageTracker=_gat._getTracker("UA-32468491-1");
    pageTracker._trackEvent(category, action);
    setTimeout(function(){window.open(link.href);}, 100)
    }catch(err){}
    }
    <***/script>


    Por fim, colei o código do próprio link, mas ficou desta forma:

    <***div class="separator" style="clear: both; text-align: center;">
    Site: <***a href="http://www.dicasparablogs.com.br" onClick="recordOutboundLink(this, 'Links Externos', 'Dicas para Blogs');return false;">Dicas para Blogs<***/a><***/div>

    Cliquei para testar, e fui até o site do Google Analytcs, e não achei nada. Lembrando que o Google Analytcs está com um layout novo. E se trata do meu Blogger.

    PS: Códigos sem asteriscos (***)

    ResponderExcluir
  46. Adler Santos normalmente o analytics mostra os dados do dia anterior, então aguarde mais um dia para verificar as estatisticas

    depois é só entrar na pagina do analytics em conteudo > eventos; como mostramos na ultima imagem do tutorial.

    ResponderExcluir
  47. ok, pena que só vai dar 24hrs amanhã de manhã... eu passei 14 horas sem parar arrumando o blog e fiz quase nada rsrs. Mas vlw! Vou aguardar!

    ResponderExcluir
  48. Fera acabei de visualizar o Analytcs e deu certo!

    Obrigado!

    ResponderExcluir
  49. fabiano uma pequena duvida que estou sobre meus parceiros hoje eu to recebendo mais de 30 visitas diárias de um parceiro meu mais o blog dele nem tem muito conteúdo e nem tem muito acesso sem contar que o modelo é muito ruim e eu estou achando que ele mesmo está clicando no meu banner para subir de categoria no meu blog se ele clicar muitas vezes no meu banner e entrar todas as vezes no blog o meu Google analytics contará como visita toda vez que ele ficar clicando no banner ?

    ResponderExcluir
  50. Johni dos Santos sim, cada vez que alguém entrar no seu blog conta a visita.

    infelizmente no caso que falou acho que não tem como saber quais são cliques de visitantes ou se o proprio dono do blog está fazendo isso.

    ResponderExcluir
  51. então quer dizer se ele clicar 30 vezes no meu banner que se encontra no blog dele, no meu google analytics aparecera que ele me enviou 30 visitas ?

    ResponderExcluir
  52. sim é isso mesmo.

    mas nas fontes de trafego é possivel você ver mais detalhes de cada site que enviou visitas.

    entre em fontes de trafego > origens > referencias

    você verá uma lista dos sites que enviaram visitas, clique neste blog que falou.

    depois na pagina só com as visitas dele veja que tem um botão acima da lista com as estatisticas escrito dimensão segundária.

    lá você pode ver qual a resolução de tela das visitas que esse site enviou. ou seja se quase todas as visitas tiverem a mesma resolução provavelmente foram do mesmo computador.

    além disso nesta pagina você pode ver a duração de visita e outras informações que ajudam a saber se a pessoa ficou mesmo no seu blog ou só entrou e saiu.

    ResponderExcluir
  53. Fabiano eu não entendi onde colocar o segundo codico.

    Eu sei que o 1°primeiro é pra colocar no html do blog, mais o segundo?

    é pra colar em uma postagem ou gadgets?

    ResponderExcluir
  54. Dentro da postagem onde tem "links Anexados"?

    ResponderExcluir
  55. em qualquer lugar que colocar links em forma de html, por exemplo o código

    < a href="http://www.dicasparablogs.com.br" onClick="recordOutboundLink(this, 'Links Externos', 'Dicas para Blogs');return false;" >dicas para blogs< / a >

    eu posso usar em uma postagem ou gadget de html/javascript

    ResponderExcluir
  56. [aaa] entendi agora, obrigado fabiano pelo sua ajuda. ^^

    ResponderExcluir
  57. Fabiano, onde eu coloco o código para monitorar e contar cliques nos links?

    ResponderExcluir
  58. Darlan Marques esse código se divide em duas partes uma é para colocar no html do seu blog e a outra no proprio link

    veja também esse outro tutorial sobre: Campanhas do Google Analytics: Analisar a Divulgação do seu Blog
    .

    ResponderExcluir
  59. Tenho o Google Analytics em meu blog, porém a estatística do número de click vem sempre zerada. Fiz o passo-a-passo que você ensina aqui em sua página mas não sei onde colocar o "código para monitorar e contar cliques nos links", já adicionado dos códigos que você colocou. Seria no Gadget Html de meu blog? Caso negativo, onde seria?
    Grata,
    Ana POrto
    Nit Portal Social

    ResponderExcluir
  60. Nit Portal Social mas as outras estatisticas do analytics funcionam?

    se não veja aqui:
    Corrigir Problemas com a Integração do Google Analytics no Blogger

    ResponderExcluir
  61. Bom dia Fabiano !
    Veriquei o código do google analytcs no código fonte e o mesmo está instalado. Depois coloquei o código para montorar cliques no html de meu blog, ok. E agora onde coloco o link ? Coloquei dentro do gadget : html/javascript. Está certo? Tambem quero saber onde posso ver o resultado dentro do analytcs ? Quero monitorar um banner que instalei em meu blog que redireciona para outro.

    Att,

    Marcos

    ResponderExcluir
  62. o link pode ser num gadget de html/javacript como você falou ou dentro de uma postagem

    ResponderExcluir
  63. Obrigado Fabiano pela informação.

    ResponderExcluir
  64. Demora pra aparecer? Coloquei os códigos, mas não apareceu nada ainda lá nos eventos principais.

    ResponderExcluir
  65. demora um dia para aparecer nas estatisticas do analytics

    ResponderExcluir
  66. -- -- HEEEELP -- --


    EU TENHO QUE COLOCAR ESSES DOIS SCRIPTS DENTRO DO MEU CODIGO????????
    EU NAO ENTENDI.. HELPP !!

    ResponderExcluir
  67. um script é no html e o outro no código do link.

    aquele primeiro que mostramos é apenas para verificar se você já tem que é o código do analytics

    ResponderExcluir
  68. CALMA AI, NO CODIGO DO LINK QUE VC DIZ É O ??
    dentro dele eu coloco o que ??

    dentro do head eu coloco qual ??

    ResponderExcluir
  69. esse trecho é para colocar no html do blog
    function recordOutboundLink(link, category, action....

    e esse outro dentro do código de cada link que deseja monitorar
    onClick="recordOutboundLink(this, 'Links Externos', 'Frases Curtas');return false;"


    ResponderExcluir
  70. perfeito, apenas mais uma duvida!
    esse codigo vai monitorar a visita no site tambem ?

    pois eu quero monitorar alem dos links, q ele conte tbm o site !!

    ResponderExcluir
  71. esse código funciona para links internos do seu blog, mas eu prefiro usar as campanhas do analytics, veja aqui:
    Campanhas do Google Analytics: Analisar a Divulgação do seu Blog

    ResponderExcluir
  72. Dá para medir também a contagem de cliques em banners? Obrigado!

    ResponderExcluir
    Respostas
    1. sim é possivel usar esse código em banners, veja mais aqui na ajuda do analytics

      https://support.google.com/analytics/answer/1136920?hl=pt-BR

      lá também mostra com texto mas é só trocar o texto pelo código da imagem

      Excluir