[How-to] Pass Parameters from Constant Contact to Unbounce via URL Parameters

I use Constant Contact to manage my email campaigns.  I use Unbounce to create landing pages. Between the 2 tools I get some very useful statistics about email open and click-thru rates.

I like to pre- populate fields on my Unbounce page with information from the email Ð usually just name and email address.  It turns out this is pretty easy to do if you know a few simple tricks.

**************************
WARNING: YOU ARE ENTERING DEVELOPER TERRITORY Please note: This is not an official
Unbounce feature. This functionality is based entirely on third party code, and
has only been tested in limited applications. Since this isn’t a supported
Unbounce feature, our support team will be unable to assist if things go awry.
So if you are not comfortable with HTML, Javascript and CSS, please consider
consulting an experienced developer. **************************

Instructions :   
The first thing you need to know is that CC
uses some specific field names from your email lists to populate such items as
the name in the greeting and the email address of the subscriber.  These fields are accessible to you in the
form of variables which can be also passed in when you link to Unbounce. Simply
surround the variable name with Ò$Ó in the URL. 
For example, SUBSCRIBER.EMAIL. 

The second thing you need to know is that Unbounce can
populate fields in a form with data passed on the URL invoking your landing
page.  For example, this will populate
the form field named [email] with the
text following Ò=Ó.

Step-by-step:

1.     
Create a form in Unbounce.

• Note the Field
  Name and ID for each field you would like to pre-populate.  The value there will be part of the URL from
  your Constant Contact link.
  

2.     
Create your email in Constant Contact and
include links to your Unbounce page on buttons or text links.  For purposes of illustration, create and edit
a text block:

• a) 
  Add some simple plain text such ÒHere are some
  CC fields:Ó.  Then, from the Insert panel
  to the left of your draft email, click on ÒContact DetailsÓ and choose some of
  the fields from that pick list, for example: Email and First Name.

• b)  
  Now
  click on the HTML button on the CC block editing toolbar. 

This will pop up a new window with the HTML view of the page you are
editing.  If you look closely you’ll see
a line or two that includes something like this:

First Name  ```

Email ```

The
bits we’re interested in are the nametype=ÓSUBSCRIBER.XXXÓ.  These are the names you can add to your
Unbounce URL link as parameters.

(By the
way, you don’t have to include the data field in your email; I did this to be
sure I get the name of the field correct.)

3.     
Now, add a
link in your CC email block to your Unbounce page.

• a)  Click on the
  ÒlinkÓ icon (next to the ÒhtmlÓ icon) in the toolbar to see this dialog box.
  

• b) Enter the
  visible text for your link in the dialog

• c)
  Enter the URL
  including the parameter passing;  for
  example:
  Ò http://act.yourcompany.com/LandingPage?UnbounceFormFieldName=$Subscriber.email$ Ó

• d) You can add more than one parameter.  Simply add an (html ampersand) Ò&Ó
  followed by the next FormVariable=Subscriber.Field. For example,

?email=$SUBSCRIBER.EMAIL$&name=$SUBSCRIBER.FIRSTNAME$
will populate the [email] and [name] fields
in your form.

• e) IMPORTANT : 
  Especially if you are passing multiple fields or any field other than
  email address!  Turn
  OFF tracking.  If you don’t, users
  won’t get to your landing page when they click in the email.

• f) Here’s a
  completed example:

4.     
The dialog
boxes for adding links to button images are a bit different but the process is
much the same; add a url complete with your parameters and turn off tracking.

5.     
Alternatively
you can edit the html directly and add/change your parameters to the lines there:  Take a look at the
HTML.  You should find a line that looks
something like this:

• ``````[Click Here to Act Now!](http://yourdomain.url/landingpage)

Add the data
you want to pass to your landing page by appending Ò?UnbounceFormFieldName=$Subscriber.email$Ó to the URL. 

Now it should look like this: Click Here to Act Now!

• Make sure you
  set tracking off here if you bypassed the CC UI.  track=ÓoffÓ as shown above.

6.     
Save your
work and test to be sure you’ve avoided typos and formulated the URL(s)
correctly.  Make sure you have added the
parameters to every version of the link in your email.  I typically include both text and buttons
which link to my landing pages.