Marketo Form Prefill

[ssRD25]

Hi everyone,

We have embedded Marketo form on AEM landing page & want to prefill the form once the user logs in to the website. We have implemented a custom solution provided by Sanford (https://blog.teknkl.com/vital-update-to-simpledto-form-pre-fill-js-for-new-versions-of-chrome-edge/).

But the issue is if another user logs in using the same system, he sees the prefill data of the previous logged-in user.

Also, the form fields don't populate when logged in from any other device.

Is there a way to get the user data from Marketo based on the user's login email address or any unique identifier?

[Darshil_Shah1]

@ssRD25, you can implement a "Not You" link that a user can click if they want to reset the form -- the form will prefill as long as the munchkin cookie is associated with a known person in the DB. Additionally, when a person logs in from another device, they don't have their Munchkin token associated with their person record in Marketo, so that's the reason the form doesn't prefill in another system. Token association happens when a person fills out a form or clicks a tracked link in a Marketo email.

[SanfordWhiteman]

As Darshil says, you need to make sure the person's Munchkin session is associated on every device. This can be done via tracked link click, form fill, or even browser sync when it syncs cookies. But it won't happen automatically – there's no way for 2 devices that happen to be owned by the same person to magically sync cookie stores!

As for the existing association persisting, yes, that's how Marketo LP tokens work as well. You can’t have it both ways: either delete the cookie every time the form renders (meaning everyone starts with an anonymous form, defeating the concept of Pre-Fill) or let the person clear the cookie (the Not You? link Darshil mentions).

[ssRD25]

Thanks @SanfordWhiteman & @Darshil_Shah1 

Could a solution where a script is added to the Marketo form to fetch details via API work?

Example:

<script>
    MktoForms2.whenReady(function(mktoForm){
    // Function to get the value of a specific cookie by name
    function getCookieValue(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
        console.log('name');
    }
    
    // Function to get an access token from Marketo
    function getAccessToken(clientId, clientSecret, callback) {
        const authUrl = 'https://your-marketo-instance.mktorest.com/identity/oauth/token';
        fetch(`${authUrl}?grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`, {
            method: 'GET',
            mode: 'no-cors'
        })
        .then(response => response.json())
        .then(data => {
            console.log(`Access token: ${data.access_token}`);
            callback(data.access_token);
        })
        .catch(error => console.error('Error fetching access token:', error));
    }
    
    // Function to fetch lead details from Marketo
    function getLeadDetailsFromMarketo(ssoid, accessToken, callback) {
        const leadUrl = `https://your-marketo-instance.mktorest.com/rest/v1/leads.json?filterType=ssoid&filterValues=${ssoid}`;
        fetch(leadUrl, {
            method: 'GET',
            mode: 'no-cors',
            headers: {
                'Authorization': `Bearer ${accessToken}`
            }
        })
        .then(response => response.json())
        .then(data => {
            console.log(`Lead details from Marketo: ${JSON.stringify(data)}`);
            callback(data.result);
        })
        .catch(error => console.error('Error fetching lead details from Marketo:', error));
    }
    
    // Function to prefill form fields with lead details
    function prefillFormFields(leadDetails) {
        if (leadDetails) {
            document.querySelector('#FirstName').value = leadDetails.firstName || '';
            document.querySelector('#LastName').value = leadDetails.lastName || '';
            document.querySelector('#Email').value = leadDetails.email || '';
            document.querySelector('#Company').value = leadDetails.company || '';
            document.querySelector('#Country').value = leadDetails.country || '';
            document.querySelector('#State').value = leadDetails.state || '';
            document.querySelector('#subscriptionsMarketsIndustries').value = leadDetails.subscriptionsMarketsIndustries || '';
            document.querySelector('#subscriptionsMemory').value = leadDetails.subscriptionsMemory || '';
            document.querySelector('#subscriptionsStorage').value = leadDetails.subscriptionsStorage || '';
            document.querySelector('#JobFunction').value = leadDetails.jobFunction || '';
            document.querySelector('#JobLevel').value = leadDetails.jobLevel || '';
            document.querySelector('#ConsentGivenToContactForMktgInfo').value = leadDetails.consentGivenToContactForMktgInfo || '';
        }
    }
    
    // Example usage
    document.addEventListener('DOMContentLoaded', function() {
        const ssoid = getCookieValue('ssoid');
        const clientId = 'your-client-id';
        const clientSecret = 'your-client-secret';
    
        getAccessToken(clientId, clientSecret, function(accessToken) {
            getLeadDetailsFromMarketo(ssoid, accessToken, prefillFormFields);
        });
    });
});
    </script>

[SanfordWhiteman]

Absolutely, categorically, No. Not in any way, shape or form.

This connection will never work due to CORS restrictions; moreover, even if it did work, it would represent a trivial DoS vulnerability and an embarrassing data leakage vulnerability. The kind of thing that’s a fireable offense.

Overall, it’s not clear what problem you’re trying to solve that isn’t solved by appropriate use of SimpleDTO. 

[ssRD25]

@SanfordWhiteman, the use case is we wanted to prefill the preferences of users based on their login.

The page is an AEM landing page with Marketo form. The SimpleDTO works correctly to prefill the data, but when some other user tries to log in using same system, he would see the prefill data of the previous user.

So the idea was to fetch the value of a cookie when someone logs in, pass that value to Marketo & get the lead details. Once the lead record is fetched based on the cookie value i.e also a field in Marketo, we wanted to prefill the data on AEM landing page.

[SanfordWhiteman]

Delete the cookie (so a new one is recreated automatically by Munchkin) and submit a hidden form with the person’s Email Address. Poll the SimpleDTO page until the association completes (could take 100ms-1s). Then fill the visible form.

Check my blog post on “Building a Lead Lookup Form” for more details.

[Darshil_Shah1]

@ssRD25, I completely agree with Sandy. As a rule of thumb, you should never make API calls from your webpage/frontend. Doing so exposes your Marketo API credentials (Client ID and Secret) to the world to do whatever the API user has permission to do in your Marketo instance. As you can probably imagine, this can create major havoc in your instance and prove to be disastrous.