Making private Landing Pages in Marketo
As we all know that Marketo doesn’t provide an option for securing the pages using a password. So, we are here to show you a method that will allow you guys to secure a Marketo LP using a Password. We will be using JavaScript to build this functionality and as we all know it is not the most secure method to do this. However, it serves the purpose as we don’t have many options around it here. So, let’s start the awesome process:
There will be 5 steps here as below:
- Create a custom field in Marketo for Password
- Create a new form using Password Field
- Create 3 Landing Pages
- Create Program Tokens
- Add JavaScript to Landing Pages
So, let’s begin with the steps:
01. Create a custom field in Marketo for Password
We need to create a custom field in Marketo for the Password. It should be string type.
02. Create a new form using Password Field
Now, we will be creating a form which have the email address field and password field. We are not using email field anywhere it is just for storing the person’s data. If this page is visited from an email link, email address field can be hidden as Marketo will prefill the field based on token.
03. Create 3 Landing Pages
We will be creating three landing pages here. Login Page, Gated Page and Unauthorized Page.
04. Create Program Tokens
We will create 4 Program Tokens here. One for the Password and 3 for Landing Pages URL’s which we created in step 3.
05. Add JavaScript to Landing Pages
We will create a login page and add the recently created form on this page. Now, we will add a small Javascript code on this page which looks on form submit and matches the Password that is stored in the program tokens.
Login Page JS
<script type="text/javascript">
MktoForms2.whenReady(function (form){ // fires when form is loading and is ready
form.onSuccess(function(values, followUpUrl) { // this event is fired on form submission
var password = '{{my.LP Password}}';
// check if value submitted matches to pwd in token
if (values.lPPassword == password) {
// we are keeping the seesion for 24 hour, you can change it also.
var expiryhours = 24;
var expirytime = new Date();
expirytime.setTime(expirytime.getTime()+(expiryhours*60*60*1000));
// create a cookie which confirms the password validation was successful.
document.cookie = "passedGated=Valid;expires="+expirytime.toGMTString()+"; path=/";
// redirect to Gated Page
location.href="{{my.Gated LP URL}}";
}else {
// If validation fails, Redirect the person to Unauthorized Pages
location.href="{{my.Unauthorized LP URL}}";
}
return false;
});
});
</script>We need to make sure this JavaScript is added after form block on Landing Page so that the MktoForms2 function is available to the script.
Gated Page JS
<script type="text/javascript">
if ( window.location == window.parent.location ) { // make sure we are not running this code in Marketo Editor
// Check to see is login cookie is set - if not, redirect to login page
if (document.cookie.indexOf("passedGated=Valid") == -1) {
location.href = "{{my.Login LP URL}}";
}
}
</script>This code checks if the cookie exists on the browser, if not, it will redirect the person back to login page. This code should be added at the top of page in <head> tag.
