Ajuda: implementando nosso mapa de eventos
Se você está consultando este tópico de ajuda, provavelmente é porque recebeu nosso Mapa de Eventos do Google Analytics para implementar no seu site, ou em algum site pelo qual você é o responsável pela manutenção, e que contratou nossos serviços de Mídia e Performance e/ou Web Analytics. Nesta altura é importante que esteja com o documento aberto na tela para consulta. Veja como localizar em quais páginas e áreas do site você deverá aplicar cada um dos eventos:
1. Usando a planilha
- A - "Página/ Área": um site pode conter uma ou muitas páginas. Portanto, para te dizer especificamente em qual página e área está o elemento no qual irá inserir a tag de eventos, tomamos o cuidado de especificar logo nesta primeira coluna. Digamos que o objeto onde o evento será inserido será o botão do campo de pesquisa que fica no cabeçalho da página do site que trata de "Dúvidas frequentes". Então, na coluna ficaria: "Dúvidas Frequentes/ Cabeçalho".
- B - "Componente" (ou "Ícone" - em mapas de versões anteriores): na coluna "A" você localizou a página e a área dela onde está o objeto que receberá o evento. Contudo, aquela área pode ter vários objetos. Exemplo: no cabeçalho da página "Dúvidas frequentes", além do campo de pesquisa no site pode haver o botão de busca, o menu de navegação do site, os ícones das redes sociais da empresa, etc. Portanto, para te orientar e te dar certeza sobre onde inserir o evento, na segunda coluna da planilha acima especificaremos exatamente qual será o objeto daquela página/ área. No exemplo da planilha acima, trata-se do link do menu que leva para o Blog.
- C - "Category": este é um parâmetro a ser declarado numa função JavaScript. O Google Analytics o interpretará como valor da variável "category". Logo abaixo, no tópico "aplicando os eventos no site" irá encontrar exemplo de código.
- D - "Action": este é um parâmetro a ser declarado numa função JavaScript. O Google Analytics o interpretará como valor da variável "action". Logo abaixo, no tópico "aplicando os eventos no site" irá encontrar exemplo de código.
- E - "Rótulo": este é um parâmetro a ser declarado numa função JavaScript. O Google Analytics o interpretará como valor da variável "label". Logo abaixo, no tópico "aplicando os eventos no site" irá encontrar exemplo de código.
2. Aplicando os eventos de clique no site
2.1. Direto no elemento (ícone):
Use a função onClick diretamente na linha de código do element, observando fielmente aos parâmetros passados na nossa planilha.
// com _ga
<a href="/blog/" onClick="ga('send','event','botao','click','blog');">Blog</a>// com _gtag
<a href="/blog/" onClick="gtag('event', 'EventoGeral',{'event_category': 'botao','event_action': 'click','event_label': 'blog'})">Blog</a>// em landing pages do RD Station (_gaq.push) seria assim. Mas não funcionará. Veja o tópico 2.2 ou 2.3 que é como funciona. E você fará em 'Edições avançadas'.
<a href="/blog/" onClick="_gaq.push(['_trackEvent', 'Landing RD', 'Click', 'Teste A - Agendamento',1]);">Blog</a>Caso o objeto já tenha outras ações de clique declaradas, saiba que é possível adicionar duas ou mais separando-as por ponto-e-vírgula (;). Exemplo abaixo:
\\ com _ga
<button onClick="ga('send','event','botao','click','blog');javascript:window.open('/blog/')">Blog</button>com _gtag
<button onClick="gtag('event', 'EventoGeral',{'event_category': 'botao','event_action': 'click','event_label': 'blog'});javascript:window.open('/blog/')">Blog</button>// em landing pages do RD Station (_gaq.push) seria assim. Mas não funcionará. Veja o tópico 2.2 ou 2.3 que é como funciona. E você fará em 'Edições avançadas'.
<button onClick="_gaq.push(['_trackEvent', 'Landing RD', 'Click', 'Teste A - Agendamento',1]);javascript:window.open('/blog/')">Blog</button>2.2. Via JQuery, instanciando pelo ID do elemento:
Caso queira fazer todas as implementações sem inserir códigos em linhas distintas da(s) página(s), também é possível fazer em um mesmo bloco em Java Script/ JQuery. Para tal, será necessário que os elementos sejam instanciados por uma ID exclusiva. Exemplo abaixo:
//com _ga
<a href="/blog/" id="bt-blog">Blog</a>
<a href="/blog/" id="bt-faleconosco">Fale Conosco</a>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#bt-blog").click(function(){
ga("send","event","botao","click","blog");
});
});
</script>
//com _gtag
<script type="text/javascript">
jQuery(document).ready(function(){
$("#bt-blog").click(function(){
gtag('event', 'EventoGeral',{'event_category': 'botao','event_action': 'click','event_label': 'blog'});
});
});
</script>
// em landing pages do RD Station (_gaq.push), na parte de 'Edições avançadas > Body'
<script type="text/javascript">
//exemplo abaixo de evento para um elemento de clique, cujo ID é 'bt-blog'
$("#bt-blog").click(function(){
_gaq.push(['_trackEvent', 'botao', 'Click', 'blog',1]);
});
</script>
2.3. Para um conjunto de componentes, Via JQuery, instanciando pela classe CSS comum a eles:
Algumas implementações de eventos podem ser feitas em lotes, usando-se classes CSS. Exemplo: digamos que o site contenha uma galeria de fotos contendo 20 imagens. Mas que não seja importante para o trabalho de Análise saber exatamente em qual houve cliques. Basta apenas saber que houve clique em uma das fotos da galeria. Neste caso, se cada uma das imagens possui a mesma classe CSS, é possível fazer uma implementação única via Java Script/ JQuery pela classe de estilo. Como abaixo:
//com _ga
<a href="#img1" class="galeria"><img src="img/foto1.jpg" alt="" title=""></a>
<a href="#img2" class="galeria"><img src="img/foto2.jpg" alt="" title=""></a>
<a href="#img3" class="galeria"><img src="img/foto3.jpg" alt="" title=""></a>
<a href="#img4" class="galeria"><img src="img/foto4.jpg" alt="" title=""></a>
<script type="text/javascript">
jQuery(document).ready(function(){
$(".galeria").click(function(){
ga("send","event","image","click","foto da galeria");
});
});
</script>
//com _gtag
<script type="text/javascript">
jQuery(document).ready(function(){
$(".galeria").click(function(){
gtag('event', 'EventoGeral',{'event_category': 'image','event_action': 'click','event_label': 'foto da galeria'});
});
});
</script>
// em landing pages do RD Station (_gaq.push), na parte de 'Edições avançadas > Body'
<script type="text/javascript">
//exemplo de aplicação em ul elemento de click pela classe CSS dele
$(".galeria").click(function(){
_gaq.push(['_trackEvent', 'image', 'Click', 'foto da galeria',1]);
});
</script>
2.4. Pelo Google Tag Manager:
Caso as tags do seu site sejam inseridas via container do Google Tag Manager, e você seja administrador ou editor do container, será necessário implementar os eventos através do próprio painel administrativo do GTM. Caso nunca tenha feito isso antes, consulte ajuda no Google "criando eventos no Google Tag Manager". Atenção: somente faça as alterações no container se possuir esta habilidade. Senão, considere contratar ou recomendar a contratação dos nossos especialistas. Elaboraremos uma proposta/ orçamento.
