Como adicionar um alerta de abandono no checkout (ou outra página) com GTM
Neste artigo vamos falar de como podemos adicionar um alerta de abandono no checkout (ou outra página) com Google Tag Manager (GTM). O objetivo deste alerta é de diminuir a taxa de abandono das páginas importantes (como o checkout).
⚠️ IMPORTANTE: leiam como funciona para evitar falsos positivos.
Exemplo: tentem fechar este separador 😃
Índice
Adicionar um alerta de abandono no checkout com GTM (implementação)
1 O primeiro passo é fazer o download do container do Google Tag Manager (GTM) de mensagens de alerta de checkout.
Download alerta checkout GTM
2 Para instalar as configurações de GTM é 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 agora alterar o trigger (acionador) do GTM para que este aviso dispare apenas nas páginas de de Checkout.
A configuração do GTM que importaram tem como pré-definido o disparado deste alerta apenas em páginas que tenham /checkout/ no URL do vosso site.
Como funciona esta configuração (contexto)
É muito importante perceber como esta configuração funciona de forma a evitar falsos positivos. Por exemplo, se o utilizador clicar num link ou um botão para ir para a próxima página do checkout é importante que o aviso não apareça.
Sendo assim, o aviso vai ser anulado (não vai aparecer) sempre que o utilizador clicar num link interno do vosso site ou se clicar num botão.
Por exemplo, se clicarem no botão infra, já vão conseguir fazer um refresh nesta página sem que o aviso apareça.
⚠️ Este aviso é criado pelo browser e tem mensagens standard que não são possíveis de alterar/personalizar.
⚠️ A língua (português, inglês, etc.) utilizada depende da configuração do browser do utilizador.
⚠️ De forma a combater um abuso de pop-ups, o browser só irá mostrar a mensagem se o utilizador interagir com a página.
Esta configuração utiliza uma função suportada pelos browsers com o nome onbeforeunload.
Podem consultar mais sobre esta função aqui ou ver os exemplos das mensagens de alerta infra:
O sistema de alertas dos browsers e compatibilidade:
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
onbeforeunload |
Chrome Full support1 |
Edge Full support12 |
Firefox Full support1 |
Internet Explorer Full support4 |
Opera
Full support12 |
Safari
Full support3 |
WebView Android
Full support1 |
Chrome Android
Full support18 |
Firefox for Android
Full support4 |
Opera Android
Full support12 |
Safari on iOS
Full support1 |
Samsung Internet
Full support1.0 |
|
Custom text support |
Chrome
No support? – 51 |
Edge
No supportNo |
Firefox
No support? – 44 |
Internet Explorer
Full supportYes |
Opera
No support? – 38 |
Safari
No support? – 9 |
WebView Android
No support? – 51 |
Chrome Android
No support? – 51 |
Firefox for Android
No support? – 44 |
Opera Android
No support? – 41 |
Safari on iOS
No supportNo |
Samsung Internet
No support? – 5.0 |
Porque é bom utilizar este método (razão)
As grandes vantagens de utilizar esta configuração prendem-se sobretudo com:
- Diminuir a taxa de abandono no processo de checkout
- Aumentar a taxa de conversão no processo de checkout
- Ajudar o utilizador a não fechar a página sem querer
Contudo, é importante que este processo não seja abusado.
Por exemplo, convém apenas adicionar estes alertas só em páginas importantes do site de forma a não cansar o utilizador e prejudicar a sua experiência.
Se tiverem feedback ou necessitarem de ajuda estou por aqui e podem sempre falar comigo. Espero que este artigo vos ajude.