Quick Mailchimp Tip: Personalizing Your Landing Page
Hey there, Mailchimpers!
I'm working on an email marketing project where I wanted to personalize the landing page that email recipients clicked through to, so I whipped up this quick 'how-to' sharing how I did it. Geek Alert: This requires basic HTML skills so be prepared for a my propellerhead to show through in spots. This how-to will show you how to personalize a landing page with an email recipient (list member)'s first name using Javascript, PHP, or ColdFusion.
You know how, in Mailchimp, you can easily personalize emails by simply adding the magic *|FNAME|* merge code right into the body of the email message? Well, I wanted to personalize the landing page that users click through to in just the same way. So when an email recipient clicks the link in the email and gets to the landing page, I can greet them by first name just like the Mailchimp email campaign does. Email marketing is all about relationship, right? And personalization on the web is a rule of thumb for fostering deeper, more meaningful customer engagement experiences. So I figured out how to pass the email's recipient along to the landing page and get it onto the web page to greet the user by name. Here's how to do it:
1. Passing Along The *|FNAME|*
First up, the links in the email. This is the easiest part! Just add a question mark, the word 'fname', an equals sign, and the merge code tag.
Let's say our link in the email is: 'http : // www. funkymonkeybeeswax .com / landingpage.htm'
Here's how it looks when we add the code to pass the recipients first name:
'http : // www. funkymonkeybeeswax .com / landingpage.htm?fname=*|FNAME|*'
So if the recipeint's first name is Jane, the link in the email she receives will end up being:
'http : // www. funkymonkeybeeswax .com / landingpage.htm?fname=Jane'
Adding that last part to the link is called adding or appending a "URL parameter" to it. Next up, we'll make our web page grab that parameter and display it.
2. Getting The Name & Displaying In The Page - Javascript Version
OK. Let's grab that URL parameter, the recipient's name that we passed along by appending the *|FNAME|* to the end of the link. First up, if you're using PHP or Coldfusion to power your pages, you can skip this section and jump to the PHP solution here or Coldfusion here. If you're using Javascript, read on!
The JS version of this solution has two parts: Reading the URL to get the name, and writing the name to the document.
Use this script in the header of your page to read and parse the URL and return the name:
<script type="text/javascript">
function namer( name )
{
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var tmpURL = window.location.href;
var results = regex.exec( tmpURL );
if( results == null )
return "";
else
return results[1];
}
var fname_param = namer('fname');
</script>
Now that we've told the web page how to get the name, let's put it visibly on the page. Whereever you'd like the name to actually appear on the page, simply place this in the source code:
<script type="text/javascript">
document.write(fname_param);
</script>
And that's all there is to it. What's happening? Well, the first bit of code is reading the URL and extracting only the name, leaving the http, and colons, and slashes, and questionmarks and equal signs behind. Then, it's giving it to us so we can "write it to the page" wherever we want. Done!
2a. Getting The Name & Displaying In The Page - PHP Version
So this version is one of many examples of why PHP is such a popular and pwerful web programming language. It's all of three lines of code:
<?php
echo 'Hello ' . htmlspecialchars($_GET["fname"]) . '!';
?>
If you're using PHP, just pop that line of code wherever you want the name to appear on the page. Boom. Done.
2b. Getting The Name & Displaying In The Page - Coldfusion Version
I love CF. It's simple, elegant, clean and easy to use. And this solution weighs in at only one line of code. Yup. Uno. A singleton. Ready for it? Here goes:
<cfoutput>#URL.fname#</cfoutput>
CFers can just pop that line of code whereever you want the name to appear on the page. Just like PHP, only sexier. Again, this time with feeling: Siss-Boom-Done!
Now there's all sorts of ways to make this even more sexy and complicated, and there's probably even more proper ways to dial in the code. Feel free to share if you've found something that works for you.
Go Bananas with it!
