Associate Leads from external site to Marketo Landing Page

[Cory_Colt]

We created a "manage subscription" form and created a marketo landing page for it. The form is set to prefill the form fields. We're having an issue getting the form to populate with the user's information. 

Currently we have a website separate from Marketo, but we're trying to integrate our website with some Marketo functionality. We're trying to provide a user with a link "Manage Subscriptions and Preferences" which takes them to a marketo landing page we created with the custom form referenced above.

How do we accomplish this functionality to allow the user to click on the link, but then be taken to a marketo landing page with the form populated already with the user's information? 

What I've done: 

I'm using the Associate Lead REST API functionality to associate the lead, so I'm sending a POST request with the user's marketo ID and munchkin cookie information. I'm getting back a status code of 200 (OK), but the form still isn't populating. 

This seems like such common functionality that I'm a little confused as to why it's not called out in the documentation. I've spent HOURS and HOURS at this point going through the documentation, but I'm at a loss on this one. Any help would be greatly appreciated.

[Jay_Jiang]

Can your application just append the user's data as a query string to the email preference centre url?

An alternative to Sandford's script, and if you're associate api call is working, take a look at https://nation.marketo.com/thread/50485-pre-fill-workaround if you decide to keep your preference centre as a marketo landing page

[Cory_Colt]

Jay, this is actually what I was hoping I could do is pass the marketo user id or some other data as a query string over to the landing page and have it populate the form based on looking up the user's data with the data I'm sending it. However, I can't find any documentation on this type of functionality. Instead, it seems like you're supposed to associate the lead (which I am currently doing), but it still doesn't populate the form. According to Sanford, this functionality isn't readily available out of the box.

Do you know of a way to just send some user data along with the query string to have the landing page pre-fill the form based on what's in the query string? 

[Jay_Jiang]

Just answering your exact question....

As long as you've got the user's details readily available for the browser to access, with some javascript on your site and on the email preferences page:

1. Give all your links to the email preferences page it's own class

2. Set your field values for email, firstName, lastName (or whatever else)

3. using jQuery on your site: 

$('a.linkClass').click(function(e){ 
  e.preventDefault(); 
  window.top.location = $(this).attr('href') + "?email="+email+"&firstName="+firstName+"&lastName="+lastName;
})‍;‍‍‍‍‍‍‍‍

4. Then on your email preference page, 

var url = new URL(window.location.href);
MktoForms2.whenReady(function (form) {
  form.vals({ 
    "Email":url.searchParams.get("email"),
    "FirstName":url.searchParams.get("firstName"),
    "LastName":url.searchParams.get("lastName")
  });
});‍‍‍‍‍‍‍‍

[Cory_Colt]

Jay Jiang, I appreciate you answering my questions here. I went through your pre-fill workaround and I can manually set the values for the fields in the form, but when I use the {{ lead.Email }} or {{ lead.Email Address }} it doesn't actually populate anything. I just want to be clear here, the user is on a separate domain and when they click on a link to view their profile they are presented with a link to "manage their subscriptions" this link takes them to a marketo landing page which contains the form I'd like to pre-fill with their data. On our domain (non-marketo) I'm making a request to associate the lead with the munchkin cookie already created. 

My question is if I'm missing a step somewhere in order for the {{ lead.Email }} to work how you have in your pre-fill workaround? Is all that's required for this to work is for me to associate the lead 'before' sending them onto the marketo landing page?

[Jay_Jiang]

I can manually set the values for the fields in the form, but when I use the {{ lead.Email }} or {{ lead.Email Address }} it doesn't actually populate anything

not clear what you mean here, are you only loading 1 field {{lead.Email Address}} from Marketo?

Nevertheless, if your top level domain for your site is different to your marketo CNAME landing pages, then you can't use the pre-fill workaround as the lead's munchkin cookie isn't preserved cross domain.

You'd have to make use of the url to carry across the data

[Cory_Colt]

Sorry, let me clarify what I meant by manually setting the values. In your JS you have something that looks like this: 

var init_fields = {
 "Email":"{{lead.Email Address}}",
 "emailPreferencesPause":"{{lead.Email Preferences - Pause}}",
 "emailPreferencesPauseUTCTimestamp":"{{lead.Email Preferences - Pause UTC Timestamp}}"
 }

By manually setting the email field I meant I did this (just to see if the JS is firing): 

var init_fields = {
 "Email":"test@testing.com",
 "emailPreferencesPause":"{{lead.Email Preferences - Pause}}",
 "emailPreferencesPauseUTCTimestamp":"{{lead.Email Preferences - Pause UTC Timestamp}}"
 }

It works when I manually set the values, so I know it's firing. Based on your last answer it sounds like this just simply isn't possible with how we're trying to do this. So then my question becomes is it better to just pull in the form into our own domain and have the user manage their subscriptions/etc through this form we're pulling in from Marketo? 

[SanfordWhiteman]

Jay's overall approach is fine, I think we're getting very confused here.

You need to pass the values the person entered in the form in the URL - no problem, you always have those values.

You need to populate fields from the URL - no problem, you need a little JS to pull them in b/c Marketo itself doesn't pull them into visible fields.

[Cory_Colt]

Sanford, hopefully this will clear up some confusion. Let me give you a bit of background. Previously on our site we kept track of all the user's subscriptions and email preferences. Recently the decision was made to offload this responsibility to Marketo, so we're having to make changes within our site to no longer track the user's subscriptions and email preferences ourselves. The effort was made to migrate this data over to Marketo, but the problem is from the end-users perspective they don't know anything has changed. Meaning, they still login to our site and can edit their profile. However, when they're editing their profile they no longer see the options for their subscriptions and email preferences (since these got moved into Marketo), so instead they'll see a link in place of where this data used to be to "click here to manage your subscriptions and email preferences" which takes them to this marketo landing page I've been discussing. 

Early on the discussion was to either keep the user on our site (on the same profile page) and just present a form to them (pulled from marketo) to allow them to manage their subscriptions/preferences here OR to create a separate landing page that we then just provide a link and send the user to a marketo landing page. 

Does this clarify some of this?

[Jay_Jiang]

In a project I've previously worked on, the preference centre was managed by the site and data was stored in the site's DB. People's preferences would be pre-filled from the site's DB and where email preferences were updated and saved in the DB, the site also triggered a REST API call to Marketo to update their record. If you're already using REST API in your site, why don't you use it to update their their preferences?

[Jay_Jiang]

What's the reason your landing page domain can't be the same as your site?

Let's take a further step back, there's a fundamental problem here. You're saying you no longer want your site to track the person's email preferences and want Marketo to take care of this now. However, the first time a person visits the Marketo LP on an unrecognised device, or if they've never submitted the form on the LP, they won't be recognised by Marketo and their existing preferences won't pre-fill no matter what. So you can send the person's email address and details to the LP in the URL, but if you want their existing preferences to pre-fill from Marketo, you actually need to have the top level domains the same so pre-fill can work due to the shared munchkin ids - assuming you're associating them every time they log-in to your site.

[SanfordWhiteman]

Let's discuss your exact technical requirements.

If you're ensuring they have an associated session and the page you want to Pre-Fill on is a Marketo LP, then you can use my Pre-Fill JS library, or attempt to Pre-Fill directly from {{lead.tokens}} on the LP as Jay suggests.

If you're ensuring they have an associated session but the page you want to Pre-Fill on is a non-Marketo LP, then you must use my Pre-Fill JS library.

[SanfordWhiteman]

No URL on IE. That's why a library is always necessary.

[Cory_Colt]

Sanford Whiteman‌ what do you mean? You can't use query strings for this on IE?

[SanfordWhiteman]

what do you mean? You can't use query strings for this on IE?

No, I mean that Jay's 2nd piece of code -- the code for the second page -- is not compatible with IE.

So, though it's compellingly simple, it's not a real-world solution unless your corporate standard says IE doesn't matter (which I doubt it does).

You can use Jay's code for the first page, and my code (from the JS pane in the linked CodePen) for the second page. My JS is built to work in IE 10+.

There's no reason to skimp on functionality here, and if you download the FormsPlus JS and add it to Design Studio, then include it in your page and add the CodePen JS, you have a robust solution for filling fields (visible or hidden, doesn't matter) from query params, cookies, or static values.

EDIT: Jay later added IE-compatible code that doesn't rely on the URL object.

[Jay_Jiang]

new URL() and it's methods aren't supported by IE. You need to deploy some other javascript e.g. from css-tricks.com

function getQueryVariable(variable){
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if(pair[0] == variable){return pair[1];}
  }
  return(false);
}
MktoForms2.whenReady(function (form) {
  form.vals({ 
    "Email":getQueryVariable("email"),
    "FirstName":getQueryVariable("firstName"),
    "LastName":getQueryVariable("lastName")
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SanfordWhiteman]

It's not that you can't pass values in the query string. It's that AutoFill (not Pre-Fill, which is different, as described above) from URL params only natively works for hidden fields.

If you search, I've posted several examples of how to roll your own AutoFill for visible fields using a URI library, URI.js or my FormsPlus library (which includes URI.js). Such as here: MktoForms2 :: KV HTML w/Auto-Fill and Cascade v1.1.0  

[SanfordWhiteman]

Munchkin session association doesn't mean native form Pre-Fill works. (It never meant that on external sites, though it's quite recently that it stopped meaning it on Marketo LPs as well.)

Native Pre-Fill only works in response to clicks on Marketo-tracked email links.

To extend Pre-Fill, use my JS library: https://nation.marketo.com/groups/newyork-user-group/blog/2018/05/04/form-pre-fill-external-sites-no...