Would you like to personalize your non-Marketo hosted thank you page?

Would you like to personalize your non-Marketo hosted thank you page?

What do you do when your stakeholder demands a solution and particularly when it is not possible to do so directly? 


I'm sure you want to come up with the answer. So here's one of my answers that could benefit you as well, or it could be your own answer too.

It's easy to personalize Marketo landing pages, but it's a tricky one to do for non-Marketo pages. Our use case was to personalize thank you page with the lead first name when he/she submitted his/her details through Marketo form.

That's how we got it...

Step 1: The following script can be placed either in your Marketo form or on the landing page where the Marketo form is located.

<script> 
$(document).ready(function(){ 
MktoForms2.whenReady(function(form) { 
//Add an onSuccess handler 
form.onSuccess(function(values, followUpUrl) { 
var vals=form.vals();
// Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl 
location.href = followUpUrl+"?fname="+vals.FirstName.replace(/ /g, "-"); 
// Return false to prevent the submission handler continuing with its own processing 
return false; 
}); 
}); 
});

</script>

Why did we add this script to our form/page? Ok, let me explain that before I come up with another script that has to be placed on the thank you page. So, on submission of Marketo form, this script will pick the value of the first name and add it to the thank you page URL.


Step 2: Now you need to add the next script to the thank you page that will capture first name value from the URL, store it in a variable, and show it on the page.

<script>
$(document).ready(function(){

function getParameterByName(name, url) {

if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace("", " "));
}

var studentName=getParameterByName("fname");

if (studentName =='NULL') {
studentName="";
}

$('.Thankyou span').text(function(i, oldText) {
return oldText === 'NAME' ? studentName : oldText;
});


});
</script>

Step 3: This is the most important step and if you miss a single thing then it's not going to work. I spent almost the whole day fixing this when just one parameter was missing in the third step...

Now when you are placing this thank you page content, don't forget this line of your second script where you have defined a class and added a HTML tag. 

<h1 class="Thankyou"> <span>NAME</span> Thankyou for submitting your enquiry</h1>

You have to define this message in the same structure. You can change the h1 tag and thank you message but can't change the variable added under span tag "NAME" or class "Thankyou" unless you have changed it in the javascript itself.

I hope you're going to enjoy reading this or maybe this will answer your problem. Keep reading and I'd also encourage you to continue sharing your methods and new solutions that may benefit your buddies.

You can read the same blog on my website at santrathaur.com as well.

Read the blog here: http://www.santrathaur.com/personalize-your-non-marketo-hosted-thank-you-page/ 

Cheers,

Sant Singh Rathaur

Connect me on LinkedIn https://www.linkedin.com/in/sant-singh-rathaur/

Best regards,
Sant Singh Rathaur
3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

Re: Would you like to personalize your non-Marketo hosted thank you page?

Sant, all the JS here is broken.

The part that appends the parameter to the URL is broken in (at least) 2 major ways.

  1. It mangles people with hyphens in their names (or in any form field, whatever it is).
  2. It also creates a broken follow-up URL: you can't just add "?something" to the end of a URL that already has a query string.

The part that decodes the URL uses a broken regex that is not properly anchored to the query string because it doesn't make use of the Location#search property.

These must be rewritten with awareness of how URLs and URL-encoding work.

Re: Would you like to personalize your non-Marketo hosted thank you page?

Thanks Sire! It has been perfectly fine as of now but will surely look into the js (with the help of some expert) to resolve this.

Best regards,
Sant Singh Rathaur
SanfordWhiteman
Level 10 - Community Moderator

Re: Would you like to personalize your non-Marketo hosted thank you page?

Please stop saying it's fine, it's merely not tested enough for you to notice it's broken. I can tell it's broken at a glance without even running it -- that's how broken it is, it would likely be worse if I started debugging all the possible conditions.

Appending "?fname=Sant" to the URL "https://pages.example.com/followup.html?aliId=aaabbbccc" leaves you with the URL "https://pages.example.com/followup.html?aliId=aaabbbccc?fname=Sant". What is the value of the aliId query parameter is in that final URL? Do you know why the aliId is important?