Google Tag Manager na Nuvemshop

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:

códigos externos nuvemshop

Locais de instalação do Tag Manager na Nuvemshop.
  • 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>.

Bfa3wfHTZjVjjvPjFlObfwW0qaOdNCV3EWzZIDO1A5In qqYk0i 5csqNPVDd3442UVRwc0 cwqub HNYACwurEAepD0JnOBQ0oZdmD07uz nqHmeJHS5InaSFIqklAZYryzJu

* código de instalação do Google Tag Manager

Configurar o Tag Manager via Código no Servidor(FTP)

Acessar o servidor FTP com o FileZilla

Abra o FileZilla

aXwLCkXX644ZiGGoW0u7cTadi jC6MP0eYOTYaGO5XI7mVlrXEfq7z kC WOpQ9 E3bFtQStELJDe7b9ULHrDNRSskIfM 6Gv9y X5PgFYNflrRFmuy1yt5j7WNiNQv EOjwTI 6

* Tela do FileZilla

No campo servidor cole o HOST, Nome de utilizador o Usuário, no passe a senha do FTP e na porta 21.

vzXzXiGnX0iNbJXFRVaaJk7BZQhaZVpnY6nj7hExMyiCPk1rcrIoKfR2bbABKmJr1CF

* Dados de acesso FTP da Nuvemshop

Clique na Ligação rápida;

No canto direito você vai ver a estrutura de pastas do servidor da Nuvemshop;

rpfm5UMdh 7noyMgqy6kDMneeXiQs8ZaMvqmzlSz3L8osmOpa6JKFpbFWgGg

* Estrutura de pastas Nuvemshop

Editar o arquivo layouts/layout.tpl

Clique duas vezes em layouts;

Arraste o layout.tpl para sua pasta local;

* Arquivo layout.tpl

Clique com o botão direito e depois em abrir;

CbPOkfRIZpTcBbFsILPQfGved4I0IFxADqjsA i9VrQCfgBUAyYjmUdhhcg6S57 GuKVzmwE GWbfmWDrSRMSz2ScZBY8bboiaJi2T0o4cIekSHsi4HOoksJUmTWGUh4cef7g hf

Vai abrir um código semelhante a esse:

pL9IBYjbVeT11GwwQxiFMtaSbe sUvOT1RuH4P RSjUQo9vaHGJXB

Copie o primeiro bloco de código da instalação do Tag Manager;

6jPBHiKkceZRWzAk5cUc3kwjynA fCRBjh2NeEtxrQXF9xFSPgzES9IPKHCIlDBLYa1BT7SW8b9vK8Pwjprv1KTvnO9hqQrJ JkP c

Cole o primeiro bloco do código logo após a abertura da tag <head>, vai ficar algo parecido com isso:

FS90mwylrasd g9iVIyXNguUH BnhwtsLIZRHQLuCJP7tmIr6KphfYgPPrmnsNkoLzkcgW

Copie o segundo bloco da instalação do Google Tag Manager;

W2y9zTxt 7T CHrYvBzG1lgooy7ce5KVEx4tOMNhCixIRAheF8 Wwurc3UDriwfdxe50hO014WEFYqq5bW78X64TAZ8JxvBTm6Zgm1o6Rd0ZHD2vcp2VnX buasrYyubWQpKUvC

Faça o mesmo com o segundo bloco, só que dessa vez, cole logo após a abertura da tag <body>;

N2a2Br1MLTFpuahKf2pcPr3pEa6egpclMYbz45X3iOqr1iLY

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:

q8DdJXgt 1i dS LvDZuAGBkVxPMP4XrXNaUl6DIKwg9NlNcorAbF

Clique em ok para confirmar a substituição do arquivo:

TfJ89XSTU80UPpYfy1IkeuhWaIl 7ruArh99piQ oB6GgtLT4IjdLnjYuQEu5A9cpJcU0cfistTQGGlcYgKxl

Validar Instalação do Tag Manager

Ative o Tag Assistant e recarregue a página para garantir que tudo ficou ok:

jFYCQ68c9ShmpbOyMhC4SeG2sDb3xHdSX ad u2Ar9b0iJl gv0aAPeQ8d6pUQ6AkQQfRDreXigEnE2xQYKqNyrOkbgcerBW ldTyW4bfo

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”;

image 1

Tela de configuração de código externo.

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.

image 2

Tela de solicitação de aprovação de código nas etapas do checkout.

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“;

SzIvFGPuuP83zXYt1aRkiRdJiQ2t8VbH1eocuT dSUwuq4wNBD4e jYzPNRxnHkyfIxTkGgMYSRD8P0l5fJI4OK5LNR 7rK

* Códigos externos Nuvemshop

Pronto, sua instalação do tag manager foi concluída e deve funcionar em todas as páginas.

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!

Grupo do facebook

Mais de 2.500 lojistas da Nuvemshop ajudando uns aos outros.

comentário no post

Deixa um comentário na postagem, a resposta vem mais rápido do que imagina!

Compartilhar é se importar:

10 comentários em “Como Instalar o Google Tag Manager na Nuvemshop”

  1. 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?

    1. 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!

  2. 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

    1. 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,

  3. 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!

  4. 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.

    1. 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,

Deixe um comentário

O seu endereço de e-mail não será publicado.