Imagine isso. Você está veiculando uma campanha promocional que traz tráfego para uma determinada página de destino (por exemplo, landingpage.com). Depois que o visitante clica no botão principal de call-to-action (por exemplo, OBTENHA SEU DESCONTO), ele é redirecionado para outra página (2ndpage.com) que solicita que o visitante faça a ação final, instale o aplicativo, preencha o formulário, inscreva-se, etc.
Quando a conversão é concluída, um evento do Google Analytics é disparado. Infelizmente, quando você analisa seus relatórios do Google GA, o que você verá é que todas as conversões são atribuídas ao landingpage.com. Tecnicamente, isso está correto porque todos os visitantes desembarcaram no 2ndpage.com de landingpage.com, mas você gostaria de ver a fonte original que trouxe o visitante, não é?
Normalmente, você precisaria implementar o rastreamento entre domínios aqui, mas em alguns casos, isso não é possível (explicarei um pouco mais tarde).
Nesta postagem do blog, mostrarei como transferir parâmetros UTM (ou basicamente quaisquer parâmetros de URL) da página inicial landingpage.com para a subsequente (2ndpage.com) se o rastreamento entre domínios não puder ser implementado.
O problema explicado
Digamos que você esteja promovendo um produto que está disponível na App Store (por exemplo, Shopify App Store). Vamos chamá-lo de Lorem Appsum. Sua página na App Store não é suficiente para listar todos os benefícios, recursos interessantes, etc. Então você decidiu criar uma página de destino separada para a qual direcionará o tráfego. Você também marcou todos os links de entrada (armazenados em outros sites/fóruns/etc.) que levam os visitantes a essa página de destino com parâmetros UTM.
Essa nova página de destino contém os principais pontos de venda, descrições de recursos, um vídeo e um grande botão GET APP NOW (Call-to-action, também conhecido como CTA). Perfeito. O visitante acessa a página inicial, clica no botão CTA na página da App Store e instala o aplicativo. Aqui está o esquema de toda a jornada do visitante:
Observe que os parâmetros UTM são perdidos depois que o visitante clica em um link appstore.com em loremappsum.com página.
O problema é que o Google Analytics atribuirá essa conversão a loremappsum.com, embora seja mais benéfico ver os valores dos UTMs iniciais.
A solução – Visão geral
Atualização: esta é a versão 2 da solução. Com ele:
- você poderá transferir quaisquer parâmetros de consulta (não apenas UTMs)
- você não precisará criar variáveis de URL
- Você pode decorar links de vários domínios
- e os parâmetros de consulta que você deseja transferir são opcionais (isso significa que, se utm_campaign não estiver presente na URL, a solução ainda funcionará).
====
Uma das soluções é transferir parâmetros UTM do loremappsum.com e adicioná-los automaticamente a todos os links que redirecionam os usuários para appstore.com/loremappsum. Faremos isso com o Gerenciador de tags do Google e um script personalizado.
Importante: se você perceber que o script não está funcionando em alguma situação, por favor me avise e verei o que posso fazer para corrigi-lo.
<script>
(function() {
var domainsToDecorate = [
'domain1.com', //add or remove domains (without https or trailing slash)
'domain2.net'
],
queryParams = [
'utm_medium', //add or remove query parameters you want to transfer
'utm_source',
'utm_campaign',
'something_else'
]
// do not edit anything below this line
var links = document.querySelectorAll('a');
// check if links contain domain from the domainsToDecorate array and then decorates
for (var linkIndex = 0; linkIndex < links.length; linkIndex++) {
for (var domainIndex = 0; domainIndex < domainsToDecorate.length; domainIndex++) {
if (links[linkIndex].href.indexOf(domainsToDecorate[domainIndex]) > -1 && links[linkIndex].href.indexOf("#") === -1) {
links[linkIndex].href = decorateUrl(links[linkIndex].href);
}
}
}
// decorates the URL with query params
function decorateUrl(urlToDecorate) {
urlToDecorate = (urlToDecorate.indexOf('?') === -1) ? urlToDecorate + '?' : urlToDecorate + '&';
var collectedQueryParams = [];
for (var queryIndex = 0; queryIndex < queryParams.length; queryIndex++) {
if (getQueryParam(queryParams[queryIndex])) {
collectedQueryParams.push(queryParams[queryIndex] + '=' + getQueryParam(queryParams[queryIndex]))
}
}
return urlToDecorate + collectedQueryParams.join('&');
}
// borrowed from https://stackoverflow.com/questions/831030/
// a function that retrieves the value of a query parameter
function getQueryParam(name) {
if (name = (new RegExp('[?&]' + encodeURIComponent(name) + '=([^&]*)')).exec(window.location.search))
return decodeURIComponent(name[1]);
}
})();
</script>
Quando o visitante chegar a loremappsum.com E o URL da página contiver utm_medium, utm_source ou qualquer outro parâmetro de URL (no qual você esteja interessado), a tag será acionada. Ele verificará a página inteira e procurará links que contenham o(s) domínio(s) da página de destino final, neste caso, appstore.com.
Se o script encontrar o link, ele irá:
- Busque parâmetros de URL (por exemplo, UTMs) na barra de endereços do navegador.
- E adicionará esses parâmetros a esse link manchado (que contém “appstore.com”).
Então, em vez de appstore.com/loremappsum, todos os links no loremappsum.com serão modificados automaticamente para appstore.com/loremapsum?utm_medium=referral&utm_source=promo &utm_campaign=blackfriday2017. Aqui está o fluxo de visitantes atualizado:
Esta solução não cobre 100% dos casos
Existem situações em que esta solução não funcionará corretamente:
- Se os URLs que você deseja decorar contiverem #, tente usar a versão mais antiga da solução
- Se os URLs que você deseja decorar já contiverem parâmetros de consulta (também conhecidos como URL) da tag HTML personalizada, eles não serão substituídos. O script irá anexá-los ao URL (portanto, você acabará com parâmetros duplicados).
Notou mais situações em que o script não funciona conforme o esperado? Deixe-me saber nos comentários e verei o que posso fazer.
A Solução – Implementação em GTM
No Gerenciador de tags do Google, crie uma tag HTML personalizada e cole o código JavaScript que forneci no capítulo anterior.
Agora, precisamos fazer alguma configuração.
Editar a lista de domínios
Na linha 3, você verá esta matriz domainsToDecore:
var domainsToDecorate = [
'domain1.com', //add or remove domains (without https or trailing slash)
'domain2.net'
],
Aqui você deve inserir o(s) domínio(s) da(s) página(s) de destino final. Se um visitante acessar a página de aterrissagem intermediária, o script procurará links que contenham os domínios da matriz domainsToDecore.
Em outras palavras, se a jornada for alguma > loremappsum.com > appstore.com do site, você deverá inserir “appstore.com” na matriz domainsToDecoração.
Se você quiser decorar URLs de apenas um domínio, poderá manter apenas um domínio. Se você quiser adicionar 4 domínios, você também pode fazer isso. Apenas certifique-se de não deixar erros de digitação, vírgulas ou apóstrofos ausentes.
Se você quiser ser mais específico e decorar apenas alguns links, pode ser ainda mais específico. Em vez do appstore.com, você pode inserir appstore.com/your-app.
Aqui está um exemplo com apenas um domínio (obviamente, você deve substituir esse domínio):
var domainsToDecorate = [
'appstore.com'
],
Adicionar parâmetros de URL que você quer transferir
Em seguida, você deve editar a lista de parâmetros de URL que deseja obter do URL da página e transferi-los para links de saída (saída) específicos.
Se, por exemplo, o URL da página (onde um visitante está atualmente) for https://www.loremappsum.com/?utm_medium….., esses parâmetros (por exemplo, utm_medium) serão adicionados a todos os URLs do appstore.com, por exemplo, https://appstore.com/loremappsum/?utm_medium…
queryParams = [
'utm_medium', //add or remove query parameters you want to transfer
'utm_source',
'utm_campaign',
'something_else'
]
O que é legal com a atualização recente desta solução é que:
- Você não precisa criar variáveis GTM para cada parâmetro
- Você pode transferir qualquer parâmetro de URL (também conhecido como parâmetro de consulta), não apenas UTMs
- Os parâmetros inseridos na matriz queryParams são todos opcionais. Se o URL da página não contiver, digamos, utm_campaign, o script ainda funcionará bem
- Os UTMs também podem conter um sinal “+”. Ele será transferido sem problemas e não será codificado para %2B.
Aqui está um exemplo do que a configuração poderia ser:
queryParams = [
'utm_medium',
'utm_source',
'utm_campaign',
'ref'
]
Salve a tag. Agora, é hora de um gatilho.
Gatilho
Você não deseja disparar essa tag HTML personalizada em todas as páginas. Em vez disso, você deve ativá-lo somente quando a URL contiver pelo menos um desses parâmetros de consulta que você deseja transferir. Vamos continuar nosso exemplo em que inseri esses parâmetros de consulta na tag HTML personalizada:
queryParams = [
'utm_medium',
'utm_source',
'utm_campaign',
'ref'
]
Portanto, se algum desses parâmetros estiver no URL, a tag HTML personalizada deverá ser acionada. Cada parâmetro na URL também deve conter um sinal de “igual” (=), portanto, a condição do nosso gatilho deve ser assim:
- Tipo de gatilho: pronto para DOM
- Dispare em alguns eventos prontos para DOM
- O URL da página corresponde a RegEx (ignorar maiúsculas e minúsculas) utm_medium=|utm_source=|utm_campaign=|ref=
O que fiz aqui foi adicionar “=” após cada parâmetro e depois separá-los com uma barra vertical ( | ), que em Expressões Regulares significa “OU”. Claro, poderíamos escrever uma expressão mais otimizada, como:
utm_(medium|source|campaign)=|ref=
… ou algo ainda mais fino, mas mesmo o primeiro exemplo funcionará bem. Se você não se sentir confiante com regex, basta inserir todos os parâmetros de consulta de seu interesse, adicionar “=” após cada um deles e separá-los com um |.
Salve esse gatilho e atribua-o à tag HTML personalizada.
Vamos testar
Salve todas as alterações e ative o modo de visualização e depuração. Agora vá para a página em que você está trabalhando. Existem duas situações que precisamos testar:
- Certifique-se de que pelo menos um dos parâmetros de consulta (que você deseja transferir) esteja na URL da página. No meu caso, o URL da página é www.loremappsum.com?utm_medium=referral&utm_source=promo &utm_campaign=blackfriday2017
- Clique no link que contém o nome de domínio que você definiu no script personalizado que compartilhei nesta postagem do blog. No meu caso, é www.appstore.com/loremappsum
- Depois que eu for redirecionado, o URL da página (appstore.com/loremappsum) também deve conter esses 3 parâmetros UTM. O resultado final na barra de endereços do navegador deve ser www.appstore.com/loremappsum?utm_medium=referral&utm_source=promo &utm_campaign=blackfriday2017
Além disso, não se esqueça de testar a situação oposta quando não houver UTMs (ou outros parâmetros) na barra de endereços. Nesse caso, nada deve ser anexado a appstore.com links.
Ah, há também um terceiro caso para testar. Verifique pelo menos alguns outros links externos (não relacionados a appstore.com). Eles nunca devem conter parâmetros UTM.
Transferir parâmetros UTM: palavras finais
Nesta postagem do blog, expliquei como transferir parâmetros UTM (ou quaisquer outros parâmetros de URL) de uma página para outra. Isso é realmente útil quando você tem uma página de destino intermediária para a qual está atraindo visitantes e, em seguida, eles precisam prosseguir para a página final, que está armazenada em outro domínio.
Esse é um plano B se você não puder implementar o acompanhamento de vários domínios por algum motivo.
Por padrão, você perderia todos os dados de atribuição, e o Google Analytics exibiria sua página de destino intermediária como a referência principal.
Com o script que compartilhei, você poderá reutilizar os parâmetros UTM da página inicial e decorar certos links com eles.
No entanto, lembre-se de que, obviamente, a navegação entre a página intermediária e o destino final iniciará uma nova sessão (e a mesma pessoa ainda será tratada como duas pessoas diferentes em seus relatórios do GA).
A situação que descrevi não é um problema muito comum, mas ocorre de tempos em tempos. Na verdade, um dos meus leitores recentemente fez uma pergunta relacionada a este tópico.
Tradução: Transfer UTM Parameters From One Page To Another with Google Tag Manager
Também siga o Mundo do Traqueamento em outras redes sociais:
Inscreva-se no https://www.youtube.com/channel/UC6mX6bbcEmQoaznI0D7Aw5Q
Siga e curta no https://www.instagram.com/mundodotraqueamento/
Siga e comente no https://twitter.com/traqueamento
Siga também no https://www.linkedin.com/company/mundo-do-traqueamento
