capture interesting moment, known lead

[Anonymous]

I wanted to get some help thinking through a solution for this.

First, the setting:

We have a Marketo form for requesting white papers, etc. It's embedded on our website, and there's a munchkin code on the site. When a user fills out the form, it populates two hidden fields with some URL-passed information we need. Then an automatic email goes to the user, providing a link to the white paper.

If somebody returns to the form for another request, already cookied, they get the form's "custom html for known leads", instead. This html provides a link direct to the white paper. No email is sent.

Challenge:

We want to create an Interesting Moment that passes this info into Salesforce. It seems to work for first time visitors, but we want it to also work when a returning visitor shows up - getting the custom html rather than the form.

I thought I'd read somewhere that when a visitor returns and gets the custom html this should still register as a form fill, but it didn't seem to do so. Is this correct, and what is a good way to capture this moment?

[Anonymous]

After a couple offline discussions and a couple modifications to the sample code he'd given, Sanford Whiteman helped me to get through a couple hoops, and this is resolved!

If anybody's curious, check out his .js solution.

[Anonymous]

Thank you... any help you could give is greatly appreciated. I've spent a little time today trying to wrap my head around this, but nothing's sticking. none of my experiments work. I've tried many of the different sample scripts out there, just to see what they'd do. But even those 'out-of-the-can' scripts don't seem to work inside the Known Lead Html. I'm stumped.

[SanfordWhiteman · Accepted solution]

Check out MktoForms2 :: QS-aware KL HTML​. Pass your ?title=<title>&type=<type> and the values are populated in the proper spots.

The KL HTML itself is dirt-simple since all the logic is brought out into the whenReady listener:

(The %-variables are not really interpreted, they're just placeholders.)

Note one wheel not worth attempting to reinvent is query string parsing. I've written my own parser in the past but it cannot come near the near-industry-standard URI.js, which is included here.

[Anonymous]

Nice! Hadn't seen .js that way. I just know basic if/else and case.

I've dropped everythiing into place, but I not quite to my goal. I think I must be misunderstanding something?

On our website, I have what you wrote in Code pen...

On our KL HTML section I put the <div class="k1">....</div> code you pasted above. I left the %asset.placeholders% as is. Did I need to change those?

The form works, and the KL message comes up, but the placeholders remain. Either I misunderstood something, or there's a step I missed. Does the URI.js take care of the query string completely, or is there an extra step I need to do?

Also, this doesn't have the {{form.button}}. I haven't looked yet, but do you know if KL's will register as a form submission in Marketo?

For reference: live page

[SanfordWhiteman]

Nice! Hadn't seen .js that way. I just know basic if/else and case.

Yes, there's a whole language out there.

On our KL HTML section I put the <div class="k1">....</div> code you pasted above. I left the %asset.placeholders% as is. Did I need to change those?

No, you don't need to change those.  They are in there as reminders of dynamic content.

Do you see errors in your JS console?

Also, this doesn't have the {{form.button}}. I haven't looked yet, but do you know if KL's will register as a form submission in Marketo?

KLs will only register as a form submission if the person clicks the submit button.  If you give them custom download <A> links, as you are here, they will not submit the form.  You could make clicking on the links also submit the form in the background, of course.  But that requires additional code.

[Anonymous]

No errors popped up relating to this. Just a couple warnings for jquery - probably unrelated to this:

jquery-1.8.3.min.js:

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

Empty string passed to getElementById().

Regarding the {{form.button}}, gotcha. I think I remember seeing sample code in the Forms 2.0 samples specifically for that. I'll tackle that next after I figure out why the info isn't updating

[SanfordWhiteman]

I'll take a look at your page again this evening and figure it out.  Have to grab a bus now.

[Anonymous]

Sanford,

Good morning! I just wanted to see if you might've had a moment to peek at the script and find out why it wasn't replacing the placeholders?

I've also tried to add in a "form submit" if somebody clicks on a link outside it. but it doesn't seem to fire. I suspect it could be incorporated into your script better than I did. This way didn't seem to work - didn't show a form completion in the test lead's activity log.

Here's a direct link to where I'm playing around with this: resource-test

[SanfordWhiteman]

You have class="k1" (letter k, number 1) where it's supposed to be class="kl" (for k​nown ​l​ead).

I've also tried to add in a "form submit" if somebody clicks on a link outside it. but it doesn't seem to fire. I suspect it could be incorporated into your script better than I did. This way didn't seem to work - didn't show a form completion in the test lead's activity log.

Definitely do not attempt to do it this way.  The form submission is asynchronous and this will never, ever work the way you want.  If you want to submit the form and then redirect them, only do the redirection in the form's onSuccess listener.

[Anonymous]

I'll have to find a dark corner to try and work on this without distraction. Nothing I've tried works yet. I understand generally what you're saying. But just can't manage to get it to work

[SanfordWhiteman]

DM me and we can work on it offline. Did you fix the typo?

[Anonymous]

Ok... I got the button to work - needed a capital B.

But I fear I'm still a little confused on some of this. On the actual form, I have hidden fields populated by the URL parameters. But how do I do that on this custom html field without a form on it?

[Grégoire_Miche2]

You will need to play with some JS code and the forms 2.0 API, I think.

But before this I would run a test, since I am not sure that the form, even not displayed, would not capture the hidden fields.

Sanford Whiteman​, Courtney Grimes​, ever tried to capture data in hidden fields while running the "known lead" feature ?

-Greg

[SanfordWhiteman]

Hidden fields will not be Autofilled if KL HTML is shown.  They can be added using the standard form.addHiddenFields() method.

[Anonymous]

I might need to get a little help figuring the forms 2.0 api out. I'm looking through it, and trying to drop in code in different places, but nothing seems to work. (referenced : Forms 2.0 » Marketo Developers  ) Not sure if maybe this has evolved into something that should be a different conversation string.

I did have to remove my own .js for {{form.submit}} to work on the KL HTML.  But when I pasted some code trying to make the form.adHiddenFields() into my KL HTML, it didn't do anything. I also tried putting it on the page under where I've dropped the form embed code in our website. still nothing. I tried with both of these scripts. I suspect there's some basic level thing I'm not understanding about where/how to place these.

--------------------------

<script src="//app-ab14.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1440"></form>

<script>MktoForms2.loadForm("//app-ab14.marketo.com", "746-PTV-801", 1440);</script>

<!-- added below. Also tried replacing with below. and tried on KL HTML section -->

<script>

MktoForms2.loadForm("//app-ab14.marketo.com", "746-PTV-801", 1440, function(form) {

  form.setValues({

    // Update this with the field/value.

    "LastRequestedAssetType": "test3type"

  }, function(k, v){var o={};o[k]=v;form.addHiddenFields(o)});

    "LastRequestedAsset": "test3title"

  }, function(k, v){var o={};o[k]=v;form.addHiddenFields(o)});

});

</script>

--------------------------Above script referenced from http://brightbacon.com/blog/use-marketo-forms-20-api-populate-fields

[SanfordWhiteman]

For best separation of concerns, have one call to MktoForms2.loadForm followed by a call to MktoForms2.whenReady with your initialization values and any event listeners.

MktoForms2.loadForm( <instance URL>, <munchkinId>, <formId> );
MktoForms2.whenReady(function(form){
  form.setValues(...);
  form.addHiddenFields(...);
  form.onSuccess(...);
  form.onSubmit(...);
  form.onValidate(...);
  ... etc. ...
});

However, this isn't the real problem. You have a lot of "luck" going on with JS scope, where things appear to work until you move them around. And confusion is more likely is because there's a lot of clunky code (like the assembling of HTML fragments as strings and using innerHTML) that isn't necessary for this relatively simple task and is just serving as a distraction.

Allow me to overhaul the code and you will be much less confused.  I'll put up a new version in my CodePen later today.

[Grégoire_Miche2]

Hi Charles,

What is the HTML code you have been putting in the custom HTML? You need to have the {{form.button}} token so that it can register the form fillout event.

-Greg

[Nicholas_Manojl]

Hey Greg, what is {{form.button}}?

[SanfordWhiteman]

{{form.Button}} is a special token that represents the submit button when you're using KL HTML.

[Anonymous]

hmmm. I wonder if I've painted myself into a corner?

When a first time uer fills out the form, and request the asset, the submit button doesn't take them directly to it. It redirects them to a confirmation page saying "you'll receive an email with the link".

When someone returns to the the page, it pulls from the passed variables in the url at top to create the link, not a {{form.button}} link. This was so we could use a single form to handle multiple requested file types. Looks like this:

(for reference, click to request a white paper or case study here: live page )

------------------------------------------------------

<div><span style="font-size: 14px;"><span style="color: #666666;">Welcome back, {{lead.FirstName}}!</span>       {{form.NotYou:default=Not you?}}</span><br /> <br /></div>

<script>// <![CDATA[

var param1var = getQueryVariable("param1");

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

    }

  }

var param1 = vars[0].substr(vars[0].indexOf("=") + 1);

var param2 = vars[1].substr(vars[1].indexOf("=") + 1);

if (param2=="white_paper")   {

    param1="<span style=\"font-size: 14px;font-weight:500;\">Thank you for your interest in our white paper. </span><br/><a href=\"http://go.url.com/rs/746-PTV-801/images/"+param1+".pdf\"  target=\"_blank\">Download it now</a>";

} else if (param2=="case_study")  {

   param1="<span style=\"font-size: 14px;font-weight:500;\">Thank you for your interest in our case study. </span><br/><a href=\"http://go.url.com/rs/746-PTV-801/images/"+param1+".pdf\"  target=\"_blank\">Download it now</a>";

} else if (param2=="webinar")  {

   param1="<span style=\"font-size: 14px;font-weight:500;\">Thank you for your interest in our webinar. </span><br/><a href=\"http://go.url.com/"+param1+".html\"  target=\"_blank\">View it now</a>";

} else {

   param1="There may have been an error in processing your request. Please try again, or contact us for further assistance.";

}

document.getElementById("fillbox1").innerHTML = param1;

document.getElementById("fillbox2").innerHTML = param2;

}

// ]]></script>

<div id="fillbox1" style="font-size: 1.2em; font-weight: bold;"><br /></div>

<div><br /></div>

<div><span style="color: #666666; font-size: 14px;"><a href="mailto:email@url.com">Contact us</a> to learn more about our services.</span><br /></div>

<div><br /></div>

<div><span style="font-size: 14px; color: #666666;">Thank You!<br /> </span></div>

------------------------------------------------------

NOTE: I tried putting {{form.button}} on the page to see what happened, but it just put it there as literal text - "{{form.button}}".