Adicionando o Google Tag Manager (GTM) no seu projeto Nuxt 🏷️

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.