UTMs de marketing estão sendo passadas para o checkout

VTEX in your native language 🌎 Português
1

Opa,

De acordo com esse tópico anterior (UTMs de marketing estão sendo passadas para o checkout), o @rsantos em jun’22, parece ter encontrado a solução com o código abaixo:

function addMarketingData() {
    var IPS = getIPS()
    var utms = {
        utmCampaign: (IPS.indexOf('Campanha') != -1 ? IPS.split('Campanha=')[1].split('&')[0] : ""),
        utmMedium: (IPS.indexOf('Midia') != -1 ? IPS.split('Midia=')[1].split('&')[0] : ""),
        utmSource: (IPS.indexOf('Parceiro') != -1 ? IPS.split('Parceiro=')[1].split('&')[0] : ""),
    }
    vtexjs.checkout.sendAttachment('marketingData', utms);
}

function getIPS() {
    var IPS;
    document.cookie.split(';').forEach(function (cookie) {
        if(cookie.includes("IPS")){
            IPS = cookie;
        }
    });

    return IPS;
}

Gostaria de saber, por gentileza de alguém ou do próprio @rsantos, onde eu faço a inserção desse código e qual a maneira correta, dentro da tag ?

Desculpem, mas estou em produção e não posso errar essa alteração.

Obrigado e vamos seguindo.

2

Olá @EuGuSouza, quando os UTMs não estão sendo enviados para o checkout, o motivo normalmente é porque a ação de compra da sua loja foi personalizada e não utiliza o botão nativo da VTEX vtex.cmc:BuyButton/. Neste caso você vai precisar criar uma função como a mencionada em meu post e anexa-la a ação de compra, ou ainda ao botão finalizar compra se existir.

para enviar o marketingData ao orderForm utilizamos a função sendAttachment do módulo checkout do VTEX js, abaixo a documentação a respeito da função:

https://github.com/vtex/vtex.js/blob/master/docs/checkout/README.md#sendattachmentattachmentid-attachment-expectedorderformsections

Para verificar se deu certo você pode utilizar este guia:
https://developers.vtex.com/docs/guides/check-marketing-utms-used-at-checkout

Quanto a questão de testar em produção, você pode fazer de várias formas, duplicar seu site e deixar um site de homologação, utilizando os wids e ou lids:
https://developers.vtex.com/docs/guides/validating-a-layout-before-moving-it-to-production
ou até executar seus testes diretamente no console do navegador, fazendo com que a função seja executada apenas para você.