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.

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 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;

Criando um acionador -  1

2 - Clique em novo;

Criando um acionador -  2

3 - Clique em configurar acionador;

Criando um acionador -  3

4 - Selecione o tipo “Evento personalizado”;

Criando um acionador -  4

5 - Adicione o nome do nosso evento personalizado ‘routeChange’;

Criando um acionador -  5

6 - Clique em salvar ;D

Criando um acionador -  5

Criando a variável virtualPageView

1 - Após criar nosso acionador clique em variável no menu lateral;

Criando uma variavel -  1

2 - Role a página e Clique em novo no menu “Variáveis definidas pelo usuário”;

Criando uma variavel -  2

3 - Clique em configuração da variável;

Criando uma variavel - 3

4 - Selecione “Variável da camada de dados”;

Criando uma variavel - 4

5 - Adicione o “virtualPageView” no nome da variável da camada de dados;

Criando uma variavel - 5

6 - Clique em Salvar;

Criando uma variavel - 6

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

Criando uma variavel - 7

Criando a nossa tag do Google Analytics;

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

Criando tag analytics -  1

2 - Clique em novo;

Criando tag analytics -  2

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

Criando tag analytics -  3

4 - Selecione o tipo “Universal Analytics”;

Criando tag analytics -  4

5 - Adicione o seu código de acompanhamento;

Criando tag analytics -  5

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

Criando tag analytics -  6

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

Criando tag analytics -  7

8 - Clique em “Campos a serem definidos”;

Criando tag analytics -  8

9 - Clique em “Adiciona campo”;

Criando tag analytics -  9

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

Criando tag analytics -  10

11 - Adicione “virtualPageView” no campo valor;

Criando tag analytics -  11

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

Criando tag analytics -  12

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

Criando tag analytics -  13

14 - Clique em salvar;

Criando tag analytics -  14

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