- Requisitos para instalar o Tag Manager na Nuvemshop
- Por que Instalar o Tag Manager via código?
- Configurar o Tag Manager via Código no Servidor(FTP)
- Configurando Tag Manager nas etapas do Checkout
- Configurando Tag Manager na página de conclusão da compra
- Tutorial em vídeo: Como instalar o Google Tag Manager na Nuvemshop
Requisitos para instalar o Tag Manager na Nuvemshop
Para configurar o Tag Manager na Nuvemshop da melhor maneira possível você vai precisar de:
- Instalar o Código em três locais diferentes, na listagem e detalhes do produto, nas etapas do checkout e na página de conclusão da compra, conforme imagem abaixo:
- Uma loja na Nuvemshop com FTP ativo (Claro!) e liberado(somente a partir do plano Impulso);
Copie e cole os dados de acesso do FTP. - Uma conta criada no Google Tag Manager, copie e cole o código de instalação em um bloco de notas;
O código de instalação do Tag Manager possui dois blocos de códigos que são inseridos em locais diferentes. - Um software de cliente FTP;
Nesse tutorial nós utilizamos FileZilla. - Um editor de código;
Aqui nós utilizamos o Sublime Text. - Extensão de navegador “Tag Assistant Legacy” para garantir que tudo foi instalado corretamente.
Por que Instalar o Tag Manager via código?
O Google orienta a instalar o código de instalação do Tag Manager da seguinte maneira, o primeiro bloco de código o mais alto possível na tag <head>, e o segundo bloco logo após a abertura da tag <body>.
Configurar o Tag Manager via Código no Servidor(FTP)
Acessar o servidor FTP com o FileZilla
Abra o FileZilla
No campo servidor cole o HOST, Nome de utilizador o Usuário, no passe a senha do FTP e na porta 21.
Clique na Ligação rápida;
No canto direito você vai ver a estrutura de pastas do servidor da Nuvemshop;
Editar o arquivo layouts/layout.tpl
Clique duas vezes em layouts;
Arraste o layout.tpl para sua pasta local;
Clique com o botão direito e depois em abrir;
Vai abrir um código semelhante a esse:
Copie o primeiro bloco de código da instalação do Tag Manager;
Cole o primeiro bloco do código logo após a abertura da tag <head>, vai ficar algo parecido com isso:
Copie o segundo bloco da instalação do Google Tag Manager;
Faça o mesmo com o segundo bloco, só que dessa vez, cole logo após a abertura da tag <body>;
Feito isso, clique no menu File > Save ou Ctrl + s;
Atualizar o arquivo no Servidor
Agora, vamos atualizar o arquivo no servidor. Feche o Sublime Text e vamos voltar para o FileZilla;
Clique com o botão direito do mouse no arquivo layout.tpl e depois em enviar:
Clique em ok para confirmar a substituição do arquivo:
Validar Instalação do Tag Manager
Ative o Tag Assistant e recarregue a página para garantir que tudo ficou ok:
Você deve ver o Tag Manager “verdinho”:
Após isso o Tag Manager estará funcionando em todas as páginas, menos em uma, na tela de conclusão da compra e isso é uma peculiaridade da Nuvemshop.
Configurando Tag Manager nas etapas do Checkout
Para garantir que o Tag Manager também funcione nas etapas do checkout, você deve configurá-lo também no painel da Nuvemshop.
Acesse o menu Configurações > Configurações avançadas > Códigos externos > Códigos de rastreamento.
Insira apenas o primeiro código da instalação do Tag Manager no campo “Códigos de rastreamento”;
Basta solicitar aprovação que o time técnico da Nuvemshop vai analisar o código e aprovar. Vale lembrar que o prazo é de 48 horas.
Configurando Tag Manager na página de conclusão da compra
Para garantir que o Tag Manager também funcione na tela de conclusão da compra, você deve configurá-lo também no painel da Nuvemshop.
Acesse o menu Configurações > Configurações avançadas > Códigos externos > outros códigos de conversão.
Insira apenas o primeiro código da instalação do Tag Manager no campo “outros códigos de conversão“;
* Informação importante, caso algum código instalado nos códigos externos no painel da Nuvemshop não reflita na loja, entre em contato com o suporte para solicitar a liberação. Por algum motivo algumas lojas estão com uma trava.
Pronto, sua instalação do tag manager foi concluída e deve funcionar em todas as páginas.
Tutorial em vídeo: Como instalar o Google Tag Manager na Nuvemshop
Restou alguma dúvida?
Não deixe de perguntar, sua dúvida pode ser de mais alguém! Utilize o Grupo do Facebook ou deixe um comentário no Post!
Pedro Licio
Analista de Sistemas, pós-graduado pela PUC-RJ, expert prata oficial em produtos do Google Ads (Product Expert desde 2021 ), trabalha com E-commerces desde 2014, é ex lojista Top Seller da LI, vendeu sua loja e através de sua experiência como empreendedor digital, presta consultoria a lojistas dos mais diversos segmentos.
Compartilhar é se importar:
Oi amigo!
Voces fazem esse serviço particular?
desculpe a pergunta, estou chegando agora nesse mundo do ecommerce rsrsrs
Olá Thays, tudo bem?
Fazemos esse setup sim, vou pedir pro nosso comercial entrar em contato contigo.
Abraços,
Olá, por curiosidade, no tutorial da nuvemshop sobre instalar a tag de conversão, eles mostram que seja adicionado o código na confirmação de pagamento, o mesmo com o tag manager? E mais uma dúvida, já tenho a tag de conversão do Google Ads instalada, será necessário retirá-la para instalar o GTM?
Olá Pietro, espero que essa mensagem te encontre bem! 🙂
Com relação a página de confirmação de pagamento, não vejo motivo, pois isso ocorre quando o meio de pagamento confirma o pagamento e não existe uma página associada. Então, só faz sentido adicionar o Tag Manager na página de conclusão da compra/pedido.
Sobre a outra pergunta, você pode instalar das duas formas. No tag manager é interessante pois pode centralizar todas as tags lá por questão de organização.
Boas vendas!
Pedro, boa noite!
Excelente tutorial, deu tudo certo.
Porém ao instalar o google tag manager, meus dados ficam duplicados pois também estava conectado ao google analytics.
Você tem alguma solução para evitar essa duplicidade?
Abraços,
Matheus
Matheus, tudo bem? Fico feliz que tenha dado tudo certo! 🙂
Sobre o Analytics, se eu entendi bem, você instalou pelo Painel da Nuvemshop e via tag manager, certo?
Se foi isso, basta remover a tag do Google Tag Manager e manter apenas no painel da Nuvemshop.
Qualquer dúvida escreve aqui!
Abraços,
Não tinha encontrado nenhum video no youtube que pudesse me ajudar.
Penei um pouquinho com alguns termos como “FTP” e onde achar.
(Para quem não achou no o HOST, USUARIO E SENHA nuvemshop.,Ir na barra Lateral Esquerda>Personalizar> Minha Nuvemshop>Editar o código>Abrir FTP.)
Mas, no final, deu tudo certo. Esse artigo foi muito bem explicado.
Obrigado pela dica, Pedro
Grande abraço!
Olá Gustavo!
Fico feliz que tenha ajudado 🙂 e obrigado pela contribuição!
Grande Abraço.
Olá! tudo bem? Gostaria de saber se é necessário ” Acessar o servidor FTP com o FileZilla ” ?
Não da para colocar o tag manager utilizando apenas a área de códigos externos da Nuvemshop?
Esse FileZilla também é disponível para MAC???
At.
Olá Rafael, tudo bem?
Se você quiser instalar da melhor forma possível, como o Google recomenda e evitar perda de dados, essa é a forma ideal se você está trabalhando com a Nuvemshop. A Nuvemshop lança os códigos externos no rodapé das páginas e dessa forma não é a melhor prática, ainda mais se falando de Tag Manager que tem os gatilhos padrões que são disparados em diferentes momentos do carregamento de uma página.
Com relação ao FileZilla, ele é apenas um cliente FTP, utilizado para gerenciar arquivos em servidores FTP. Existe uma infinidade de softwares com esse propósito. Você pode utilizar o que mais lhe agradar. O FileZilla é bastante usado e pelo que pesquisei rapidamente existe versão para MAC.
Espero ter ajudado,
Na página de vendas não funcionou , fiz a segunda parte tudo conforme ensinou na nuvemshop.
Na página de pagamento não aparece a Tagmanrger.
Aguardo retorno.
Na página de pagamento ou conclusão?