Apr 19, 2010

Tracking signup location via the MailChimp embedded forms

One thing that we’ve seen users try to do is track the signup location of your subscribers. This is useful for several reasons, mostly analytically. Perhaps you want to see if where they signed up has some sort of correlation with subscriber engagement. You could even set up personalized messages depending on this information with our conditional merge tags. Or maybe you just want to track where most of your subscribers are coming from so you know what your target market is.

Whatever the reasons, it’s certainly possible to track this data with a little setup within your MailChimp account and some knowledge about html form elements. We’ll show you how to add a hidden field to a list within your MailChimp account and then how to modify your embedded signup form so that you can start tracking.

To start off, you’ll need a field in your list to actually track the signups.

Go ahead and set that up on your list by adding a text field. In the visual designer, you can do this easily; start by going to Lists ==> List Settings ==> Create Forms. From there, add a new text field and give it a meaningful merge tag. (Setting up merge tags to work semantically helps later on if you want to do advanced segmenting or code up some dynamic content.) Also, the most important part of this is to set this new field up so that it’s hidden. Here’s a screenshot of the entire setup.


You’ll be using this field to track your signups. (If you’re looking for something a little more in-depth, here are the knowledge base articles for adding a new field to your list and hiding existing fields on your list.)

Once this is ready, you can start working with the embedded code so that it submits properly to your list. Grab the form code for your list by going to Lists ==> list settings ==> for your website. You’ll want the "Signup Form Embed Code" option. Whether you choose to include only the required fields or all the fields, it doesn’t add in your hidden field; you’ll be adding them manually in a moment. Go ahead and grab your embedded code and put it into your favorite text editor. You’ll have to edit it a little before you add it to your website. (Here’s an article that runs through this process as well.)

For your form to submit the signup location properly, it will need a hidden input that links up your new hidden field and puts in a value telling you about that location. There’s a lot of code there to wade through but you’re going to want to look for your submit button. You can just control+F or search for "submit" to find that. Here’s a screenshot of what you might see.


Now, add some code just above the <div> tag that’s enclosing your submit button. You’ll want to add:

<input type="hidden" name="SIGNUP" id="SIGNUP" value="blog" />

where basically what that’s doing is adding a hidden input to your form that connects to the SIGNUP field on your list (where that "SIGNUP" is the field’s merge tag) and fills it in with the value of blog. Here’s a screenshot of what you might see.


(Note for those of you who know a little more html: setting the name attribute on your input elements equal to your merge variables will connect them to your MailChimp list. That’s the real reason for putting in ‘name="SIGNUP"‘.)

Now, do some testing with your new form. Go ahead and sign up with a test address so you can verify that your form submission is working.


Confirm your account via our double opt-in process. Then, check out the new subscriber in your MailChimp account. Here’s the result.


Now, if you use the same code for each of your forms, it’s not going to be useful at all. All your signups will have "blog" filled in there so you’ll need to customize each one depending on where you put it. Think of where you have forms (or will put forms) and decide on a good naming scheme for how you want to track them. Some examples might be "blog_page," "about_page" or even "ecommerce_header" if you’re looking to track signups on your "blog page", "about page", or "ecommerce header" respectively.

You’ll then want to adjust the hidden inputs for each of those individual forms accordingly. This might look like (for the examples mentioned):

<input type="hidden" name="SIGNUP" id="SIGNUP" value="blog_page" />


<input type="hidden" name="SIGNUP" id="SIGNUP" value="about_page" />


<input type="hidden" name="SIGNUP" id="SIGNUP" value="ecommerce_header" />

With that, you can start finding out more about your subscriber base and which of your pages generate the highest conversions.

Hope that helps! Definitely do some rigorous testing for all of this to verify that everything’s working before putting this live.