Embedded Files
Solução community "SME's"
Solução community "SME's"
Onde usar o Enhanced Conversion?
Onde usar o Enhanced Conversion?
Um erro muito frequente comitido em tarefas de Enhanced Conversion é achar que ela se trata apenas de uma captura de e-mail no instante da conversão. Então, grave isso com você: Enhanced Conversion não é pegar apenas o email. A não ser que o site apenas o forneça, faz sentido, mas se você tiver a oportunidade de agregar o telefone junto ao e-mail, OU, pegar nome completo e endereço, sua conversão fica mais qualificada e corre-se menos o risco de ter erros de diagnósticos.
Sabendo disso, onde usar o Enhanced Conversion? Confira os Tipos de site:
Formulários de contato;
Botões de WhatsApp que contém um preenchimento de formulário prévio;
Sites de compra que não exigem cadastro;
Sobre CMS e conversões de compra
Sobre CMS e conversões de compra
Alguns CMS são limitados e, como a maioria deles são voltados para compras, todos eles exigem um cadastro, o que inviabiliza o Enhanced Conversion em termos de compra. A compra de um produto geralmente passa por um processo de cadastro prévio - pelo qual cria-se um perfil com login e senha. Assim a escolhe-se frete e pagamento e a compra é concluída.
O problema é que um usuário, quando tem conta ou já está logado, "pula" esse passo. Logo, a conversão de compra não se entrosa com o código que desenvolvemos. Por isso que para sites que exigem cadastro prévio para compra não são a melhor opção.
Os CMS para qual esta solução não é recomendada:
Drupal
Jumpseller
Loja Integrada
Magento
Nuvemshop/Tiendanube
OpenCart
Prestashop
Shopify
Tray
VTEX
Wordpress (WooCommerce)
Ao encarar qualquer um destes CMS e for exigido o Enhanced Conversion de compra, recomende ao cliente melhorias na página ou procure algumas integrações já divulgadas para Shopify ou Wordpress.
O código
O código
Desenvolvemos uma solução voltada em poucos esforços por parte do agente durante seu uso. As operações necessárias serão:
capturar seletores dos campos de preenchimento;
remover do código o que não corresponde à conversão;
aplicar a validação
Repare que, dos citados acima, apenas a validação da conversão não vem inclusa neste código, pois é uma ação variada. Repare também que o código a seguir contém comentários que adicionamos para que você se localize com mais facilidade. Em apenas dois momentos você deve excluir conteúdos pelos quais não serão utilizados.
Confira:
O que saber sobre o código?
O que saber sobre o código?
Vamos destrinchá-lo para entendê-lo.
Seletores
Seletores
A primeira parte refere-se a aplicação de seletores. Você pode inserir mais de um seletor CSS por parâmetro separado por vírgulas. Nesta parte pedimos que utilize apenas os parâmetros que deseja capturar.
Exemplo: vamos supor que uma página de divulgação de um curso ofereça três formulários de contato, sendo um no início da navegação, outro no final da navegação e outro na página de contato. Desse modo, por se tratar de um lead, pegaremos o básico, e-mail e telefone. Como ficaria? Devemos pegar os seletores de cada um dos campos e-mail e telefone e, como dito, separá-los por vírgula. Note:
var g_ED = {
"email" : "main > div.top.contactForm > div.formArea > form > input.fieldEmail, input[name='email'], #email"
"phone_number" : "#phone, input[name='phone'], main > #contactForm > div.pageAreaForm > form > input.phone"
}
Note os diferentes seltores CSS acima, uns com diversas classes, outros com apenas o ID e outros com o nome do campo.
Complementos
Complementos
Algumas exigências às vezes não são visíveis no formulário. Nesse caso, é possível prever e escrevê-los manualmente. Para campos de telefone, insira no valor da variável g_countrycode o código de área referente ao país e, para o país, insira o valor na variável g_country seu nome.
var g_countrycode = '+55';
var g_country = 'Brasil';
Caso não seja necessário o uso de ambos ou de um deles, remova-os.
Funções
Funções
Entenda como ele funciona. O código é dividido em três funções pelas quais operam e validam a captura de dados.
g_save_toLocalStorage
O código começa com a declaração da variável enhanced_conversion_data. Elas está criada ao "nível" da janela e não do DOM. Em seguida, a função começa, disparando após a invocação de um DOM Event conhecido como input. O evento ocorre quando se interage com a caixa de texto. Dado o acionamento do evento, a função g_save_toLocalStorage() dispara. Nela, busca-se pelo parâmetro e o valor de cada um dos seletores selecionados anteriormente. O loop a seguir contém um condicional com um método chamado matches pelo qual reconhece a existência destes seletores no site e confirma a criação do localStorage. Ao final, a função g_setup_Enhanced_Conversion_Data() é acionada.
window.enhanced_conversion_data = window.enhanced_conversion_data || {};
document.addEventListener('input', g_save_toLocalStorage);
function g_save_toLocalStorage(e) {
var input = e.target;
for(i in g_ED) {
if(input.matches(g_ED[i]) ){
localStorage['g_'+ i] = input.value;
}
}
g_setup_Enhanced_Conversion_Data();
}
O localStorage terá o nome concatenando g_ com o nome do parâmetro que continha os seletores. Exemplo: g_email ou g_first_name.
g_setup_Enhanced_Conversion_Data
Esta função é mais direta. Trata-se de um loop que desmenbra o objeto g_ED criado no começo do código que contém condicionals pelos quais identificam a existência do localStorage. Uma vez reconhecido, seu valor é agregado na variável enhanced_conversion_data.
function g_setup_Enhanced_Conversion_Data(){
for(i in g_ED) {
if(localStorage['g_' + i]) {
if(i == 'valor') {
window.enhanced_conversion_data[i] = localStorage['g_' + i];
}
}
}
}
g_validateEmail()
A parte final do código trata-se apenas de validações, pelo qual valida a existência do email.
function g_validateEmail(email) {
return /\S+@\S+\.\S+/.test(email);
}
Como validar a conversão?
Como validar a conversão?
Uma vez que tudo foi capturado pelo código acima, a conversão está pronta para ser disparada. E, como tradicionalmente fazemos, explicamos tanto por gtag.js quanto via Google Tag Manager.
Antes, é preciso saber que os valores capturados são lidos através do acionamento destas variáveis:
enhanced_conversion_data.email
enhanced_conversion_data.phone_number
enhanced_conversion_data.first_name
enhanced_conversion_data.last_name
enhanced_conversion_data.home_address.street
enhanced_conversion_data.home_address.city
enhanced_conversion_data.home_address.region
enhanced_conversion_data.home_address.postal_code
enhanced_conversion_data.home_address.country
Global Site Tag (gtag.js)
Global Site Tag (gtag.js)
Para vosso conforto, este modo é o mais simples e direto. Apenas acione a conversão que precisa. Tem dúvida sobre a ordem? Veja a melhor colocação a seguir:
1- Tag Global
2- Código Enhanced Conversion
3- Snippet da conversão
Lembre-se que o Enhanced Conversion precisa estar habilitado no config do bloco de código da Tag Global usando o parâmetro 'allow_enhanced_conversion' : true.
Google Tag Manager
Google Tag Manager
Seguindo o mesmo padrão do gtag.js, as conversões por GTM são recomendadas ter seu disparo por código, agregando conteúdo no Data Layer. Porém, é possível usar um acionador tradicional - como Page View, Form Submit ou Element Visibility. Vamos explicar ambos.
1- Por código no HTML Personalizado.
Agregue o código do Enhanced Conversion mais o código de disparo dataLayer.push(). Pode ser tudo dentro da mesma tag HTML Personalizado e do mesmo script. É a mesma lógica do snippet de conversão do gtag.js, porém, no lugar dele, adiciona-se um método de inserção de conteúdo no Data Layer. Lembre-se que toda inserção no Data Layer deve ter uma linha indicando um parâmetro event com um valor aleatório de sua escolha.
Confira um exemplo usado para um envio de formulário:
dataLayer.push({
'event' : 'submit',
'email' : enhanced_conversion_data.email,
'phone_number' : enhanced_conversion_data.phone_number
});
Repare que, além do evento com valor submit, adicionamos duas variáveis de camada de dados com os nomes email e phone_number. Seus valores são as variáveis do código retornadas no parâmetro.
Basta o agente criar estas variáveis e agregá-las aos Dados Fornecidos pelo usuário
Outro exemplo é se o agente estiver capturando uma conversão de compra. O Data Layer precisará receber não apenas os dados tradicionais de valor e ID da transação, mas também os dados referentes a nome completo e endereço. Sendo assim, o melhor a fazer é:
dataLayer.push({
'event' : 'purchase',
'value' : 1951.14,
'transaction_id' : '#00003515A',
'first_name' : enhanced_conversion_data.first_name,
'last_name' : enhanced_conversion_data.last_name,
'street' : enhanced_conversion_data.home_address.street,
'city' : enhanced_conversion_data.home_address.city,
'region' : enhanced_conversion_data.home_address.region,
'postal_code' : enhanced_conversion_data.home_address.postal_code,
'country' : enhanced_conversion_data.home_address.country
});
2- Variável JavaScript
Como mencionado no inicio, o código retorna para o site variáveis JavaScript que ficam à disposição para usarmos onde quisermos - inclusive no Google Tag Manager. Esse procedimento auxilia o agente a usar acionadores tradicionais como disparo e usar as variáveis como validação do Enhanced Conversion.
Importante: estamos falando de variável JavaScript e não variável de camada de dados
Para isso, acesse Variáveis, clique em Nova e escolha a opção Variável JavaScript
O valor deve ser o caminho da variável gerada. No exemplo abaixo, se estamos buscando o valor do e-mail, inserimos portanto enhanced_conversion_data.email.
Crie todas as que precisar e agrega elas também aos Dados do Usuário.
Exemplos
Exemplos
Observe a página https://www.valesuico.com.br/obrigado/:
Nesta página eu preenchi um formulário na página anterior, da qual continha os campos e-mail e telefone que me interessaram capturar para fazer a conversão melhorada.
Como ficaria usando o gtag?
Como ficaria usando o gtag?
Primeiro insira a tag global:
<!-- Global site tag (gtag.js) - Google Ads: XXXXXXXXX -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'AW-XXXXXXXXX', {
'allow_enhanced_conversions' : true
});
</script>
<script>
//Código para Enhanced Conversion devidamente editado
//(não vou inserí-lo aqui para não extender o post =P).
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM is ready for action");
if(window.location.href.includes("/obrigado/")) {
console.log("Thank you!");
//Código de conversão aqui
}
});
</script>
Como ficaria usando o Tag Manager por evento personalizado no Data Layer?
Como ficaria usando o Tag Manager por evento personalizado no Data Layer?
1- Acesse o Google Tag Manager, clique em Tags e, em seguida, Nova;
2- Escolhe HTML Personalizado;
3- Insira o código a seguir;
<script>
//Código para Enhanced Conversion devidamente editado
//(também não vou inserí-lo aqui para não extender o post =P).
</script>
<script>
if(window.location.href.includes("/obrigado/")) {
console.log("Thank you!");
dataLayer.push({
'event' : 'submit',
'email' : enhanced_conversion_data.email,
'phone_number' : enhanced_conversion_data.phone_number
})
}
</script>
4- Adicione o acionador DOM Ready para o HTML Personalizado e salve;
5- Acesse Acionadores, clique em Novo e crie um evento personalizado com valor submit;
6- Acesse Variáveis, clique em nova e crie duas variáveis de camada de dados com os valores email e phone_number;
7- Agregue o acionador e as variáveis na tag de conversão do Google Ads;
Referencias
Referencias
Todo conteúdo acima veio do community que foi inserido pelo SME CAIO.
Links de referencia
https://community.webtech.dev.br/d/314-google-ads-como-validar-o-enhanced-conversion
https://community.webtech.dev.br/d/312-google-ads-onde-usar-o-enhanced-conversion
Page updated
Google Sites
Report abuse