Home Resources Blog

Blog Post

How to Add a Newsletter Signup Form to Your Facebook ‘Like’ Page

Thanks to a simple Facebook plugin, it is easy to add a signup form for…

Blog Post

Creating an AJAX Subscribe Form

Using AJAX with your newsletter subscription forms just got a whole lot easier. We’ve put…

Blog Post

Tip: Don’t Use URLs as Your Link Text

Find out why having a clickable URL can lead to phishing warnings for your subscribers

Blog Post

Using Campaign Monitor to Track RSVPs

A lot of people use Campaign Monitor to send emails out to their customers for special sales, to organise conferences, parties and events. We often get asked whether Campaign Monitor has some kind of system to record whether people will attend or not. While Campaign Monitor is not an events management application, it is actually pretty easy to set up your list so you can keep track of people who RSVP to your invitations. Here’s what you will need: An email that contains your RSVP “Yes” and “No” links A landing page for the yes / no links to click through to Two segments, for the ‘yes’ clickers and the ‘no’ clickers All very straightforward. Just setup somewhere on your website a ‘thanks for RSVPing’ page. If you want to have separate messages for people who say yes, and people who decline, you could have two different URLs. So your email would contain links like: <a href="http://www.yourwebsite.com/rsvp/yes-please.html">Yes, I can come</a> With some simple server side PHP or other code, you could just have one page with a parameter to detect yes and no clicks. <a href="http://www.yourwebsite.com/rsvp.php?answer=yes">Yes, I can come</a> Then when you send your email, Campaign Monitor will consider the ‘answer=yes’ and ‘answer=no’ portions to make those two separate URLs, and track the separately, which is what makes the whole thing possible. Your recipients click on whichever link they choose, and then you can separate them into yes and no groups using segments. Just create rules of type Campaign was opened – specific link clicked, select your campaign, and choose the appropriate links. Now you have your two lists of responses. You can export the segment as a list of addresses to use in some other system, and you can send different follow up emails to just the people who have said yes or no. Easy RSVP tracking with Campaign Monitor!

Blog Post

Integrate your ExpressionEngine members with your Campaign Monitor lists

More ExpressionEngine related news today, thanks to the talented Stephen Lewis. Stephen has released the SL FreshView Subscribe extension which lets you automatically add new users who register on your EE site to any Campaign Monitor or MailBuild list. You plugin your API key and ListID and that’s as complicated as it gets. Nice work Stephen! You can grab the SL FreshView Subscribe extension in the ExpressionEngine forums right now.

Blog Post

Tip: Handling Campaign Monitor analytics links in ExpressionEngine

You know that you can add Google Analytics code to your emails very easily. That works really well, but the URLs generated with the Google parameters can sometimes cause issues. The boys from Newism found that the analytics links were not working quite right with their index page on their ExpressionEngine based site. They’ve written up in quite a bit of detail how they worked around the problem using some smart .htaccess rewrite rules. If you are seeing the same issue, make sure you check it out. Read Using URL rewrites to make ExpressionEngine, Campaign Monitor & Google Analytics play nice over at the Newism blog.

Blog Post

Embedding Images Revisited

We have updated results for embedded image/data URI support in email – view our latest post. In a recent post we discussed our (poor) results from testing embedded images in email. A couple of people pointed out a different method we could use that may produce better results. So we’ve run through our tests again, this time with the image as a Base64 encoded attachment to the message. Here’s how it went. Embedding as an attachment Rather than having the image src be the encoded data, this time we define the email as a multipart/related file, and place the encoded image in a separate section of the email. Then in the body of the message, we refer to the image via its identifier which is specified for each attachment. Results for embedded attachment cid method This time around, we did see some better results. The image was rendered by default in the desktop clients at least, but still not in webmail clients. Apple Mail Yes-Image displays inline and as attachment Entourage 2008 Yes-Image displays inline and as attachment Gmail No-Image will not display Windows Live Hotmail No-Image will not display Outlook 2003 Yes-Image displays inline and as attachment Outlook 2007 Yes-Image displays inline and as attachment Thunderbird 2 Yes-Image displays inline and as attachment Yahoo! Mail No-Image will not display Although the images did show up ok in desktop clients, in webmail clients they did not at all, even after clicking ‘display images’ or equivalent. Additionally, in the desktop clients the images are shown inline, but also as attachments on the bottom of the email. If you have just one image, it might be ok, but with most newsletters you will have an email that ends with a messy jumble of individual image attachments. Imagine the Threadless newsletter for example. The increased initial download size, and hence slower speed, the failure to show for increasingly popular webmail clients and the hassle of attachments still seem to indicate that embedded images are not the way to go in most cases. Our recommendation is still to have the understanding that your images may not display, and design your emails accordingly. Please note that Campaign Monitor itself does not support embedding images in this way at all, we tested outside of our application. Thanks to everyone who commented and suggested this additional test, we appreciate the feedback.

Blog Post

Embedding Images in Email

We have updated results for embedded image/data URI support in email – view our latest post. With the well known growth in image blocking by email clients, some customers have been looking for alternatives to linking web based images into HTML emails. Some years ago, image embedding used to the standard way images were included in emails. It differs from linked images in that the image itself is actually encoded, and included inside the message. So once you have downloaded the email, you are not reliant on a web connection to view the images, because you have it all locally. It sounds perfect, except for a big increase in email size vs downloading just the HTML and then the images afterwards. We get asked fairly often why we don’t allow image embedding to work around image blocking. Our position (‘It is not worth it for the cost in filesize) has been based on testing done some years ago, before image blocking was so common. So we though it was time to update our test results. Testing embedded images in email Here’s the recipe for creating HTML emails with embedded images: Take one HTML page, with your text content and CSS Grab an image you want to send embedded in your email Use a Base64 encoder to turn your binary photo into a huge text string Replace your normal image source with that string Save your file and send as normal When you have added your encoded image, you end up with an HTML document which looks something like this: You will notice you have an enormous text file if you are encoding any kind of photograph. I took this file, and sent it out to a bunch of the major email clients, to see if they would render it. Embedded images test results The results were almost uniformly bad. Of all the email clients we tested, only Apple Mail showed the photo at all (and it shows linked images by default anyway). Email Client Result Notes Apple Mail Yes Showed perfectly Entourage 2008 No Alt attribute and image outline only Gmail No Alt attribute and missing-image outline only Windows Live Hotmail No A grey block with no alt attribute Outlook 2003 No Alt attribute and missing-image outline only Entourage 2007 No Alt attribute and missing-image outline only Thunderbird 2 No Alt attribute, no missing image outline Yahoo! Mail No Alt attribute and missing-image outline (Classic & New) So based on our results, it is clearly not worth using embedded images in your emails. All you will be doing is forcing people to download encoded images that they will not be able to view. Instead, the best course is to follow our normal design guidelines and design your emails knowing that some people will not see your images. That means making sure your copy stands alone, and that it is visible high enough for people to see if images are blocked. Don’t forget to link prominently to a web version too, especially if your images are particularly important. Update See our follow up post in which we tested with a different method of embedding, with somewhat better results.

Blog Post

Speed up Template Development with TextMate

Part of creating the 33 new HTML templates for Campaign Monitor and MailBuild was to also come up with an easy way to test these designs without having to leave the comfort of my development environment. Since most email clients render HTML email better with inline CSS, maintaining an organized yet easy to update template becomes next to impossible (especially when building 33 of them). It just so happens that TextMate has an incredibly useful plugin architecture called “bundles” that could deal with this problem rather easily. Here’s a quick demo with the details below. So what we did was create a bundle that does exactly that. Create your email like you would any other webpage with a linked stylesheet or inline style. Run one of the bundle commands and it automatically runs through adding all of the CSS styles inline keeping it easy for you to update. Even better, you can email an HTML multipart email directly from within TextMate! Testing has never been this easy. If all of this sounds too good to be true, hop on over to our TextMate bundle resource page. Be warned in advance though, this is definitely one of the most developer targeted resources we’ve ever thrown up. And of course, if you haven’t got access to lots of different email clients, our design and spam test tool can run it through more than 20 of the most popular clients with a single click.

Blog Post

Making Certain Fields Required in Your Signup Forms

New! We have a simpler method for adding validation to forms – view it here. One of the more common questions we get asked is if you can make certain fields be required when people sign up to your list through a Campaign Monitor form. We don’t have this functionality built in, mostly because you can create a much better experience for your visitors by taking care of that right there on your form page, rather than sending them off to a generic Campaign Monitor error page. Most of you Campaign Monitor customers are smart cookies who have your own approach to error messages and server side scripting, and are happy to cook something up yourselves. However, sometimes it is just easier if you have something to start you off. So here’s a basic javascript form validation script, which you can examine, copy, tweak or take as you like. It’s based on code from the excellent DOM Scripting book by Jeremy Keith, and should give you enough of an idea to work with. Adding validation to your form The first step is to take your subscribe form, and add a CSS class to define which fields will be required. You could make as many as you like required, but remember that the less work people have to do, the more likely they are to sign up. <form action="http://abcwidgets.cmail1.com/s/133578/" method="post" onsubmit="return validateForm(this);" class="list-form"> <ul><li> <label for="name">Name:</label> <input type="text" name="name" id="name" class="required" /></li> <li><label for="l133578-133578">Email:</label> <input type="text" name="cm-133578-133578" id="email" class="email required" /></li> <li><label for="cm-f-184432">Nickname:</label> <input type="text" name="cm-f-184432" id="Nickname" /></li> <li class="sub-button"><input type="submit" value="Subscribe" /></li> </ul> </form> You can see I’ve added class=”required” to the text fields I want to make compulsory, and class=”email required”> in the case of the email address. I’ve also added an onsubmit parameter to the form tag, which will run our validation function when the submit button is clicked. Now we need to add some javascript into the head of the page with our form on it. Remember, you cannot change the form element names, because that will prevent the form working. You can change the ID of the elements though, if you need to refer to specific fields in your script. <script type="text/javascript"> function validateForm(theform) { for (var i=0; i<theform.elements.length; i++) { var element = theform.elements[i]; if (element.className.indexOf("required") !=-1) { element.className = "required"; if (!isFilled(element)) { alert("Please enter your " +element.id); element.className += " error"; element.focus(); return false; } } if (element.className.indexOf("email") !=-1) { element.className = "required"; if (!isEmail(element)) { alert("Please check you have entered a valid email address"); element.className += " error"; element.focus(); return false; } } } return true; } function isFilled(field) { if (field.value.length < 1) { return false; } else { return true; } } function isEmail(field) { if (field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1) { return false; } else { return true; } } </script> Without getting too far into details about exactly how the script works, here’s the outline: The function validateForm runs when the submit button is pressed We loop through all the elements, looking for the ones with a class of ‘required’ or ’email’ When we find a required field, we check to see if it is empty, and if so, trigger an error and addan ‘error’ class to the field If the field is an email field, we also run a simple check to see if it looks like a valid email We return ‘true’, if all is well, and the form is sent, or ‘false’ if not, and the submit is cancelled Note: I’ve only used alert messages here (and some CSS styling), which is not the ideal way to notify. You will probably want to write out an error message next to the problem field. I’m also just notifying about one error at a time, which is fine for very small forms, but annoying for anything longer. If you have bigger forms, you’d want to create an array of the errors, and write them all out at once instead. A final note is that the script only deals with text fields – if you have dropdowns for example you need to modify your testing slightly. That’s it! A very simple version of form validation to make sure people can’t leave key fields empty when signing up. Take it, and amend it to work for you or your clients.

Blog Post

Don’t Forget Your Unsubscribe Link

Just a super quick tip today to make sure your beautiful designs aren’t let down at the last moment. We review all the campaigns that go out through Campaign Monitor, making sure that everything is ok and also trawling for gallery entries. Often I will see a fantastic design that has been well planned, constructed and laid out with delicious graphical touches. “A candidate for the gallery!”, I think to myself as I scroll through the rest of the email. Moments later I am disappointed to see that the email ends with our default unsubscribe link, hanging off the bottom like a dag on a sheep. Clipped to preserve the guilty, here are a couple of examples: It’s such a pity to bring down a well crafted design by letting Campaign Monitor automatically add some text at the bottom. It’s very easy to put an unsubscribe link exactly where you want it, and style it any way you like. Simply insert the tags ‘<unsubscribe>’ and ‘</unsubscribe>’ around the words you would like to become an unsubscribe link in the HTML source of your campaign. <unsubscribe> Unsubscribe from future emails</unsubscribe> It’s that simple. You can even have a “style=” attribute in the unsubscribe tag, and those inline styles will be applied to the eventual unsubscribe link. The default unsubscribe link is our ‘unsubscribe of last resort’ – we’d much prefer to see you all integrating it into your layouts in a sensible and appropriate fashion.

Blog Post

Using the Campaign Monitor API with Rails

A while back we pointed to a Ruby gem for hooking into the Campaign Monitor API. It was created by Jordan Brock. On the Ruby Plus website we’ve spotted a new screencast which runs through how simple it is to use the Campaign Monitor gem to connect through your Rails application. As the author, Bala Paranj, points out, the existing Ruby gem does not include our recent API updates for creating and sending campaigns, but it is a great place to start. You can register for free at Ruby Plus and then download the screencast episode.

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free