Introdução à inclusão de tags no servidor

A inclusão de tags no servidor é uma nova maneira de usar o Gerenciador de tags do Google para instrumentar seu aplicativo em vários dispositivos. Os contêineres do servidor usam o mesmo modelo de tag, acionador e variável que você já conhece, além de oferecer novas ferramentas que permitem avaliar a atividade do usuário onde quer que ela aconteça.

Uma configuração típica sem a inclusão de tags no servidor depende de um contêiner na página para enviar dados de avaliação a vários servidores de coleta. A Figura 1 traz um exemplo de como um contêiner da Web do Gerenciador de tags em execução em um navegador da Web envia dados para vários servidores.

Diagrama de um site instrumentado para usar um contêiner da Web do Gerenciador de tags do Google

Figura 1: diagrama de um site instrumentado para usar um contêiner da Web do Gerenciador de tags do Google.

Por outro lado, o contêiner do servidor não é executado no navegador nem no smartphone do usuário, mas em um servidor que você controla.

Diagrama de um site instrumentado usando um contêiner de inclusão de tags no servidor.

Figura 2: exemplo de configuração de inclusão de tags que usa um contêiner do servidor.

O servidor é executado no seu próprio projeto do Google Cloud Platform, e somente você terá acesso aos dados no servidor até enviá-los para outro lugar. Você tem controle total sobre como esses dados são modelados e para onde são encaminhados. As tags são criadas usando a tecnologia JavaScript no modo sandbox. Com as permissões, é possível ver os recursos da tag, e as políticas permitem definir limites relacionados ao contêiner.

O servidor recebe solicitações da Web do dispositivo do usuário e as transforma em eventos. Os eventos são processados pelas tags, acionadores e variáveis do contêiner. Esses três tipos de componente funcionam exatamente como em outros tipos de contêiner: os acionadores analisam cada evento para procurar determinadas condições e, quando adequado, disparam tags que enviam os dados do evento a serem processados.

Este modelo traz duas questões importantes referentes aos contêineres de inclusão de tags no servidor:

  • Como os dados de avaliação são transferidos do dispositivo do usuário para o servidor de inclusão de tags?
  • Como os dados de avaliação enviados para um servidor de inclusão de tags são transformados em um evento?

A resposta para as duas perguntas é um novo tipo de entidade para uso em contêineres do servidor: um cliente.

Como os clientes funcionam

Os clientes são adaptadores entre o software em execução no dispositivo de um usuário e o contêiner do seu servidor. O cliente recebe dados de avaliação de um dispositivo, transforma-os em um ou mais eventos, encaminha os dados a serem processados no contêiner e agrupa os resultados para enviar ao solicitante.

É muita coisa! Vamos analisar uma parte de cada vez. A Figura 3 mostra a transferência dos dados do navegador da Web do usuário para o contêiner do servidor e do seu servidor da Web para o contêiner do servidor.

Diagrama de um site instrumentado usando um contêiner de inclusão de tags no servidor.

Figura 3: um cliente diferente processa cada fluxo de dados.

Os clientes recebem dados de avaliação de um dispositivo. Imagine que você queira avaliar a atividade do usuário em três lugares: um site, um app para smartphones e uma torradeira inteligente. Seu site usa o Google Analytics, o app utiliza o Firebase Analytics e a torradeira usa um protocolo próprio chamado "ToastMeasure".

A instrumentação desses três dispositivos com o Gerenciador de tags do Google normalmente requer um contêiner diferente para cada plataforma. Como a inclusão de tags é executada em um servidor e não no dispositivo, o mesmo contêiner pode processar a instrumentação de análise para as três plataformas dos dispositivos. No entanto, há um problema. Nem todos os dispositivos se comunicam da mesma forma. O protocolo do Google Analytics não é o mesmo do ToastMeasure. É aí que entram os clientes.

Em vez de três contêineres, o servidor tem um contêiner com três clientes. Cada solicitação que entra no contêiner é processada por um cliente em ordem de prioridade: primeiro, o cliente de prioridade mais alta. Para começar, o cliente decide se sabe como processar determinado tipo de solicitação. Em caso afirmativo, o cliente "reivindicará" a solicitação e seguirá para a próxima etapa de processamento. Ao reivindicar a solicitação, ele impede que os clientes subsequentes sejam executados. Se o cliente não puder processar a solicitação, ele não fará nada e permitirá que os outros clientes decidam se processam a solicitação ou não.

Os clientes transformam os dados da solicitação em um ou mais eventos. Depois que o cliente da ToastMeasure reivindica uma solicitação, ele precisa transformá-la em algo que o restante do contêiner entenda, ou seja, um conjunto de eventos.

Eventos são acontecimentos que você quer avaliar. Podem ser qualquer coisa: start_toasting, finish_toasting ou buy_bread. Há algumas recomendações sobre a estrutura dos eventos que um cliente gera, mas o único requisito é que o restante do contêiner consiga entendê-los.

Os clientes executam o contêiner. O cliente reivindicou a solicitação e a transformou em eventos. Agora, é a hora das tags, dos acionadores e das variáveis. O cliente transmite os eventos ao restante do contêiner para processamento adicional.

Os clientes agrupam os resultados para enviar de volta ao dispositivo. Depois que o contêiner é executado, é hora de responder à torradeira. A resposta pode assumir várias formas. Talvez o cliente diga apenas "Ok, pronto". Pode ser que uma das tags queira redirecionar a solicitação para outro servidor de coleta. Ou talvez uma das tags faça as luzes da torradeira mudarem de cor. Não importa o que precisa acontecer, é tarefa do cliente agrupar os resultados e enviá-los de volta ao solicitante.

Felizmente, o Gerenciador de tags processa grande parte disso para você. Os contêineres do servidor vêm com três clientes: "Google Analytics: App + Web", "Google Analytics: Universal Analytics" e "Protocolo de avaliação". Esses clientes oferecem as ferramentas necessárias para começar a instrumentar seu aplicativo a partir do momento em que você cria o contêiner.

Um breve exemplo

Vejamos um exemplo rápido para entender como todas as peças se encaixam. Neste exemplo, você criará o seguinte:

  1. Um site simples que usa a gtag.js para enviar um evento click a um contêiner de servidor
  2. Um cliente do Google Analytics: App + Web que recebe o evento
  3. Um acionador que dispara em um evento click
  4. Uma tag do Google Analytics: App + Web que envia os dados do evento ao Google Analytics para processamento

Neste exemplo, presumimos que você já tenha criado e implantado o contêiner do servidor.

Configurar a gtag.js

Primeiro, configure a gtag.js para enviar os dados ao seu servidor de inclusão de tags. Com a gtag.js, o envio de dados ao servidor funciona como o envio de dados para o Google Analytics, com uma modificação. Como na página de exemplo abaixo, faça com que a opção transport_url direcione para o servidor de inclusão de tags.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-EXAMPLE', {
    transport_url: 'https://analytics.example.com',
  });
</script>

Em seguida, adicione uma função sendEvent() para processar os eventos click:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-EXAMPLE"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-EXAMPLE', {
    transport_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

Com essa configuração, os manipuladores de eventos, como a função sendEvent() incluída neste exemplo, enviarão um evento click ao servidor de inclusão de tags.

Cliente do Google Analytics: App + Web

Seu contêiner precisa de um cliente para receber o evento assim que ele chegar ao servidor. Felizmente, os contêineres do servidor vêm com o cliente do Google Analytics: App + Web pré-instalado. Portanto, você já concluiu esta etapa.

Acionador de cliques

Em seguida, crie um acionador que seja disparado no evento click. Crie um acionador personalizado que será disparado quando a variável integrada do Nome do evento for igual a "clique".

configuração do acionador

Tag do Google Analytics: App + Web

Por fim, anexe uma tag App + Web ao acionador. Assim como acontece com os clientes, um contêiner de inclusão de tags no servidor vem com uma tag do Google Analytics: App + Web. Basta criar a tag e definir suas configurações para conectar o contêiner. Os clientes e as tags App + Web foram projetados para funcionar juntos. Ou seja, basta criar uma tag App + Web, e sua configuração será extraída automaticamente dos eventos do cliente.

Visualizar o contêiner

Agora que o contêiner está configurado, clique em Visualizar. Acesse seu site em outra janela do navegador. À medida que os eventos e solicitações forem enviados ao contêiner do servidor, você os verá no lado esquerdo da página de visualização.

Se as alterações forem satisfatórias, publique o contêiner do servidor.

Configurar o servidor para o modo de produção com veiculação primária

Antes de enviar qualquer tráfego de produção para seu servidor de inclusão de tags, instale o servidor no domínio próprio e faça upgrade dele para o modo de produção.