Aug 24, 2015

How We Made a Non-Annoying Pop-up Form for The Thread

We recently shared a few ways some MailChimp users have made pop-up subscription forms more useful for visitors on their websites—and less annoying. Let’s go a step further and talk about making pop-up forms behave better for people who are already on your list.

I bet you know what I’m talking about. How many times have you opened a newsletter in your inbox, clicked on a link to the website, then found yourself staring not at the page you want to view, but a pop-up suggesting you subscribe to the newsletter you just clicked out of? When this happens to me, I always think, “I thought we were friends!”

Luckily, there’s an easy fix.

Screen Shot 2015-08-19 at 3.48.21 PM

We figured out a solution while working on the website for The Thread, a collaborative project we sponsor with California Sunday Magazine. Subscribers get a message teasing an email conversation between 2 interesting folks—say, comedian/writer Scott Aukerman and comedian/musician Weird Al Yankovic. And subscribers couldn’t read the full conversation on the website without first clicking through a pop-up asking them to subscribe to the newsletter they already had in their inbox. What a killjoy!

If you’re facing a similar problem, don’t fret. The exact solution depends on your site’s platform, but you really just need to do 2 things:

First, make sure you’re adding params to the links in your campaigns. This will let you know when a customer is coming from a particular campaign. You can do this manually, but MailChimp makes it easy to add tracking params automatically. Your best bet would be to use the Google Analytics tags—then, as a bonus, if you do have Google Analytics set up on your site, you can start seeing how and where those same customers end up on your site, too.

The second (and final!) step involves adding a little code to your site. If you need help, ask your developer or look up a MailChimp Expert. The code will simply check for a paramater in the query string in the URL to determine if this visit initiated from a campaign.

For The Thread, we added some simple JavaScript to check the query string. If you use WordPress, there’s a great plugin that will help set this up as well. The JavaScript code checks to see if the utm_source parameter matches “The Thread.” If it does, the pop-up doesn’t get displayed.

Here’s the code:

if (getUrlParameter("utm_source") != "The+Thread"
    && $.cookie("thethread_has_submitted_email") != "true") {
    
    // code to show popup modal
}

Phew!

You might notice we also check a cookie in that solution, and maybe you’re wondering why we can’t just use that solution. Cookies can be great, but they will only work on one device. More and more people are consuming campaigns on both mobile and desktop, so if they signed up on one, they’d still see the pop-up on the other.

There is one downside to this fix: If someone shares the link with the params set, new visitors coming through that link won’t see the pop-up either. That’s why it’s good to have a regular signup form on your page somewhere, so you don’t have to depend on a pop-up to catch all the new subscribers. Double phew!

This is the kind of tiny fix most subscribers probably won’t notice, but if they’re anything like me, I know just what they’d say.