DEV Community

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

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. 🙋🏻‍♂️

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay