Orbital

Implementando Google Tag Manager em aplicações React JS

Eduardo Silva

Que o Google Analytics é super importante para o acompanhamento e tomada de decisão dos sites, ninguém pode negar. E com o avançando dos stacks de desenvolvimento, sites SPA (Single Page Application) geralmente se tornam desafios quando o assunto é implementa Google Tag Manager e outras ferramentas.

Fizemos este guia para integrar totalmente o Google Analytics e o Google Tag Manager em um aplicativo React. Abordaremos o código necessário para o aplicativo React e com o enviar as informações necessárias para o gerenciador de tags.

Implementando o GTM

A primeira etapa é adicionar o contêiner GTM na aplicação React. O código do contêiner GTM pode ser adicionado diretamente ao seu index.html ou por meio de um pacote.

Vamos ver as duas possibilidades:

Método #1 (ideal): Implementar GTM via Package

Para esta possibilidade, precisaremos instalar o pacote react-gtm-module:

npm i react-gtm-module

Para inicializar o GTM com esse pacote, precisamos incluí-lo no app.js e inserir o ID do GTM:

import TagManager from 'react-gtm-module'
const tagManagerArgs = {
  gtmId: '<ID do GTM tipo (GTM-XXXXXXX)>'
}
TagManager.initialize(tagManagerArgs)

E pronto!

Método #2 (paliativo): Implementar GTM via Index.html

Se a ideia é implementar via index.html (que geralmente fica no diretório projeto/public/index.html), você precisará do código JavaScript do GTM.

Com o código em mãos, cole-o o mais alto possível no <head> da página:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Para complementar e garantir o funcionamento mesmo com restrição de códigos JavaScript no navegador do usuário, cole o segundo código logo após a abertura da tag <body>:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

E pronto! Simples assim!

Implementar Page Tracking

Como estamos falando de aplicações SPA, o comportamento da URL funciona diferente de uma aplicação HTML tradicional. Por isso, precisamos implementar o envio das informações da página em execução via DataLayer para que o GTM possa utilizá-la para disparar tags.

A implementação de rastreamento de páginas também pode ser feita de duas formas.

Método #1: Com rotas e gerenciamento de <head>

Esta forma pressupõe que você use algo como react-router-dom ou react-helmet-async, o que significa que a URL da página e os títulos da página estão sendo atualizados entre os componentes. Outros pacotes de gerenciamento <head> provavelmente funcionarão também.

Para sinalizar que gostaríamos de rastrear uma nova página, podemos usar um evento como este:

window.dataLayer.push({
  event: 'pageview'
});

Dessa forma, o código do arquivo app.js ficará mais ou menos assim:

import React from 'react';
import TagManager from 'react-gtm-module'
const tagManagerArgs = {
  gtmId: '<ID do GTM tipo (GTM-XXXXXXX)>'
}
TagManager.initialize(tagManagerArgs)
function App() {
  window.dataLayer.push({
    event: 'pageview'
  });
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Página Tal
        </p>
          Assunto Tal
      </header>
    </div>
  );
}
export default App;

Método #2: Sem rotas e gerenciamento de <head>

Esta segunda forma é muito parecida com a primeira possibilidade, a única diferença é que você pode passar a URL e o Título da página da forma que quiser:

window.dataLayer.push({
  event: 'pageview',
  page: {
    url: location,
    title: title
  }
});

Implementando dessa forma, os parâmetro relacionados à tela em execução serão enviados via DataLayer, o que poderá ser transformado em variável no GTM.

Implementar Event Tracking

Por fim, um dos pontos mais importantes é o rastreamento de Eventos. Principalmente com o novo Google Analytics 4, o mapeamento de eventos se faz necessário para facilitar o relacionamento dos dados entre aplicações web e app, além de inúmeros benefícios de análise que podemos tirar daí.

Para rastrear eventos no React, precisamos inserir um novo elemento na camada de dados que contém as variáveis que queremos.

Por exemplo:

window.dataLayer.push({
  event: 'nome_do_evento'
});

Sim! Só isso!

O GTM é flexível o suficiente para permitir diferentes nomes de eventos. Além disso, o GTM pode transformar as variáveis que enviamos e até preencher eventuais lacunas nos dados.

That’s all, folks!

Tem mais alguma coisa importante de GTM e GA4 que queira saber? Só pedir que a gente publica!

 

Precisa de ajuda com GTM? Fale com a gente!
Sair da versão mobile