This content originally appeared on DEV Community and was authored by Thiago Nunes Batista
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
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"
]
});
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"
}
});
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"
export default defineNuxtConfig({
// Other Nuxt Settings
gtag: {
id: process.env.GTAG_ID
}
});
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. 🙋🏻♂️
This content originally appeared on DEV Community and was authored by Thiago Nunes Batista
Thiago Nunes Batista | Sciencx (2024-08-15T16:00:00+00:00) Como adicionar o Google Tag Manager no seu website com Nuxt 3. Retrieved from https://www.scien.cx/2024/08/15/como-adicionar-o-google-tag-manager-no-seu-website-com-nuxt-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.