Nesse guia, vou te mostrar como é fácil adicionar o Google Tag Manager no seu website desenvolvido com Nuxt.
Google Tag Manager
Com o Google Tag Manager é possível gerenciar a integração em sites e aplicativos móveis com uma variedade de serviços e ferramentas, como:
- Google Analytics
- Google Ads
- Google Optimize
- Hotjar Tracking Code
Você pode adicionar o GTM no seu projeto Nuxt seguindo os passos do próximo tópico.
Passo a passo
1. Instalar o módulo nuxt-gtag
O Nuxt conta com um módulo popular chamado nuxt-gtag
que facilita a integração do Google Tag Manager no Nuxt. Para começar, você vai precisar o seguinte comando:
npx nuxi@latest module add gtag
O comando acima vai instalar o pacote nuxt-gtag
no NPM do seu projeto e automaticamente incluirá o nuxt-gtag
na seção de módulos do arquivo nuxt.config.ts
. Verifique se o seu arquivo nuxt.config.ts
possui o módulo abaixo após a intalação:
export default defineNuxtConfig({
// Other Nuxt settings
modules: [
// Other Nuxt modules
"nuxt-gtag"
]
});
2. Configurar o Google Tag Manager no seu projeto
No arquivo nuxt.config.ts
, você precisará adicionar um novo campo chamado gtag
dentro do objeto de configuração do Nuxt, contendo um campo id
, que deve ser preenchido com o ID da sua conta do Google Tag Manager:
export default defineNuxtConfig({
// Other Nuxt settings
gtag: {
id: "SEU-GTAG-ID"
}
});
3. Adicionar o ID do Google Tag Manager no seu arquivo .ENV
Uma boa prática para armazenar o ID da sua conta do Google Tag Manager é colocá-lo no arquivo .env
do projeto. Isso pode manter seu ID seguro e separado do código do seu projeto, facilitando a configuração em diferentes ambientes (como desenvolvimento, homologação e produção) sem a necessidade de modificar o código diretamente.
Seu arquivo .env
pode ficar com o seguinte campo:
GTAG_ID="SEU-GTAG-ID"
Sendo assim, você vai pegar essa variável e adicionar lá no seu arquivo de configuração nuxt.config.ts
:
export default defineNuxtConfig({
// Other Nuxt settings
gtag: {
id: process.env.GTAG_ID
}
});
Além disso, adicionar esse ID às suas variáveis de ambiente também pode melhorar a manutenção e a segurança, evitando a exposição de informações sensíveis.
Pronto! o Google Tag Manager já está configurado no seu projeto Nuxt e você já vai conseguir adicionar tags no seu website para usar as tags do Google Analytics e Google Ads, por exemplo. 🚀
Curtiu? Se conecte comigo onde preferir acessando minhas redes em: https://www.hosana.me.
Top comments (0)