Como instalar o ga utilizando o angularJS?

Bem, de 2016 para cá, cada vez mais vemos a utilização de frameworks javascript na linha de frente do desenvolvimento web. É Angular, Backbone, Ember, todos eles servindo aplicações somente com javascript. Aprenda nesse post como instalar seu google analytics usando angular e google tag manager.

O que é AngularJS?

Tentando ser o mais breve e didático possível, o angularJS é um framework criado por um analista do Google e tem a premissa de ser um framework para desenvolvimento de aplicações web diretamente no navegador do usuário. Caso você queira aprender mais sobre angularJS clique aqui para ver a documentação deles.

Porque o Google Analytics não funciona direito no angularJS?

Sem me apegar a parte técnica alguma, na prática os usuários que acessam uma aplicação use o angularJS altera suas URLS quando navega, porém, essa informação não é passada para o navegador ele apenas emula a alteração url, não executando um carregamento de página.

Com isso, quando você acessa a home exemplo: “http://angular.metricasboss.com.br/” de um site, você quando clica em um botão que leva para uma “Nova página” exemplo: http://angular.metricasboss.com.br/#/about, na verdade você só esta alterando o html que esta sendo visualizado dentro da página principal. E o que a gente perde com isso? Devido a todos as as páginas estarem dentro de “/”, o GA não irá computar a navegação dentro do site, porque para ele você está na página inicial ainda.

Como a gente resolve isso?

Para receber a alteração da página precisamos utilizar uma técnica chamada VirtualPageView, essa prática ira emular uma visulização de página normal do seu GA, porém, alterando o atributo page para o valor que a gente configurar.

LUCIAN, SHOW ME THE CODE;


Tá, mas o que esse código ta fazendo?

Vamos lá! Dentro do angular conceitualmente nós temos acionadores igual no google tag manager, nesse caso o evento é o $routeChangeStart, agora o que estamos fazendo no disparar desse evento que é o interessante. Toda vez que for alterado a página do angular estamos criando um evento routChange customizado que irá passar junto a ele uma variável que é responsável por dizer em qual página esse usuário está. Simples né?

Com isso agora conseguimos criar uma tag do Google Analytics que irá armazenar essas informações e passar para os relatórios, bora fazer?

Criando o acionador no google tag manager

Abra seu google tag manager selecione seu container e clique no item “Acionadores” do menu lateral;

Clique em novo;

####Clique em configurar acionador;

Selecione o tipo “Evento personalizado”;

Adicione o nome do nosso evento personalizado ‘routeChange’;

Clique em salvar ;D

Adicione o “virtualPageView” no nome da variavel no google tag manager e clique em salvar;

Criando a nossa tag do Google Analytics;

Após criar o nossa variável, clique em tags no menu lateral;

1 - Após criar o nossa variável, clique em tags no menu lateral;

2 - Clique em novo;

3 - Clique em “Configuração da tag”;

4 - Selecione o tipo “Universal Analytics”;

5 - Adicione o seu código de acompanhamento;

6 - Selecione a opção “Visualização de página”, óbvio se não estiver marcada :D

7 - Clique em “Mais configurações”;

8 - Clique em “Campos a serem definidos”;

9 - Clique em “Adiciona campo”;

10 - Adicione “page” como valor do nome do campo;

11 - Adicione “virtualPageView” no campo valor;

12 - Role a página e clique em acionador;

13 - Selecione o acionador personalizado que criamos “routeChange”;

14 - Clique em salvar;

Para quem chegou aqui uma surpresa :D

Estou deixando um exemplo de aplicação no angular online para vocês testarem o que implementamos aqui, para conseguir visualizar o modo debug acesse angular.metricasboss.com.br e visualize com o modo debug como funciona tudo que gente implementou aqui.

Além disso, estou deixando o código fonte dessa aplicação em angular para vocês visualizarem como ficou o código do nosso modulo. [Código fonte](Estou deixando um exemplo de aplicação no angular online para vocês testarem o que implementamos aqui, para conseguir visualizar o modo debug acesse angular.metricasboss.com.br e visualize com o modo debug como funciona tudo que gente implementou aqui.

Além disso, estou deixando o código fonte dessa aplicação em angular para vocês visualizarem como ficou o código do nosso modulo. Código fonte)

Dúvidas? Comentários? Sugestões?

Mande um e-mail para gente contato@metricasboss.com.br, até a próxima 😄

Nos siga no Instagram @metricasboss

Inscreva-se aqui no nosso canal do Youtube