Olá, neste tutorial vamos mostrar como cadastrar o autenticador do google one tap.
São 3 peças que se conectam:
- Google Cloud Console — autoriza o domínio da loja a usar o login.
- Loja (campo EXTRA_HEAD) — expõe pro JavaScript se o visitante já está logado (
window.__customer__). Isso o GTM não consegue fazer sozinho — só o servidor sabe quem está logado. - GTM — exibe a notificação e envia o login pro servidor.
⚠️ Por que o passo 2 é obrigatório: o GTM roda no navegador e não sabe se a pessoa já fez login na loja. Sem ele, a notificação apareceria até para quem já está logado. O passo 2 é uma linha no servidor que "avisa" o GTM.
Passo 1 — Configurar login do Google na Plataforma Convertize
- Acesse o tutorial Login com Google para auxiliar no processo da inclusão.
Passo 2 — Expor o login no JavaScript (no painel da loja)
Isto vai no EXTRA_HEAD da loja no menu (Configurações → Loja → Snippet HTML > Campo de código no <head>).
Cole exatamente isto:
<script>
window.__customer__ = "{% if request.customer %}{{ request.customer.uuid }}{% endif %}";
</script>
O que isso faz: se o visitante está logado, window.__customer__ fica preenchido; se não está, fica vazio. O GTM usa isso para decidir se mostra ou não a notificação.
Algumas lojas (layout novo) já expõem o
window.__customer__automaticamente. Mesmo assim, manter essa linha não causa problema — ela só reforça. Em caso de dúvida, adicione.
Salve as configurações da loja.
Passo 3 — Criar a tag no Google Tag Manager
- Abra o GTM da loja → menu Tags → Novo.
- Dê um nome, ex.:
Google One Tap. - Em Configuração da tag, escolha HTML personalizado.
- Cole o código abaixo — troque
SEU_CLIENT_ID...pelo Client ID do Passo 1:
<script>
(function () {
// Só exibe para quem NÃO está logado (lê o valor exposto no Passo 2)
if (window.__customer__) return;
var s = document.createElement('script');
s.src = 'https://accounts.google.com/gsi/client';
s.async = true; s.defer = true;
s.onload = function () {
google.accounts.id.initialize({
client_id: 'SEU_CLIENT_ID',
use_fedcm_for_prompt: true,
callback: function (resp) {
var body = new FormData();
body.append('credential', resp.credential);
fetch('/api/1.0/public/order/authentication/provider/', { method: 'POST', body: body })
.then(function (r) { return r.json(); })
.then(function (d) { if (d && d.success) window.location.reload(); });
}
});
google.accounts.id.prompt();
};
document.head.appendChild(s);
})();
</script>
- Em Acionamento (Triggering), escolha All Pages / Todas as páginas (tipo: visualização de página).
- Salvar.
- Clique em Enviar / Submit (canto superior direito) e depois Publicar para a alteração ir ao ar.
Passo 4 — Testar
- Abra a loja em uma aba anônima, com uma conta Google logada no navegador, sem estar logado na loja.
- A notificação do Google deve aparecer (canto superior em desktop, tarja inferior no celular).
- Clique em Continuar → a página recarrega e você fica logado na loja.
- Repita já logado na loja → a notificação não deve aparecer.
Dica: use o modo de visualização (Preview) do GTM para confirmar que a tag
Google One Tapestá disparando.
Solução de problemas
| Sintoma | Causa provável | O que fazer |
|---|---|---|
| Não aparece nada | Domínio não autorizado no Google | Confirme o Passo 1 (origens JavaScript), aguarde a propagação |
| Aparece para quem já está logado | window.__customer__ não foi exposto | Confirme o Passo 2 no EXTRA_HEAD e republique |
| Não aparece nunca, mesmo deslogado | Você fechou a notificação antes | O Google tem "período de espera" — teste em outra aba anônima / outro navegador |
| Só aparece depois de aceitar cookies | Banner de consentimento (CMP) segura o GTM | Configure a tag para disparar independente de consentimento (login é funcionalidade necessária) |
| Erro no console sobre script bloqueado | Política de segurança (CSP) na loja | Liberar accounts.google.com na CSP (peça ao suporte técnico) |