Skip to content

Instantly share code, notes, and snippets.

@garrucho
Last active April 8, 2022 13:38
Show Gist options
  • Save garrucho/aafb1d8b13b92d5b2171 to your computer and use it in GitHub Desktop.
Save garrucho/aafb1d8b13b92d5b2171 to your computer and use it in GitHub Desktop.
Configurações para rastrear a pesquisa interna da VTEX com o Google Analytics, parametrizando via GTM.

[VTEX] Método para rastrear pesquisas internas do site com o Google Analytics

Na VTEX, a tag do Google Analytics sempre é inserida através do Google Tag Manager, para ser executada em todo o site. Iremos personalizá-la para que, sempre que disponível, as keywords da busca realizada pelo usuário sejam enviadas ao GA.

Faremos isso personalizando a URL rastreada por ele, como se a VTEX sempre as colocasse no parâmetro ft. Ex: www.site.com/celular-android?ft=celular%20android

Este método não irá duplicar ou afetar os dados rastreados pelo Analytics e irá aproveitar o recurso de Pesquisa Interna nele já existente.

Variáveis (macros) necessárias

  • {{searchTerm}} = tipo "Variável da camada de dados", nome da variável "siteSearchTerm". Estará presente no dataLayer de toda página de busca, tendo como valor as keywords da pesquisa do usuário.
  • {{searchUrlFT}} = tipo "URL", componente "Consulta", chave de consulta "ft". Para caso a URL já possua o parâmetro (querystring) ft.
  • {{searchVirtualPath}} = tipo "JavaScript Personalizado", com o script abaixo. Irá verificar se existe alguma keyword no dataLayer e também se já existe o parâmetro ft na URL e, com base nisto, montando a URL personalizada que será enviada ao GA.
function() {
    if ( {{searchTerm}} !== undefined && {{searchUrlFT}} === undefined ) {
        var sep = ({{Page URL}}.indexOf('?') > -1) ? '&' : '?';
        return {{Page Path}}
               + window.location.search + sep
               + 'ft=' + {{searchTerm}}
               + window.location.hash;
    }
    return;
}
  • Certifique-se de que estão ativadas as macros (variáveis) de Páginas (quadro verde) de nomes Page URL e Page Path.

Personalizando a Tag

De certo que sua loja já possui no GTM uma Tag do Google Analytics, tipo "Exibição de Página", sendo executada incondicionalmente em todo o site.

Bastará em, "Mais configurações > Campos a serem definidos", incluir um campo de nome page, com valor {{searchVirtualPath}}.

Caso não exista uma keyword válida na página, não haverá um searchVirtualPath personalizado, então o valor de page não será alterado. Caso exista uma keyword, as macros já criadas irão definir um novo searchVirtualPath, o qual inclui o ft na URL, e isso será passado ao Google Analytics.

Configurando o Google Analytics

Nele bastará ativar o rastreio da busca interna, tendo como parâmetro de consulta a chave ft.

@garrucho
Copy link
Author

garrucho commented Apr 8, 2022

@gabrielhakin Oi! Não atuei mais diretamente nessas frentes, então acabo não tendo nada.

Sei que a interface do GTM mudou bastaaaaaante, mas os conceitos deveriam ser os mesmos. Do lado da VTEX, exceto seja uma loja com tecnologia atualizada (VTEX IO Store Framework), tudo deve seguir igual em torno desse uso também. Mas não saberei ajudar. :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment