Marketing UTMs are being passed to checkout

VTEX in your native language 🌎 Portuguese
1

Hey,

According to this previous topic (UTMs de marketing estão sendo passadas para o checkout), @rsantos back in Jun '22 seems to have found the solution with the code below:

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;
}

I’d like to know, if someone or @rsantos themselves could help me out — where exactly do I insert this code, and what’s the correct way to do it, inside the <script> tag?

Apologies, but I’m in a production environment and can’t afford to get this wrong.

Thanks, and let’s keep it going.

2

Hi @EuGuSouza, when UTMs are not being sent to the checkout, the reason is usually because the purchase action in your store has been customized and does not use the native VTEX button vtex.cmc:BuyButton/. In this case, you will need to create a function like the one mentioned in my post and attach it to the purchase action, or to the complete purchase button if one exists.

To send the marketingData to the orderForm, we use the sendAttachment function from the VTEX JS checkout module. Below is the documentation for that function:

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

To verify whether it worked, you can use this guide:
https://developers.vtex.com/docs/guides/check-marketing-utms-used-at-checkout

As for testing in production, you can do this in several ways — duplicate your site and set up a staging environment using wids and/or lids:
https://developers.vtex.com/docs/guides/validating-a-layout-before-moving-it-to-production
or even run your tests directly in the browser console, so the function only runs for you.