Blog

Expression Engine and Campaign Monitor

Posted March 05, 2010  |  By Robert Wallis, Senior Developer  |  Filed under: ExpressionEngine, Web Programming


We've just updated our Campaign Monitor module for Expression Engine. Originally it was just to get the contact details for your clients already stored in campaign monitor, but now, an obvious extension, you can add addresses. This is perfect for adding a cool AJAX signup form on your site.

The problem is that if you use the Campaign Monitor form code, the user is taken off your page and re-directed back, which may seem unprofessional to experts at the least, or even warn you or not work depending on your firewall and corporate policy settings at the worst. And, you can't really use that form code in a cool AJAX style newsletter subscription. If you use the Campaign Monitor API to do an AJAX call, then everyone will know your API key and list id, which is like your password, so that's not good.

Our module lets you "post" the form it directly to your own server, and then your server talks with Campaign Monitor's server. So your secret API codes are safe. And you can customize the response messages to say what you want.

It's pretty easy to use too, just install our jubjub_campaign module in Expression Engine, and stick this in a template:

<!-- this template is named "add_to_newsletter" -->
{exp:jubjub_campaign:add_subscriber api_key="" list_id=""}
	{success}
		Thank you for subscribing!
	{/success}
	{failure}
		{error_message}
	{/failure}
{/exp:jubjub_campaign:add_subscriber}

Then have your homepage with the newsletter link do an AJAX post to the template with the above code.

// this javascript code goes on your main page after
// you've made the form and response area's css syles
$(function() {
	// when the form is submitted
	$('#newsletter-form').submit(function() {
		// make an AJAX call
		$.post(
			// to the EE template you setup
			'/index.php/add_to_newsletter',

			// grab the name and email address
			$('#newsletter-form').serialize(),

			// when it's done talking to
			//   Campaign Monitor
			function(data) {
				// hide the old form
				$('#newsletter-form').hide();

				// show a new popup with
				//   your custom success or
				//   failure message
				$('#newsletter-response')
					.html(data)
					.show();
			}
		);
	});
});