Wednesday, October 22, 2008
Using the Graphic Design Template Editor
Personalization requires you to use a custom graphic design template, since personalization modifies the HTML used to format the emails. To find the template editor, go to the Newsletter Center for the relevant blog, and click the "graphic design" link (marked by the icon you see at the left). You don't have to enable the template right away, however: you can build out the personalization in the template and test it using its preview function before you go live.
The most basic form of personalization is simply to have the system substitute the custom field in to the newsletter. Say you have the custom field FirstName and you want to build a basic greeting "Dear FirstName" at the top of the newsletter.
If you just type FirstName into the template, then what happens is that the template just thinks that's regular text, and will simply add "FirstName" to your newsletter. Yuck. To tell the template that we want to use a custom field variable, you enclose it in template tags
$>(just like the other template variables that you see underneath the editor). So, to substitute in the recipient's first name, you enter the text
<$FirstName$>into the editor. The greeting therefore looks like this:
Custom field variable names are not case sensitive, so you can also write this and it will work:
You can use any of your custom fields this way. Easy! Don't forget that the custom field "email" is pre-defined for you, and so you can use it as
<$email$>in your template.
But what if the user hasn't completed the registration form yet, or the field you want to use was optional and the user didn't enter any data? In this case, FeedBlitz will use the default value you specified when you defined the field. If you didn't specify a default, FeedBlitz will replace the tag with nothing (i.e. empty text).
Remember that that your template is used in places other than your newsletter mailings. It's also used to format:
- The subscription form;
- The online preview;
- Subscriber confirmation landing pages;
- Activation emails.
The answer is to use conditionals - if statements. The FeedBlitz custom field template system supports the following conditional tags:
<$endif$>. Rather than delve into syntax, it's simpler to show a couple of basic examples to demonstrate they work:
<$if email=""$>You are not logged in<$else$>Hi there, <$FirstName$><$endif$>
<$if FirstName=""$>Dear Visitor:<$else$>Dear <$FirstName$><$endif$>
The first example changes the output depending on whether or not the subscriber is logged in, and the second one changes the salutation depending on whether the FirstName field is empty or not.
Conditionals are therefore a great way to:
- Alter content where the reader is unknown;
- Change the output based on a custom field's value.
Although the examples above used an
<$else$> tag, you do not have to have one. So this is fine:
<$if premiumfield="1"$>You are a premium customer!<$endif$>
What you must have is a corresponding
<$endif$> for each
<$if$> you start.
If you use hidden fields you can use them in these template expressions, but if you expose them in the template like this
<$HiddenFieldName$> then the content of that field will be revealed in the output. So be careful and test using the preview to avoid any awkward subscriber data revelations. Like segmentation rules, text comparisons are case insensitive.
Conditional testing works in the same way that segmentation does (it's the same code under the covers). So you can test using math, parentheses to control precedence, and the following logical operators:
So you can write:
<$if favoritecolor!="blue"$>Why did you did not pick blue?<$endif$>
Nested If Statements
You can also nest if statements to multiple levels, so that (for example) you can decide (a) whether the subscriber is logged in, and (b) whether to do something based on what you know about them. Here's an example based on a Gender custom field for a clothing store:
<$if gender=""$>Please complete our registration form or log in<$else$><$if gender="m"$>Men's ties are on special this week<$else$>Half off leading designer handbags<$endif$><$endif$>.
The special offer is only presented to registered subscribers, and that the offer is different based on what you know about that subscriber. Note also that each opening
<$if$> has a corresponding
If you get this wrong, the template editor preview (and other screens where the template is used if you take it live with an error in it) will display "syntax error" if your statements don't match up properly. So don't forget to test, and make sure you have both the leading "
<$" and trailing "
$>" (i.e. make sure you write "
<$if some logical test $>" and "
<$else$>" and "
<$endif$>", and NOT "
<$if some logical test>" or "
<$else>" or "
<else>" or "
You can also use conditionals around HTML tags and page elements to based on subscriber data. For example, you could define an image in the editor, and then precede it with the opening
<$if> statement and put the
<$endif$> after the image. The image will only be put into messages and screens where the
<$if$> statement says it should. Really advanced users can go into the HTML source and use conditionals on the raw HTML for extensive personalization of styles and layouts, but that takes great care.
And no matter what you do, don't forget to test!
Testing, testing, testing...
And test more than your newsletter. Here are my tips to ensure that your template works everywhere it's going to be used:
- While you're editing, test using the online editor's preview feature.
- After you enable the template, test using your ID:
- The online preview;
- The subscription form.