Como configurar o código de rastreamento

  • Banco de conhecimento
  • Criador de sites responsivos
  • Como configurar o código de rastreamento
  • Suporte > Criador de sites responsivo > Avançado

Visão Geral

A configuração de um código de rastreamento permite acompanhar e analisar as atividades dos visitantes. Existem muitos provedores de análises e soluções de rastreamento disponíveis online. Este artigo explica como adicionar algumas das soluções de rastreamento mais usadas ao seu site responsivo, como Gerenciador de tags do Google, Google Analytics, rastreamento do Google AdWords e pixels de rastreamento do Facebook. Essa é uma configuração muito avançada, então é bom pedir ajuda de um desenvolvedor para implementar o código.

Informação importante

Para seguir os próximos guias, você precisa ter os snippets de código dos diferentes serviços. Os guias explicam como implementar o código, mas não a finalidade, as práticas recomendadas ou a facilidade de uso dele. É recomendável que você conheça bem esses serviços antes da implementação. Para isso, é bom ler discussões online sobre as soluções de rastreamento disponíveis no site deles, ou fazendo uma pesquisa na web.

Gerenciador de tags do Google

Como adicionar o Gerenciador de tags do Google

O código do Gerenciador de tags que você recebe do Google deve se parecer com os snippets abaixo. Existem duas partes nesse código, uma seção "script" e uma seção "noscript". Essa diferença se tornará importante mais adiante neste guia. Nota: o código abaixo é apenas um exemplo e não deve ser copiado para o seu site. Peça o código correto para o Google.

Seção de script Seção NoScript

<!-- Gerenciador de tags do Google -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- Fim do Gerenciador de tags do Google -->

<!-- Gerenciador de tags do Google (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- Fim do Gerenciador de tags do Google (noscript) -->

1. Você primeiro precisará acessar a seção cabeçalho global. Clique em "Configurações" no menu esquerdo e selecione a subseção "HTML do cabeçalho".

2. Coloque a parte "script" do código do gerenciador de tags na seção "Cabeçalho HTML" e clique em Salvar. 

Nota: todo o código acima é apenas um exemplo — não o copie diretamente no seu site. Certifique-se de obter o código correto do Gerenciador de tags do Google.

3. Navegue até o "modo de desenvolvedor" clicando no </> símbolo na barra superior.

4. Expanda a seção "Site HTML/CSS" e clique na seção "body-end.html" Coloque a parte "noscript" do código nesta seção. Em seguida, clique em Salvar.

Notas e considerações para o Gerenciador de tags do Google

  • O Google recomenda colocar o código "noscript" no início da seção "body". Essa é uma solução alternativa que o Google sugere para contornar as limitações de navegadores da web muito antigos que não carregam o código do cabeçalho.
  • A seção body-end.html do modo de desenvolvedor trabalha para adicionar o código "noscript".
  • Para saber mais sobre como configurar o Tag Manager na sua conta do Google, peça a ajuda do Google.

Monitoramento Google AdWords

Adicionar o rastreamento do Google AdWords

O código de rastreamento do Google AdWords que você recebe do Google deve ser semelhante à imagem abaixo.


Nota: todo o código abaixo é apenas um exemplo — não o copie diretamente no seu site. Certifique-se de obter o código de rastreamento correto do Google AdWords.

<!-- Código do Google para adicionar à página de conversão de carrinho
			Na sua página html, adicione o snippet e convoque goog_report_conversion
			quando alguém clicar no link ou botão escolhido. -->
			<script type="text/javascript">
			/* <![CDATA[ */
			goog_snippet_vars = function() {
			var w = window;
			w.google_conversion_id = 12345678;
			w.google_conversion_label = "abcDeFGHIJklmN0PQ";
			w.google_conversion_value = 13.00;
			w.google_conversion_currency = "USD";
			w.google_remarketing_only = false;
			}
			// NÃO ALTERE O CÓDIGO ABAIXO.
			goog_report_conversion = function(url) {
			goog_snippet_vars();
			window.google_conversion_format = "3";
			var opt = new Object();
			opt.onload_callback = function() {
			if (typeof(url) != 'undefined') {
			window.location = url;
			}
			}
			var conv_handler = window['google_trackConversion'];
			if (typeof(conv_handler) == 'function') {
			conv_handler(opt);
			}
			}
			/* ]]> */
			</script>
			<script type="text/javascript"
			src="//www.googleadservices.com/pagead/conversion_async.js">
		</script>

1. Primeiro, você precisará acessar a seção cabeçalho global. Clique em "Configurações" no menu esquerdo e selecione a subseção "HTML do cabeçalho".

2. Coloque o código fornecido pelo Google nesta seção e clique em Salvar.

Depois de adicionar o código de rastreamento na seção de cabeçalho, é necessário adicionar o código ao widget que deseja que seja considerado o evento de rastreamento.
Observe que o Google AdWords não diferencia entre rastreamento de clique e carregamento.

3. Em seguida, você precisa adicionar o rastreamento do Google em links individuais. Por exemplo, se você deseja adicionar rastreamento a um clique no botão, acesse o botão no editor e clique com o botão direito do mouse para abrir o menu abaixo e selecione HTML/CSS

4. Depois de consultar o widget do botão HTML, localize a tag <a> e adicione o seguinte snippet a esta seção.

onclick=";return try{goog_report_conversion('http://example.com/your-link')}catch(e){}"

 

Nota: o código acima é apenas um exemplo e não deve ser copiado para o seu site. Peça o código correto para o Google.

Observações e considerações sobre o Google AdWords

O Google recomenda usar:

onclick="goog_report_conversion ('http://example.com/your-link')"

A opção que usamos também permite rastrear as estatísticas.

Conta analítica

Como Adicionar o Google Analytics

A adição do Google Analytics em widgets individuais oferece outra forma de rastrear as estatísticas sobre determinadas funções.

1. Verifique se o Google Analytics já está configurado no seu site. Para fazer isso, acesse as configurações do site e clique na seção "Google Analytics". Cole seu código do Google Analytics no campo fornecido.

2. Depois de adicionar o código, é possível modificar o HTML de um widget para definir widgets individuais para rastrear. Para isso, clique com o botão direito do mouse no widget que você quer rastrear e clique em Editar HTML/CSS.

3. Digite seu código do Google Analytics. 

Nota: o código que você copia e cola do Google não funciona. Você precisa modificar o código do Google para que o rastreamento seja reportado à análise correta. Se você não especificar a conta do Google Analytics a ser reportada adicionando c., o evento não será rastreado.

Antes da modificação: onClick="_gaq.push(['_trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"
Depois da modificação: onClick="_gaq.push(['c._trackEvent', 'whitepaper', 'download', 'SEO is great', 5, true]);"

4. Clique em Atualizar para salvar suas alterações.

Notas e considerações para o Google Analytics 

Mais uma vez, é muito importante adicionar o c. ao código. Se você não especificar a conta do Google Analytics, o evento não será rastreado.

Pixels de rastreamento do Facebook

Você pode adicionar pixels de rastreamento do Facebook ao seu site responsivo para rastrear eventos. Crie o seu código de rastreamento de pixel do Facebook na guia Pixel do Facebook.

Adicionar o pixel de rastreamento do Facebook

Seção de script Seção NoScript

<!-- Código de pixel do Facebook --> <script> !function(f,b,e,v,n,t,s) {if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXXXXXXXX');
fbq('track', 'PageView');
</script>

<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXXX&amp;ev=PageView&amp;noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->

Acesse a seção Cabeçalho HTML clicando em "Configurações" no menu esquerdo e selecione a subseção "Cabeçalho HTML".

Coloque a parte <script> do código fornecido pelo Facebook na seção HTML do cabeçalho e clique em Salvar. 

Nota: todo o código acima é apenas um exemplo — não o copie diretamente no seu site. Consiga o código correto do pixel do Facebook.

3. Navegue até o "modo de desenvolvedor" clicando no </> símbolo na barra superior.

4. Expanda a seção "Site HTML/CSS" e clique na seção "body-end.html" Coloque a parte "noscript" do código nesta seção. Em seguida, clique em Salvar. 

Notas e considerações para os pixels de rastreamento do Facebook

  • Como no Gerenciador de tags do Google, o Facebook recomenda colocar o código "noscript" no início da seção body. Essa é uma solução alternativa que eles sugerem para contornar as limitações de navegadores da web muito antigos que não carregam o código do cabeçalho.
  • A seção body-end.html do modo de desenvolvedor trabalha para adicionar o código "noscript".
  • Para mais informações sobre Implementação de Pixel do Facebook, confira este manual.