Newism Pty Ltd

Newcastle, NSW Australia

Wayde Christie — Saturday 7th February, 5:45pm

Building Campaign Monitor Part I - ExpressionEngine Weblogs

This first post in this series is all about weblogs. Lots, and lots, of weblogs.

The easiest way to explain how we set up the weblogs for the Campaign Monitor site is to let everyone login to the back-end and have a look around - just promise not to delete anything. You can login with username: ‘admin’ and password: ‘asif’. The second easiest way is to write a detailed, nine-thousand-word overview (see below).

What’s in a weblog?

The data in ExpressionEngine sites is stored in containers called ‘weblogs’. Got some data to store? It goes in a weblog. Pretty straight-forward stuff. One of the first steps in any EE project is to determine what data you need to store, and then what associated weblogs you need to create. The Campaign Monitor site, although quite large in scope, only required 12 weblogs to store all of its data types.

The next step we take after creating our weblogs is to create associated category and custom field groups. We usually create each weblog, then category and field groups with the same names as the weblog. You can choose to skip this step and add category and custom field groups as and when you need them, but in the majority of cases we find that every weblog we create will require categories and custom fields, so we like to get that all sorted from the outset. Helps to keep things consistent too we find.

A couple of things before we continue…

Firstly, file management for uploads, in the majority of cases, is handled by ExpressionEngine’s default File Upload Manager. While we tend to use the TinyMCE File Manager for less savvy clients, the folks at Freshview (creators of Campaign Monitor) are all web developers, so we can provide some instructions and leave them to it. Any time we mention image upload custom fields, we’re referring to the standard ExpressionEngine File Upload Manager.

ExpressionEngine File Upload Manager

Secondly, most of the weblogs have the ability to display related promos in the site footer. These related promos are managed by the awesome EE extension ‘Playa’ made by Brandon Kelly. Each weblog has a Playa custom field for choosing which promos to display, and a ‘Show Promos’ drop-down to turn them on or off.

Campaign Monitor Weblogs

Yup – a relatively modest number here, and nothing overly clever - just the way we like it.

Campaign Monitor’s Weblogs

API

Campaign Monitor, like all good online apps, has an API. They support developers by way of providing API ‘Kits’ (pre-coded platform specific wrappers) and documentation for the API methods, of which there are currently around 20. As Campaign Monitor develops, further API functionality will likely be added, which means more kits and more documentation.

The API weblog is reasonably basic. Each kit has a custom icon, and the methods are placed into one of five categories.

Custom fields:

API Kit Icon (Text Input)

Articles & Tips

With the mine-field that is email design and development comes many, many questions. Thankfully, Campaign Monitor has the answers – all 12,137 of them.

Each article contains a summary and content, and can also display related case studies and downloads. In general the articles are assigned to a category (with an associated category image), but in some instances they are also assigned a custom URI via the Pages module. These URIs are created when a short and snappy URL is required, often for marketing purposes.

Pages Module

Custom fields:

Thumbnail URL (Text Input)
Page Layout (Drop-down List)
There are three layout templates for article pages: two column and three column templates, and a three column template which displays related downloads.
Related Case Studies (Playa)
Entries from the ‘Customers’ weblog are populated in this field, allowing related case studies to be displayed in the right column of any article.
Related Downloads (Playa)
Software available in the Downloads section can be associated and displayed with any article.

Related downloads using the ‘Playa’ Module

Blog

Not really much to see here. No custom fields; a handful of categories - that’s it. In a future post we’ll explain how we merged the old Campaign Monitor MovableType blog and Wordpress gallery into the thing of beauty you see today. Joy!

Customers

The Customers weblog is actually the largest and most complicated weblog in the site, as it performs several functions. Its main job is to handle customer case studies, although since they’re related, testimonials are stored here also.

Content from the Customers weblog is spread across several pages: the Customers index, the Case Studies index, individual case studies, and Testimonials. Customers are featured on the section index page by setting a custom entry status of ‘Featured’.

Custom Staus Group

Custom fields:

Contact Name (Text Input)
Position (Text Input)
Websites (LG Data Matrix)
LG Data Matrix is used to group the Website Title and URL.
Case Study Image URL (Text Input)
Case Study Tagline (Text Input)
Case Study Summary (Text Area)
Case Study (Text Area)
Testimonial Quote (Text Input)
Testimonial (Text Area)
Customer Logo URL (Text Input)
Customer Photo URL (Text Input)

Downloads

Campaign Monitor provide third-party plugins and modules for download, as well as hand-outs and documents. A decision was made early on in the site build, not to use ExpressionEngine’s file upload functionality here for managing the uploads, but to use plain old FTP, purely for its ability to move stuff around on the server if necessary.

LG Data Matrix was used to group data related to the downloads, and download types are grouped by category.

LG Data Matrix

Custom fields:

Files (LG Data Matrix)
Thumbnail Large (Text Input)
Thumbnail Small (Text Input)
Download URL (Text Input)
Used if a download is hosted anywhere other than Campaign Monitor’s servers.

Email Templates

Similar to the Downloads weblog, the Email Templates weblog is primarily focused on providing downloadable files. The files in question are approximately 30 HTML email templates which are available free to all of Campaign Monitor’s customers. The files themselves are zip archives of XHTML and images, and again FTP is used for uploading the files to the server.

MD Dulee Noted

Custom fields:

Additional Instructions (MD Dulee Noted)
Occasionally, a bit more instruction is required for a particular feature. In these instances we use Ryan Masuga’s MD Dulee Noted extension to add a sentence or two of information.
Download URL (Text Input)
Thumbnail URL (Text Input)

Features

The Features section of the site is the big sell. The content here needs to be succinct and presented in a way that makes it easy for potential Campaign Monitor customers to decide to sign up and get started. So the design needs to be bold, and not limited to a standard layout. This meant each of the pages in this section were very free-form; so bespoke XHTML in the content, and minimal custom fields.

Custom fields:

Page Title (Text Input)
This is displayed instead of the entry title. Allows for a more creative heading for the page.
Menu Icon URL (Text Input)
As more features are added, more pages will be needed, as will any associated menu icons.
Menu Title (Text Input)
Allows customisation of the link titles in the sub-navigation.

Gallery

Campaign Monitor has some great looking email designs delivered via their system, and highlighting the best ones shows other designers and developers what’s possible, and gets people talking about particularly cool approaches and techniques.

The previous gallery was powered by a standalone Wordpress install, and in order to retain SEO ranking and keep old bookmarks intact, the new Gallery had to retain all of the old Wordpress entry IDs. We’re going to cover this Wordpress / MovableType Voltron in a later post, but for the purposes of this one, all that was required to get the integration happening was a single custom field.

Custom fields:

Wordpress Entry ID (Text Input)
This field is used for the entries ID from the previous Campaign Monitor gallery. This ID is used in conjunction with Apache redirects to redirect to the correct entry if a user clicks an old link or bookmark.
Designer (LG Data Matrix)
Used to group the email designer’s name and URL.
Thumbnail (Text Input)
Web Version URL (Text Input)
Each Campaign Monitor email campaign has an associated online version for users with ~~rubbish~~ stubborn email client software.

Promos

The lovely promo graphics in the footer of the site are managed with this weblog. Each entry has an associated image, text that the image replaces via CSS, and a URL to click-through to. Promos are displayed randomly in general, but can be overridden to display specific promos on a per-entry basis.

Custom fields:

Image URL (Text Input)
Target URL (Text Input)

Screencasts

Although not currently active on the site, there’s a super-sweet Screencasts section coming soon! The screencasts themselves are hosted on Vimeo, and are presented in an Apple-esque style Shadowbox window. Shadowbox has built in support for Vimeo, so all that was needed to be done was to pass in the clip ID and a couple of other variables and we were good to go.

Custom fields:

Screencast ID (Text Input)
ID of the Vimeo screencast.
Screencast Thumb URL (Text Input)
Length (Text Input)
Duration of the screencast.

Sponsorships

Campaign Monitor generously sponsor web and design related meet-ups by providing beer, pizza and free Campaign Monitor credits. In fact, they sponsor our meet-up too, although we’ve never seen a single beer (we’re expecting a pallet to arrive any day now).

This weblog is another simple one, and is used for easy addition of new sponsorships, including their logo and URL.

Custom fields:

Thumbnail URL (Text Input)
Sponsorship URL (Text Input)

What’s next?

That about does it in terms of weblogs. There’s nothing overly complicated here although the size and scope may have seemed a little daunting. But good planning definitely makes things easier, and hopefully you’ve learned enough about our approach to weblogs to get you on the right track.

The next action-packed post in this series focuses on templates and template groups. Templates are often closely related to weblogs, so if you’ve made it this far, the next post should flow quite nicely. There are some great tips and tricks coming which we’re looking forward to writing about it, so stay tuned, and we’ll do our best to fill your mind-tanks with as much ExpressionEngine juice as you can handle!

Don’t forget the competition!

We’re running a competition in conjunction with these posts (more about that here). There is almost $3000 in fantastic ExpressionEngine licenses and modules, Campaign Monitor credits and learning materials up for grabs, so we encourage you to get involved. There are several ways you can enter, and you can enter multiple times:

Tweet about the series (click here or include the hash code #buildingcm in your tweet)
Digg any blog post in the series
Bookmark any blog post in the series on Del.icio.us
Leave a constructive comment on any post in the series
Subscribe to the RSS feed (click the secret link in any RSS article and leave a comment in our hidden blog post to register your entry)
Subscribe to the newsletter (sign-up form at the bottom of this site)
Forward the newsletter to a friend (you can do so after signing yourself up)
Write a blog post about the series and ping us

7/2/09 10:49pm — I’ve just updated the post to point out that Campaign Monitor are using Ryan Masuga’s MD Dulee Noted extension rather than LG Instruct.

Comments

The following 40 people were compelled to have their say. We encourage you to do the same.

Steven Hambleton said on Saturday 7th February, 7:15pm: 1

Remember that weblogs will be called Channels in ExpressionEngine 2.0.
Wayde Christie said on Saturday 7th February, 7:19pm: 2

@Steven – you’re right, but we didn’t want to confuse new users *now*. We’ll be updating the post when EE 2.0 hits the shelves. Cheers :)
Neil said on Saturday 7th February, 8:47pm: 3

I have read quite a few introductory posts to EE but never felt like setting aside WordPress to learn to use another platform. This is the clearest explanation I’ve seen of any part of EE and makes the learning curve seem a lot less steep. A lot.
Thanks very much. I am looking forward to the next episode.
I am glad the name is changing from weblogs to channels - sooner the better - because it will be a lot less confusing once you have finished the series and I start actually playing with EE. Thanks in advance for updating the post then. I’ll bookmark it now in anticipation.
You know what? Depending on how many chapters you have planned, this would also make a good e-book.
Peter said on Saturday 7th February, 8:51pm: 4

Great writeup, looking forward to the next post! Thx guys.
T.ee.F.oo said on Sunday 8th February, 2:20am: 5

Admin and asif (aww-shit-I-forget) right ;)
IT didnt’ really work, you can’t allow that kind of access for viewing only, probably not.
Is it real then, I tried logging in.
dense-person.
Jonathan Longnecker said on Sunday 8th February, 6:55am: 6

This is great guys; I can’t wait for some of the meatier stuff! Quick question though.. how come I’m getting 5 copies of each entry in NetNewsWire? Kind of strange. But anyway, looking forward to the next one!
Bob H said on Sunday 8th February, 11:37am: 7

In the Email Templates weblog’s additional instructions you remind the authors to select a few categories when publishing a new entry. If it’s really imperative they do so each time I can recommend the ’Required Categories Extension’ from Designchuchi.
Deron Sizemore said on Sunday 8th February, 4:15pm: 8

Great write up! I’ve got to try Playa on my next site!

One question I have thought is using the Pages Module to make a URL more user friendly. I’ve always used the Pages Module for static pages, e.g., about, privacy policy, etc. So if you create a new entry with a long URL title and decide to shorten it with the Pages tab, will the URL automatically show up correct in the weblog:entries loop? Or will it, by default show the normal url-title unless you do something specific to show the pages URL if one is present? Hope that makes sense.
Wayde Christie said on Sunday 8th February, 5:13pm: 9

@Neil – Thanks for the kind words, and yes, the idea of an e-book is currently being tossed around :)

@Jonathan – That’s a mystery to us too. We’re looking into it and will try and have it sorted before the next post. We’re fans of your work btw ;)

@Bob – I wasn’t aware of the ‘Required Categories’ extension. It looks to be a great solution and is something we’ll definitely check out. Thanks for the suggestion!

@Deron – If you define a Pages URI in your entry, you’ll need to check for it’s existence in your weblog loop in order for the correct URL to display. There’s more info in the ExpressionEngine docs. Cheers :)
Jonathan Longnecker said on Monday 9th February, 8:16am: 10

Thanks for the kind words, Wade. I might be blushing a bit :)
Mathew Packer said on Monday 9th February, 10:45pm: 11

My interest in EE is rapidly piquing.

The site structure you’ve mentioned here seems complicated, but makes a lot of sense.

Bring on article 2!
Wayde Christie said on Monday 9th February, 10:53pm: 12

@Mathew – Glad you’re into it. The site structure for the Campaign Monitor site is actually quite simple.

One of the biggest hurdles a lot of ExpressionEngine users have is tying the whole thing together. There’s definitely an ‘a-ha’ moment for all new EE developers, and after that, you’re hooked!
Deron Sizemore said on Tuesday 10th February, 1:08am: 13

@Wayde - Thanks for the link! Never seen that before in regards to the pages module. Great stuff!
Austin Siewert said on Tuesday 10th February, 1:29am: 14

Thanks for sharing! I actually just started using EE, and finally put my first EE site live a week ago. It’s definitely reassuring to see that I followed very close to some of your techniques with CM site. It’s always great to have a nice foundation to build off of.

Again, thanks for sharing!

Specials thanks for all of Leevi’s great extensions and plugins.
Deron Sizemore said on Tuesday 10th February, 1:59am: 15

@Austin - I agree. I was the same way and still am to a point. There are so many ways to do something in EE that you always have this feeling that there are better ways of doing something than the way you’re doing it. Reading through posts such as this and seeing that what you’re doing is in line with the experts, is very nice.
Nik said on Tuesday 10th February, 12:45pm: 16

Great Stuff! This page is going to be permanently bookmarked for me. I Know i’ll be returning to these articles again and again - there’s so much good stuff here…. especially for an EE newbie like me.

Letting us login and poke around is very brave too. Kudos to both you and Campaign Monitor for letting up do that.
Nik said on Tuesday 10th February, 1:46pm: 17

Quick CSS question…. how do you make the lens flare background effect on this page stay fixed to the top of the browser window (no matter where you scroll) while the top-of-the-page dark strip (with ‘Contact Us’ and ‘Client Login’) always stays at the very top? Are you using a transparent PNG which somehow floats over the background images?

Sorry if its out of order—just intrigued!!
Wayde Christie said on Tuesday 10th February, 1:51pm: 18

@Nik – The lens flare is a fixed background (background-position:fixed), and the rest of the backgrounds are transparent PNGs ;)
Brandon Vaughan said on Wednesday 11th February, 5:33am: 19

Do you use an e-commerce tool (ee integrated) on campaign monitor? If so, do you mind sharing which tool you use?
Wayde Christie said on Wednesday 11th February, 11:37am: 20

@Brandon – There is a credit card process in the Campaign Monitor app itself, but not the site. There are a couple of EE e-commerce solutions available, but it still remains a hotly debated topic :)
Stephen said on Saturday 14th February, 5:04am: 21

I’d be interested to learn more about the two or three column layout for Articles & Tips. What does that then do in your templating logic? Does it assign different embedded templates? I’m curious because my authors tend to like to include images, or grids, or supplemental content… and I’d love to provide them a standard (but flexible) structure to write their articles in… let them pick from a set of “article templates”
Janine said on Saturday 14th February, 7:14am: 22

Delighted to see this tutorial series. It is really good of you guys to document such a major EE site build so well. Much appreciated! :)
I’ve recently started looking into EE after heading so many raving about it. While I thought I’d get up and running quickly enough after doing the EE quick start videos, I was overwhelmed and confused when it came to actually working out how to put together a site.
I went through some of Ryan Irelan’s screen casts lately and these really helped clear things up a lot. While I have yet to build a complete site with EE, this weblogs article and the comments made a lot of sense to me too, so I think it’s starting to click and I’m really looking forward to the rest of the series.
Like Stephen in the comment above, I would also be interested in knowing how the layout variations people select for Articles & Tips are brought through to the templating logic, but maybe that magic will be revealed next time? :)
mahalie said on Saturday 14th February, 2:29pm: 23

you RAWK!! Just skimming your article I saw several solutions to weird problems I’ve been fighting in my firm’s new EE site. GREAT STUFF!
Wayde Christie said on Saturday 14th February, 2:50pm: 24

@Stephen & @Janine – The ‘Page Layout’ custom field sets a class of either ‘two-col’ or ‘three-col’ on the body tag. We then turn the third column in the articles template on or off via the magic of CSS. We’ll be going into this approach in more detail in the third post in the series.

@Mahalie – Thanks! Happy to help :)
Neil Bradley said on Sunday 15th February, 1:50am: 25

Thank you so much for the immense article. Very constructive and informative review of your work to adopt EE.

Having watched Ryan Irelan’s screencasts, this blog post is a perfect follow on to delve deeper into structuring my own EE information architecture.
Ryan Masuga said on Sunday 15th February, 2:09pm: 26

Thanks for mentioning MD Dulee Noted. I can’t imagine doing a complex weblog without it, if I do say so myself!

Also, I was surprised to see you weren’t aware of the Required Category extension. It always amazes me how many add-ons (even experienced) EE developers aren’t aware of.

@janine: Setting a template layout based on a custom field can be as simple as giving the body tag a class (or ID) with CSS. I’ve used this multi-layout technique with great success for clients, and even put thumbnail images in a MD Dulee Noted field so they can visualize what the template will look like.
Steven Grant said on Tuesday 17th February, 1:52am: 27

Thanks for this guys - I’ve only just given it a quick read, will do a more in depth read in the next couple of days time permitting.

One query though with regards to image management. You’ve linked through to TinyMCE File Manager which takes one through to TinyMCE WYSIWYG Editor. I know Leevi has the extension but not sure how it works because his link goes through to WYSIWYG. Any assistance on offer here?
Janine said on Tuesday 17th February, 3:07am: 28

Thanks Wayde and Ryan for the clarification on implementing template variations. I have made great use of body classes/ids for doing something similar in building standard sites, I just hadn’t twigged that these same techniques would be very easy to incorporate in EE sites. I like the way that I can go about building XHTML/CSS in the same way as before, rather than fit in with the limitiations of a CMS.
Shannon said on Tuesday 17th February, 4:49am: 29

Interesting way you are using the pages module. It brings to mind something I’ve been wondering about and can’t quite decide if it is problematic or not. You say on here that you both assign a category and a pages uri to some content items. Does this end up creating duplicate content for you, and, if so, what methods do you use to prevent google from indexing the duplicates if any?
Wayde Christie said on Tuesday 17th February, 1:39pm: 30

@Steven – Sorry for the confusion. We sometimes use the TinyMCE WYSIWYG editor for our client sites, and we also use the File Manager and Image Manager occasionally. Depends on the application really.

@Shannon – It probably does create duplicate content if you don’t code the page URIs correctly in your templates. But since we check for the existence of a URI and then output it if it’s found, EE will never generate a link to the category URL so crawlers will never find it. I’m pretty sure of this, but definitely happy to be proven wrong! Cheers :)
Shannon said on Tuesday 17th February, 3:06pm: 31

Thanks for the clarification Wayde. I think I just misunderstood what you are doing. So, for the code where you display articles by category, you have a conditional in there to check for a URI and code that in… if it’s not there, then you code in the category link. So, the category link never gets used if a URI is there. That makes sense. And basically you are using the pages URI just to shorten the link. I also notice you’re not really displaying a typical category link at all… they seem to come up as /entry/entrynumber/articletitle. Do you find this to be an advantage in some way? Sorry if these are newbie questions. I’m still pretty new to EE. I’m thinking this might be a way of dealing with duplicate content if you want to legitimately add content to multiple categories. I guess that it might be a disadvantage if the category names in the links could help with SEO? Anyway, thanks again.
Craig Hocking said on Friday 20th February, 2:04pm: 32

Hi guys, just found your website through the EllisLab News Feed on the EE control panel home.

I’m new to expression engine and very excited to see an Australian web development studio doing some great stuff with it. Thanks for sharing, you have now been booked marked in my EE folder. Cheers.
Jeff Claeson said on Wednesday 25th February, 2:21pm: 33

Excellent insight into a real-deal, big name site. I’ve been using EE for several months on several projects now and it’s nice to get this kind of insight into how others are building sites with EE. Lots of very helpful info here so thanks!
Wayde Christie said on Wednesday 25th February, 4:00pm: 34

@Craig – Nice to see some Aussie commenters too :)

@Jeff – Cheers!
MikeTheVike said on Saturday 7th March, 5:48am: 35

Wow, just ran across this article at just the right time. I’ve been hearing about EE and just downloaded the Core to play around with. And I’ve been going through the documentation. This is a fantastic series of articles. Thanks!
Bud Parr said on Monday 9th March, 3:59pm: 36

Great stuff - the site and the posts. I love seeing your decision making in such detail here and thinking about how I would do it myself (like, would I have separated case studies and clients into their own sections, etc).
Thanks very much,
Bud Parr
Trevor Davis said on Wednesday 25th March, 5:20am: 37

I’m finally getting ready to build my first EE site for a client after much research, and this post and the next post are definitely useful for determining how to structure things.

One thing I did have a question about was the API section. To me, it looks like you almost have 2 different weblogs: Kits and Methods. But based on your weblog definitions, it looks like it is only 1. How is that possible?

Anyway you can explain that a little more? Thanks in advance.
Leevi Graham said on Wednesday 25th March, 8:33am: 38

@Trevor Davis: The API weblog actually uses categories to separate the kits and methods. The methods category also has sub categories for campaigns, subscribers, etc.

If I was going to do this again I would probably separate the kits and methods into two weblogs giving more flexibility as the clients requirements change.
Trevor Davis said on Wednesday 25th March, 10:47am: 39

@Leevi Graham -
Ah ok, categories, that makes sense. It also makes sense to split it into two weblogs for more flexibility.

Thanks for the feedback.
Suffie said on Saturday 9th May, 11:56pm: 40

Hi, I’m from the lovely island of Barbados.
I started trying out Expression Engine a week ago. I love it so far, there is so much you can do with it. Imagine my surprise when I found that the Campaign Monitor site, which I love, is done using EE. I also love the product itself as well.
I’m using your articles to help me understand how to best set up websites. Thanks!