Como instalar o ga utilizando o angularJS? | metricasboss
Como instalar o ga utilizando o angularJS?
Bem, 2016 e 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.
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 excutando um carregamento de página.
Com isso, quando você acessa a home exemplo: "http://angular.metricasboss.com.br/" de um site, voce 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;
angular.module('virtualPage', []) // Criando modulo
.run(function ($rootScope, $window) {
$rootScope.$on("$routeChangeStart",function(event, next, current){
// Caso o evento do angular seja de alteracao de rota disparar o evento customizado
if(next.templateUrl) {
// Evento customizado do google tag manager
$window.dataLayer.push(
'event': 'routeChange',
'virtualPageView': next.templateUrl
Ta, 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
1 - Abra seu google tag manager selecione seu container e clique no item "Acionadores" do menu lateral;
2 - Clique em novo;
3 - Clique em configurar acionador;
4 - Selecione o tipo "Evento personalizado";
5 - Adicione o nome do nosso evento personalizado 'routeChange';
6 - Clique em salvar ;D
Criando a variável virtualPageView
1 - Após criar nosso acionador clique em variável no menu lateral;
2 - Role a página e Clique em novo no menu "Variáveis definidas pelo usuário";
3 - Clique em configuração da variável;
4 - Selecione "Variável da camada de dados";
5 - Adicione o "virtualPageView" no nome da variável da camada de dados;
6 - Clique em Salvar;
7 - Adicione o "virtualPageView" no nome da variavel no google tag manager e clique em salvar;
Criando a nossa tag do Google Analytics;
1 - Após criar o nossa variável, clique em tags no menu lateral;
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