Como criar um botão de “adicionar ao carrinho” sempre presente por GTM (versão mobile)
Neste artigo vão conseguir ter o passo a passo para adicionar um botão de “adicionar ao carrinho” sempre presente na versão mobile do vosso site (ou cliente) através do Google Tag Manager.
Podem ver um exemplo do botão ao visualizar este artigo na versão mobile.
⚠️ IMPORTANTE: Este botão necessita de uma adaptação de forma a funcionar com lojas de Woocommerce ou Shopify. Na verdade, adaptando o código, este botão funciona com qualquer tipo de loja ou CMS.
Índice
Como criar um botão de “adicionar ao carrinho” sempre presente (implementação)
1 O primeiro passo é fazer o download do container do Google Tag Manager (GTM).
2 Para instalar as configurações de GTM do cookie banner é necessário entrar na parte de “Admin” e escolher a opção: “Importar contentor” admin –> importar contentor (imagem infra).
3 Eis os passos a seguir de forma a adicionar esta configuração sem alterar as configurações/tags já existentes no vosso GTM:
- Selecionar o ficheiro do download
- Selecionar o workspace (espaço de trabalho) existente
- Selecionar “intercalar”
- Selecionar “mudar o nome de etiquetas em conflito”.
4 Devem alterar o HTML personalizado mediante a class do botão do vosso site. No caso do Woocommerce, costuma ser .single_add_to_cart_buttone no caso do Shopify button--add-to-carte substituirem como na imagem infra.
Caso o vosso CMS não seja um Shopify ou um Woocommerce podem inspecionar o código do vosso website e ver qual a class do vosso botão de “Adicionar ao Carrinho”.
5 Basta configurar o Trigger (acionador) da Tag (etiqueta) para que o código do botão dispare apenas nas páginas de produto (imagem infra).
Como funciona esta configuração (contexto)
A ideia é criar um botão através do Google Tag Manager que dispare apenas nas páginas de produto do vosso site.
Esse botão sempre que clicado/carregado irá emular um clique no botão de adicionar ao carrinho da vossa loja de ecommerce.
O botão aparece apenas em mobile de forma a conseguirmos otimizar a versão mobile do nosso website.
O botão tem 2 textos que vão alterando entre eles e são completamente editáveis.
Aliás, adicionei várias variáveis em GTM para que possam editar a mensagem e as cores do botão.
- Constant – Texto #1 do botão
- Constant – Texto #2 do botão
- Constant – Cor Botão (#hex)
- Constant – Cor Botão hover (#hex)
- Constant – Cor TEXTO Botão (#hex)
- Constant – Cor TEXTO Botão hover (#hex)
⚠️ IMPORTANTE: o código de cores a ser alterado deverá ser mediante o código hex de cores.
Assim basta editar as variáveis no GTM para alterar os textos ou as cores dos botões.
Porque é bom utilizar este método (razão)
Com este botão podem otimizar a orientação do vosso utilizador para que ele/ela não se esqueça que deve adicionar aquele produto ao carrinho. Podem ainda comunicar um desconto ou uma vantagem enquanto o texto se altera.
Se tiverem feedback ou necessitarem de ajuda estou por aqui e podem sempre falar comigo. Espero que este artigo vos ajude.