Rodrigo Aguas

Muito se escuta sobre a importância da divulgação em redes sociais, como Facebook e Twitter, mas poucos sabem como mensurar o retorno desse marketing. A popularização do Google Analytics já foi uma enorme evolução sobre aqueles contadores ridículos e pré-históricos de acesso no estilo “Você é o 4362º visitante desse site”. Graças ao Google!

Entretanto, as pessoas utilizam o Google Analytics quase como se fosse apenas um contador de acesso um pouco mais avançado, onde você pode selecionar um intervalo de tempo e ver os acessos nele ou saber algumas informações a mais dos usuários, como navegador de internet, resolução de tela e etc.

Vou explicar nesse artigo como utilizar o Google Analytics para mensurar o retorno das suas campanhas de marketing online, ou seja, ter métricas eficazes sobre os acessos gerados por cada esforço de marketing. Além disso, possibilitar a comparação entre diferentes abordagens, chamado de teste A/B, e tomar decisões de marketing de forma a ter o melhor retorno de visitantes nas campanhas online baseando-se em números e não na intuição.

Tudo que veremos nesse artigo será relacionado à tela de Campanhas do Google Analytics, que fica dentro do item Origens em Fontes de Tráfego no menu lateral. Por enquanto essa tela estará vazia se você nunca utilizou campanhas, como a que segue abaixo. Mas ao fim já teremos dados de uma divulgação no Twitter e Facebook. Então vamos lá!

A estratégia utilizada para esse tipo de acompanhamento é introduzir em todos os links das campanhas de marketing online parâmetros com informações extras que serão utilizadas pelo Google Analytics para coletar e monitorar as estatísticas desejadas por nós. Esses parâmetros são: utm_medium, utm_source, utm_campaign e utm_content.

O utm_campaign define a qual campanha de marketing o link que estamos criando se refere. Uma campanha pode envolver diversas mídias e fontes de tráfego, como uma conjunto de propagandas em alguns sites, promoções em redes sociais e envío de newsletters, tudo fazendo parte de um único esforço de marketing. Os valores para utm_campaign são definidos por nós, mas aconselha-se a inclusão de algum formato de data para facilitar na análise dos relatórios. Podemos citar como exemplo: divulgacao-artigo-2011-11-20, newsletter-2011-12-07, twittada-2011-10-21, blog-rodrigoaguas e promocao-natal-2011.

O utm_medium é utilizado para definir a mídia utilizada. Ou seja, qual é o meio de comunicação ou mecanismo que estamos utilizando para atingir o nosso público e que conterá aquele link que estamos produzindo. Os valores podem ser definidos por nós mesmos, lembrando que eles serão exibidos nos relatórios. Alguns exemplos de utm_medium podem ser: email, banner, cpc (pay per click) e socialnetwork (compartilhamento em redes sociais).

O utm_source serve para definirmos exatamente de qual fonte pertence aquele tráfego, ou seja, considerando uma campanha online, em qual domínio aquele link foi publicado. Também podemos interpretar o utm_source como “quem” gerou aquele tráfego. Os valores também são definidos por nós mesmos. Exemplos de valores de utm_source podem ser: newsletter, twitter, facebook e rodrigoaguas.com.

O utm_content é um parâmetro opcional, mas muito interessante para experimentarmos estratégias ou abordagens distintas para uma mesma propaganda. Por exemplo, pequenas diferenças no texto enviado ou tamanho e posicionamento do banner. Essa técnica é chamada de teste A/B e tem como objetivo definir qual abordagem de propaganda dá melhor retorno. Seguem alguns exemplos: img-vertical-direita, banner-600×200, pergunta-retorica, afirmacao-positivista, texto-colorido e link-rodape.

Vamos então ao exemplo prático! Criarei uma campanha de divulgação no Twitter e no Facebook do último artigo desse blog, sobre virtualização de máquinas Ubuntu. O link original do artigo é http://www.rodrigoaguas.com/blog/virtualizacao-na-pratica-com-vmware-e-ubuntu/, mas tenho que acrescentar os parâmetros explicados acima para que o Google Analytics receba as informações sobre essa campanha de marketing. Utilizarei para divulgação no Twitter os seguintes valores:
Origem da campanha (utm_source): twitter
Mídia da campanha (utm_medium): social
Nome da campanha (utm_campaign): post-virtualizacao-ubuntu-2011-10-11

Então, o link a ser divulgado no Twitter fica:
http://www.rodrigoaguas.com/blog/virtualizacao-na-pratica-com-vmware-e-ubuntu/?utm_source=twitter&utm_medium=social&utm_campaign=post-virtualizacao-ubuntu-2011-10-11

Para o Facebook, basta trocarmos o valor do utm_source para facebook e temos o link a ser divulgado no Facebook:
http://www.rodrigoaguas.com/blog/virtualizacao-na-pratica-com-vmware-e-ubuntu/?utm_source=facebook&utm_medium=social&utm_campaign=post-virtualizacao-ubuntu-2011-10-11

Agora, podemos divulgá-los nas respectivas redes sociais:

Feito isso, basta aguardar os acessos e acessar o Google Analytics para saber o retorno da sua campanha. Caso queira testar imediatamente o funcionamento dos links, você precisa selecionar um  intervalo de datas no Google Analytics que contenha o dia atual ou utilizar a nova funcionalidade de tempo real. Abaixo, seguem as telas do Google Analytics com os relatórios desse exemplo prático. Na primeira temos listado as campanhas dessa conta, nesse caso, apenas a campanha de divulgação do post de virtualização utilizado no exemplo. Na segunda vemos mais detalhes da campanha, como o número de acessos por origem. Por último, temos uma tela do relatório de visitas em tempo real.

Para facilitar essa tarefa de criação de links, o Google disponibilizou uma ferramenta bem simples para criação desses links. Espero que tenham gostado e façam bom uso! Abraços.

Você publicou um site na internet há vários dias e ele não aparece nos resultados de pesquisa do Google? Não fique desesperado, você não está sozinho. Muitas pessoas já passaram por essa situação sem saber o que fazer para resolvê-la, inclusive eu. Recentemente publiquei o site de um serviço muito interessante de scrapbook fotográfico em que montam um estúdio de fotos na festa para os convidados serem fotografados com mensagens para os noivos e, posteriormente, é feito um álbum com as fotos. Então, como já resolvi o problema com o site, deixo aqui algumas dicas para fazer seu site ser indexado pelo Google e aparecer nos resultados.

A primeira coisa a se fazer é verificar se de fato o site não está no Google, pois dependendo da pesquisa que foi feita ele pode não estar aparecendo nas primeiras páginas, causando a impressão de que não está lá. Pequise no google pelo seu domínio, no meu caso seria da seguinte forma: site:rodrigoaguas.com. Caso tenha encontrado o seu site, significa que ele está indexado pelo Google, porém não consegue aparecer entre os primeiros resultados para as pesquisas feitas. Nessa situação é necessário otimizar o site para buscadores, um bom livro sobre o assunto é o “Search Engine Optimization (SEO): An Hour a Day“.

No meu caso, o site realmente não estava sendo exibido no Google. Após algumas pesquisas, percebi que o meu site não tinha um arquivo robots.txt na raiz. Esse arquivo indica aos crawlers dos mecanismos de busca quais páginas do seu site podem ou não podem ser exibidas por eles. Segue um exemplo de arquivo robots.txt:

Colocando esse arquivo na hospedagem, tentei novamente a busca no Google e lá estava o resultado!

O JQuery é uma biblioteca Javascript que simplifica extremamente a utilização de ajax, animações, tratamento de eventos e manipulação de elementos html em sites. A forma como se utiliza JQuery é um pouco diferente do que estamos acostumados no Javascript, mas essa mudança trouxe uma simplicidade incrível e compensa qualquer esforço necessário em seu aprendizado.

Uma instrução JQuery é composta por um seletor e um conjunto de operações a serem executadas nos elementos encontrados baseando-se no seletor. O seletor segue uma sintaxe muito parecida com a do CSS, acrescentando a esta alguns recursos. As operações disponíveis são tão variadas que é difícil conhecer todas, alguns exemplos são: acrescentar classe, alterar valor de atributo, replicar elemento, esvaziar conteúdo de um elemento, remover elementos da página, aplicar animações (como fade in e fade out), fazer requisições ajax, etc, etc, etc… Uma lista completa da API pode ser encontrada na documentação do JQuery. O trecho de código abaixo não é funcional, tem como objetivo apenas ilustrar as explicações dadas.

A palavra SELETOR está representando uma expressão utilizada para encontrar o conjunto de elementos da página que receberão a operação em questão. Ainda ilustrativamente, é comum o uso abaixo, quando são utilizadas diversas operações em um mesmo conjunto de elementos selecionados.

Antes de colocar as mão na massa é necessário importar o arquivo do JQuery colocando o seguinte código no elemento head da sua página:

Nosso primeiro exemplo não é muito interessante, mas explicará uma prática necessária na maioria dos códigos JQuery, e, como não poderia deixar de ser, será o famoso “Hello World”.

Você deve estar se perguntando que raios de Hello World complicado é esse e lhe dou razão, mas logo logo ficará mais claro. O que anteriormente chamei de seletor é sempre passado como parametro da função $, nesse caso estamos passando ‘document’, ou seja o elemento selecionado é o documento html. A operação utilizada é a ‘ready’, que serve para definir uma função a ser executada quando o documento está pronto (acabou de ser carregado, processado e exibido pelo navegador). Então, passamos como parametro da operação ‘ready’ uma função que exibirá uma janela alert. Os códigos JQuery a serem executados quando a página for carregada devem estar sempre dentro dessa função no código anterior, ou seja:

Agora estamos prontos para exemplos mais interessantes! No próximo exemplo colocaremos uma tabela com as cores de fundo das linhas alternadas, nos basearemos no seguinte trecho de código html:

A lógica que utilizaremos é selecionar primeiro os filhos do elemento identificado por ‘listrada’ que estejam nas posições pares e definir uma cor de fundo azul para eles:

Em seguida selecionamos os filhos do elemento identificado por ‘listrada’ que estejam nas posições impares e definimos uma cor de fundo verde para os mesmos:

Como não podemos esquecer do nosso primeiro exemplo, a versão final do código para a tabela listrada fica assim:

Se preferirmos não colocar estilo diretamente no Javascript, podemos definir estilos no css para as linhas usando classes e alterar o nosso código da seguinte maneira:

O próximo exemplo aprofunda as explicações sobre manipulação de eventos dos elementos. Colocaremos em todos os links de uma página qualquer uma janela alert sendo exibida ao usuário quando o mesmo clica sobre o link.

O seletor desse exemplo é bem simples, pesquisa por qualquer elemento A do documento html. Então, adiciona aos eventos onclick de todos os elementos selecionados uma chamada para a função que exibe a janela alert. Agora vamos melhorar o nosso código para impedir que a ação padrão do evento seja executada, para isso acrescentaremos um parametro à nossa função para receber um objeto que representa o evento.

Depois de ser impedido de sair do site, queremos que o nosso usuário fique impedido de clicar novamente no link, para isso faremos uma animação de Fade Out no link clicado e ele deixará de ser exibido. Precisaremos utilizar o seletor ‘this’ que representa o elemento onde o evento foi disparado.

Nesse tutorial foram tratados os aspectos básicos do JQuery como importação do arquivo da biblioteca, seletores, alteração de estilo, acrescentar classes, manipulação de eventos e animações. Tratarei de Ajax posteriormente em outro tutorial. Abraços!