Exemplo de como alterar o código HTML via GTM

Modified on Wed, 19 Apr, 2023 at 2:44 PM

Abaixo segue sequência de um exemplo, de como alterar uma frase ou palavra no código HTML do seu marketplace:

1 - Inspecione o elemento que você quer realizar a alteração.

2 - Ao inspecionar o elemento é exibido o código e o texto no HTML. No exemplo utilizado a frase é "Lojas em destaque" e eu vou alterar para "Todas as Lojas":

3 - Basta clicar 2 vezes em cima do texto que deseja alterar e digitar o novo texto:

4 - Ao digitar o novo texto e apertar Enter a frase será atualizada seguindo o mesmo padrão de fonte e tamanho e será possível simular o resultado final. Será necessário copiar o código para utilizar posteriormente para criação de seu script.

5 - Utilizando o Google Tag Manager para criar sua Tag.

Nota: Para configurar no painel o código do GTM acesse este artigo:

https://smplaces-cs.freshdesk.com/support/solutions/articles/151000046447-como-usar-o-google-tag-manager

Acesse o site: https://tagmanager.google.com/ e faça o login ou se ainda não possuir cadastro, inscreva-se:

Ao acessar sua home, selecione ou crie um contêiner que será utilizado:

No seu espaço de trabalho, clique no bloco "Nova Tag" > Configuração da Tag > O próprio GTM (Google Tag Manager) já irá sugerir algumas tags, mas você poderá adicionar outras conforme sua necessidade indo em “Tag HTML personalizada” será possível realizar a criação de Tags para alteração de textos no site. Não se esqueça de dar um nome à tag.

Neste manual iremos adicionar uma tag personalizada de alteração de texto como exemplo.

Clique no menu "Tag" do lado esquerdo da página > "Nova" > Configuração da Tag:

Clique em "HTML Personalizado" > Irá abrir a caixa de código HTML para ser inserido o script copiado anteriormente do site.

É necessário criar um acionador para a tag, clicando no bloco "Acionamento" logo abaixo.

Existe um acionador padrão que aciona a tag para todas páginas mas você pode adicionar outras formas de acionamento, clicando no botão "+" no canto superior direito.

Pronto, após selecionar o acionador a tag já está instalada. Para colocá-la para funcionar agora basta clicar em “Enviar” no canto superior direito. Isso irá ativar seu contêiner com todas as tags que você já adicionou.

6 - Colando o script nos códigos de acompanhamento.

Para implementar o Gerenciador de tags do Google no seu site acesse os códigos de acompanhamento em seu painel e cole os códigos da seguinte forma:

Copie o código e cole-o o mais próximo possível da tag de abertura <head> nos códigos de acompanhamento, substituindo GTM-XXXX pelo ID do contêiner:

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>

Copie o snippet a seguir e cole-o no campo <body> dos códigos de acompanamento, substituindo GTM-XXXX pelo ID do contêiner:

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Pronto, aguarde alguns minutos para que a alteração reflita no marketplace.