Como instalar o ga utilizando o angularJS?
O que você irá aprender?
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
