O GTM (Google Tag Manager) é um gerenciador de tags, que abre um contêiner dentro do site e através dele conseguimos injetar códigos de tags terceiras e gerenciar todos esses scripts de código em um único lugar.
Em outras palavras, é uma ferramenta que age como um intermediário entre seu site e ferramentas de terceiros (Google Analytics, Hotjar, Facebook Pixel, etc). Você pode concentrar todos os scripts nele e escolher quando dispará-los.
É de grande auxílio para profissionais de marketing que tem necessidade de adicionar e remover tags de remarketing, mensurar promoções de campanhas e gerar relatórios pois após a inserção do GTM tudo pode ser realizado por meio de um Dashboard
(Painel de Controle) sem auxílio de pessoas desenvolvedoras.
Essa solução pode ser dispensável para sites pequenos como blogs pessoais que não necessitam de tags de parceiros ou remarketing, que não envolvam monetização ou venda de produtos, que já possuam relatórios de acessos básicos (como Wordpress, WIX e similares) pois exige certo esforço por possuir uma curva de aprendizado e certa complexidade.
Na minha opinião, desconsiderando a parte de implementação, seria suficiente:
Você pode acessar o serviço pela url: https://tagmanager.google.com/ com sua conta do Google;
Depois é possível criar uma conta. Por exemplo, se você tem um site próprio, a conta seria do seu site; se você trabalha de freelancer, teria provavelmente o nome da empresa que você presta serviços.
Para que o GTM funcione em seu site é necessário adicionar um bloco de código Javascript em seu site que será automaticamente disparado no momento do carregamento da página. Esse bloco de código é exibido para você assim que criar um container
ou acessando a opção Administrador > Instalar o Gerenciador de tags do Google
.
Você pode seguir as orientações conforme diz a documentação e, além disso tenho esse vídeo para recomendar: Google Tag Manager: O que é e como instalar? e este post How to Setup and Install Google Tag Manager on your Website.
Numa Single Page Application é um pouco diferente, imagine que você terá o GTM para os ambientes de PROD e QA, se você utilizou o create-react-app
que possui Webpack ou configurou uma aplicação com Webpack e tem à disposição o HtmlWebpackPlugin é possível criar variáveis nos arquivos .env.production
e .env.staging
(pasta raíz do seu projeto) e utilizá-las com %%
, assim:
<!-- 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',%REACT_APP_GTM_ID%);</script>
<!-- End Google Tag Manager -->
react-scripts test
podem quebrar por causa dessa implementação?A primeira opção que encontrei está neste artigo chamado Integrating Google Tag Manager with a React App onde o autor utiliza o pacote react-gtm-module e condiz com a estratégia dos especialistas do AnalyticsMania neste post: How To Track Single Page Web App with Google Tag Manager. Francamente, essa solução não foi testada pois o objetivo não era adicionar mais uma dependência no projeto.
/src/config
e um arquivo index.js
contendo este código para expor as variáveis de ambiente dos arquivos .env
s;/src/utils/gtm
e um arquivo index.js
contendo este código. Repare que importamos o arquivo config
e passamos o ID do GTM com config.REACT_APP_GTM_ID
;Root
da aplicação com useEffect:import React, { useEffect } from "react";
import gtm from "utils/gtm";
const Root = ({ children }) => {
useEffect(() => {
gtm();
}, []);
return <div>Seu conteúdo está aqui</div>;
};
.env
s nós temos REACT_APP_SELF_ENV
, isso serve como um NODE_ENV
que nós podemos sobrepor. Sendo assim, vamos passá-la no package.json
para nosso comando de teste: "test": "REACT_APP_SELF_ENV=test react-scripts test"
;export const isTestEnv = () => config.REACT_APP_SELF_ENV === 'test';
Root
e editar o useEffect
:import React, { useEffect } from "react";
import gtm from "utils/gtm";
import { isTestEnv } from "utils/helpers"; // meu helper
const Root = ({ children }) => {
useEffect(() => {
if (!isTestEnv) {
gtm();
}
}, []);
return <div>Seu conteúdo está aqui</div>;
};
Passando a variável de ambiente nos seus comandos do package.json
, por exemplo:
"build:qa": "REACT_APP_SELF_ENV=staging npm run build",
"build:production": "REACT_APP_SELF_ENV=production npm run build",
Se você está utilizando create-react-app
provavelmente também está usando react-router-dom
e react-helmet
, neste caso, podemos utilizar o hook useLocation()
e disparar um evento personalizado com dataLayer.
Deixei o código de exemplo disponível aqui e para saber mais sobre como criar este evento que nomeei de virtualPageView
no GTM, visite o post: Google Tag Manager - Parte 3: Criar um evento personalizado de dataLayer na seção virtualPageView
.
Se você está indo de NextJS
, procure por router.events, mais especificadamente routeChangeComplete
, toda vez que a rota mudar, este gatilho é disparado e, é nesse momento que você deverá disparar um evento personalizado de dataLayer.
E se você está com Gatsby
, pode levantar as mãos para o céu, pois ele tem plugins pra resolver esse tipo de problema: gatsby-plugin-google-tagmanager e gatsby-plugin-google-analytics. Você vai instalar os dois seguindo as instruções, no caso do GTM, serão dadas instruções para você configurar uma TAG
no próprio Google Tag Manager e adicionar o parâmetro routeChangeEventName
como options
no gatsby-plugin-google-tagmanager
pois o Gatsby disparará na mudança de rota esse evento.
Caso tenha problemas com o objeto window
, pode editar o arquivo gatsby-config.js
;
const windowGlobal = typeof window !== 'undefined' && window;
{
resolve: `gatsby-plugin-google-tagmanager`,
options: {
id: 'GTM-XXXXXX',
defaultDataLayer: {
pageType: windowGlobal.pageType,
routeChangeEventName: "virtualPageView",
},
},
},