DEV Community

Código ao Ponto profile image Thiago Nunes Batista
Thiago Nunes Batista for Código ao Ponto

Posted on • Originally published at codigoaoponto.com

Como adicionar o Google Tag Manager no seu website com Nuxt 3

#webdev #frontend #vue #nuxt

Image description

O Google Tag Manager é uma plataforma do Google que permite adicionar e gerenciar a integração do seu site ou aplicativo com diversos outros serviços como por exemplo:

  • Google Analytics
  • Google Ads
  • Crazy Egg
  • Hotjar Tracking Code

Neste artigo você vai aprender através de um passo a passo como adicionar o Google Tag Manager no seu website desenvolvido com Nuxt 3.

1. Instalar o módulo nuxt-gtag

O Nuxt possui um módulo chamado "nuxt-gtag" que possui mais de 100 mil downloads mensais e que vai nos ajudar a realizar a instalação do Google Tag Manager no Nuxt 3 de forma simplificada.

O primeiro passo é executar o comando abaixo:

npx nuxi@latest module add gtag
Enter fullscreen mode Exit fullscreen mode

Esse comando será responsável por instalar o pacote no NPM do módulo nuxt-gtag no projeto e também irá adicionar o nuxt-gtag na seção de módulos do arquivo nuxt.config.ts.

export default defineNuxtConfig({
  // Other Nuxt Settings
  modules: [
    // Other Nuxt Modules
    "nuxt-gtag"
  ]
});
Enter fullscreen mode Exit fullscreen mode

2. Configurar o Google Tag Manager no projeto.

Dentro do arquivo nuxt.config.ts, você deverá adicionar um novo campo chamado gtag dentro do objeto de configuração do Nuxt e que possuirá um outro campo de id que é valor referente ao id da sua conta no Google Tag Manager:

export default defineNuxtConfig({
  // Other Nuxt Settings
  gtag: {
    id: "GTAG-ID"
  }
});
Enter fullscreen mode Exit fullscreen mode

3. Adicionar o id do Google Tag Manager nas variáveis de ambiente

Eu recomendo você não colocar o id do Google Tag Manager dessa forma no seu código, e sim colocar o valor no arquivo .env do projeto e utilizar essa variável de ambiente para fornecer o valor do id do Google Tag Manager na configuração do projeto:

# .env file
GTAG_ID="GTAG-ID"
Enter fullscreen mode Exit fullscreen mode 
export default defineNuxtConfig({
  // Other Nuxt Settings
  gtag: {
    id: process.env.GTAG_ID
  }
});
Enter fullscreen mode Exit fullscreen mode

Conclusão

Após realizar as etapas acima, o Google Tag Manager estará configurado no seu projeto e você já vai poder começar a adicionar tags no seu website como por exemplo as tags do Google Analytics e Google Ads.

Espero ter conseguido te ajudar nessa missão de configurar com sucesso o Google Tag Manager no seu projeto com Nuxt 3. 🙋🏻‍♂️

Top comments (0)