The Sign-Up.to dynamic content system allows emails to be personalised for individual subscribers by automatically changing the content of the email sent to them based on a set of rules that you create. This is done using a new set of mark-up tags that are placed within your conventional HTML.
Dynamic content can benefit you in several ways:
- You can send one campaign that has different content for different groups of people.
- Personalisation extends beyond outputting a field from a database. Dynamic content allows different text and images to be sent depending on what we know about an individual.
- As well as our standard personalisation fields (name, date of birth etc.), you can use dynamic content with your own custom profile fields relevant to your brand, such as preferred operating system or nearest store (note that dynamic content is not compatible with multiple select fields).
- By targeting your message to specific subscriber interests you can increase the relevance of your emails, leading to better results and happier subscribers!
Dynamic content uses conditions which can be expressed with logic of arbitrary complexity so that you can create fine-grained rules to determine which subscribers see what content.
In order to use dynamic content and this documentation you will need a working understanding of HTML.
The sections below provide complete documentation for all the dynamic content tags and their syntax. The Errors section documents all of the errors that can be returned if you make a mistake when using dynamic content, and finally, the Examples section has a listing of sample campaigns.
Testing your campaigns
To make it easy to test your dynamic content campaigns, we've created a sandbox tool which you can use to simulate sending a campaign to different subscribers, to see the content that will be output under different conditions.
Availability
This feature is available to all customers but if you've had an account with us for a while then you may need to check with Support that dynamic content has been activated.
Contents
- Getting started
- The profile tag
- Action tags
- The image tag
- The value tag
- Comparison tags
- Logic tags
- Dates and times
- Errors
- Examples
Getting started – the if statement
At the core of dynamic content is the if statement. In its simplest form this consists of an expression and a then statement containing HTML output or more dynamic content. In the below example we provide additional text for female subscribers.
<sut:if> <sut:equals> <sut:profile name="gender" /> <sut:value>female</sut:value> </sut:equals> <sut:then> <p>This is visible only to women</p> </sut:then> </sut:if>
Any number of conditions and actions can be placed inside an if statement. Extending the above, we can produce alternative text for men and women. Each expression will be evaluated in sequential order and in the first case that one evaluates to true, the following then tag will be placed in the email.
<sut:if> <sut:equals> <sut:profile name="gender" /> <sut:value>female</sut:value> </sut:equals> <sut:then> <p>This is visible only to women</p> </sut:then> <sut:equals> <sut:profile name="gender" /> <sut:value>male</sut:value> </sut:equals> <sut:then> <p>This is visible only to men</p> </sut:then> </sut:if>
Some conditions we cannot easily anticipate. For this reason, the else tag can optionally be placed at the end of the if statement.
<sut:if> <sut:equals> <sut:profile name="gender" /> <sut:value>female</sut:value> </sut:equals> <sut:then> <p>This is visible only to women</p> </sut:then> <sut:equals> <sut:profile name="gender" /> <sut:value>male</sut:value> </sut:equals> <sut:then> <p>This is visible only to men</p> </sut:then> <sut:else> <p>This is a gender-neutral default</p> </sut:else> </sut:if>
The profile tag
The profile tag is a replacement for the older personalisation tags.
<p>Hello <sut:profile name="first_name"/></p> <p>Hello <sut:profile name="first_name" alt="Sir/Madam"/></p> <p>Hello <sut:profile name="first_name" format="ucase"/></p>
The profile tags can also be used as standalone conditional expressions to see if we have that information about a person.
<sut:if> <sut:profile name="first_name" /> <sut:then>The subscriber has a firstname</sut:then> <sut:else>The subscriber doesn't have a firstname</sut:else> </sut:if>
The below table has a full breakdown of attributes:
The following formatting modes are available:
A list of basic profile fields and their default format:
Action tags
Action tags insert links for specific actions that can be triggered from your email, for example an unsubscription request. You can customise your own text within the tags to appear to your subscribers.
<sut:change_format>Change Format to text</sut:change_format> <sut:unsubscribe >Unsubscribe from this list </sut:unsubscribe> <sut:send_to_friend>Send this to a friend</sut:send_to_friend> <sut:online_version >View this in a browser</sut:online_version> Default text: Change Format Unsubscribe Send to Friend View online version
Any attributes you add to the tags will be preserved when output, allowing you to add styles, names, classes, etc:
<sut:change_format>Change format to text</sut:change_format> <sut:unsubscribe style="color:#ffffff;">A white unsubscribe link</sut:unsubscribe> <sut:send_to_friend style="font-family:Arial;">Specified font</sut:send_to_friend> <sut:online_version align="center">Centred view online</sut:online_version>
You can also include other tags, for example images, within the action tags:
<sut:change_format><img src="textversion.jpg" alt="Change Format to text" /></sut:change_format> <sut:unsubscribe><img src="unsubscribe.jpg" alt="Unsubscribe from this list" /></sut:unsubscribe> <sut:send_to_friend><img src="sendtofriend.jpg" alt="Send this to a friend" /></sut:send_to_friend> <sut:online_version><img src="viewinbrowser.jpg" alt="View this in a browser" /></sut:online_version>
The image tag
The image tag can be used to build personalised HTML img tags. The src attribute can be personalised to insert all basic profile fields and extended profile fields in their raw format. Field names must be enclosed in '%' characters. e.g. %first_name%, %surname% and %email%. For example:
<sut:image src="http://www.sign-up.to/assets/images/%first_name%.png" name="image1" />
The above example would generate the following HTML image tag – based on the specified field containing the raw value 'logo':
<img src="http://www.sign-up.to/assets/images/logo.png" name="image1" />
N.B. the HTML img tag will inherit all other sut:image attributes, allowing you to specify all supported img tag attributes.
The value tag
The value tag is used to encapsulate literal values within an expression.
Comparison tags
There are a variety of tags that can be used within a conditional statement. First of all, the equals tag can be used to compare two values. In the below example, the expression evaluates to true if the subscriber lives in a town called Woking. This is a case-insensitive match.
<sut:equals> <sut:profile name="town" /> <sut:value>Woking</sut:value> </sut:equals>
The not_equal tag behaves the opposite way to the equals tag. In the below example the expression evaluates to true if the subscriber lives anywhere except a town called Woking.
<sut:not_equal> <sut:profile name="town" /> <sut:value>Woking</sut:value> </sut:not_equal>
There are tags to deal with checking ranges of values. The following example evaluates to true if the subscriber was born after July.
<sut:greater_than> <sut:profile name="birth_month" /> <sut:value>7</sut:value> </sut:greater_than>
More comparisons can be done with the following tags:
<sut:greater_or_equal> <sut:less_than> <sut:less_or_equal>
There are simplified aliases for all of the comparison tags.
<sut:eq> Equals <sut:neq> Not equals <sut:gt> Greater than <sut:gte> Greater than or equal to <sut:lt> Less than <sut:lte> Less than or equal to
Logic tags
More complicated comparisons can be built up by using logical operator tags. These can be nested to any depth. The and tag evaluates to true if all sub-expressions are true. In the below example, the expression is true if the subscriber lives in Woking and was born in December.
<sut:and> <sut:equals> <sut:profile name="town" /> <sut:value>Woking</sut:value> </sut:equals> <sut:equals> <sut:profile name="month_birth" /> <sut:value>12</sut:value> </sut:equals> </sut:and>
The or tag evaluates to true if any of the contained expressions are true. In the below example, the expression evaluates to true if the subscriber either lives in Guildford or was born in January.
<sut:or> <sut:equals> <sut:profile name="town" /> <sut:value>Guildford</sut:value> </sut:equals> <sut:equals> <sut:profile name="month_birth" /> <sut:value>1</sut:value> </sut:equals> </sut:or>
The not tag inverts the result of an expression. In the below example, the expression evaluates to true if the subscriber does not live in Woking.
<sut:not> <sut:equals> <sut:profile name="town" /> <sut:value>Woking</sut:value> </sut:equals> </sut:not>
Dates and times
There are a handful of tags available for easier manipulation of dates and time.
The most flexible is the now tag, which can be used in comparisons or can be formatted according to other rules to produce the output you require.
<sut:now /> 2010-01-22 17:31:44 <sut:now format="date" /> 22nd January 2010 <sut:now format="php_date" pattern="F" /> January
A few additional tags have been introduced to make comparisons simpler.
<sut:now_date /> 2010-01-22 <sut:now_time /> 17:31 <sut:now_day /> 01-22 <sut:now_month /> 1
In addition to the day, month and year fields which can be used on an individual basis, a composite of their day and month of birth can be retrieved from a profile field. This is designed to do full birthday comparisons with the now_day tag.
<sut:profile name="birthday"/> 07-03
Errors
If you create a message with invalid dynamic content, syntax errors will be reported and the message will not be stored. This section describes each error.
Tag not closed
The new dynamic tags should always be valid mark-up. This means all tags must be closed at some point.
<sut:value>This tag hasn't been closed <sut:value>This tag has been closed</sut:value> <sut:value />Before this text is an empty tag, it wont need a close tag
Unexpected close tag
If a closed tag is found when no tag of that type was previously opened an error is produced.
After this text is an unexpected close tag</sut:value>
Unsupported dynamic tag
If you use a tag that is not recognised this error will be produced. The purpose of this error is to help identify spelling mistakes and avoid sending HTML that won't render in a web browser. Only tags in a name-space known to have dynamic content tags will be scanned for unsupported tags.
<sut:unsupported_tag>This will produce an error</sut:unsupported_tag> <unsupported_tag>This will not produce an error</unsupported_tag>
Expected tag
This message will be produced if a tag has been closed prematurely or contains the wrong kind of tags. For example, failing to provide a then tag after an expression in an if statement.
<sut:if> <sut:profile name="surname" /> <sut:value>This should be an sut:then tag</sut:value> </sut:if>
Expected attribute
Some tags require attributes. For example, sut:profile needs the name of the profile field to display.
<sut:profile name="surname"/> <sut:profile />
Unsupported attribute
Some tag attributes have a very specific set of allowed values and failing to provide a correct value results in this error, for example when determining the format of the output of a sut:value or sut:profile tag.
<sut:profile name="surname" format="ucase" /> <sut:profile name="surname" format="uppercase" />
Expected tag to be empty
Some tags should never contain anything else. The profile tag is the perfect example of this.
<sut:profile name="surname" /> <sut:profile name="surname"></sut:profile> <sut:profile name="surname">Expected tag to be empty</sut:profile>
Other errors
If an undocumented error has occurred, please contact support.
Examples
Upcoming birthdays
This is a message sent to patrons of a restaurant. If someone lives in Woking and it's their birthday in December it will display a special message.
<p>Hello <sut:profile name="first_name" alt="Sir/Madam"/></p> <p>Come to our restaurant - the food is great!</p> <sut:if> <sut:and> <!-- If it's their birthday in December ? --> <sut:equals> <sut:profile name="month_birth" /> <sut:value>12</sut:value> </sut:equals> <!-- And they live in Woking ? --> <sut:equals> <sut:profile name="town" /> <sut:value>woking</sut:value> </sut:equals> </sut:and> <sut:then> <p> It's your birthday soon, why not throw a party? </p> </sut:then> </sut:if> <p> <sut:if> <sut:profile name="first_name" /> <sut:then>Yours sincerely,<br /></sut:then> <sut:else>Yours faithfully,<br /></sut:else> </sut:if> The Chef </p>
Last purchase
This example shows three images of a clothing vendor's latest outfits based on their last purchase and gender. It presumes the company has last_purchase set up as an extended profile field, and that they are updating subscriber profiles once a purchase is made.
<p>Our latest offers!</p> <sut:if> <sut:equals> <sut:profile name="last_purchase" /> <sut:value>casual</sut:value> </sut:equals> <sut:then> <p>Our latest casual clothes..</p> <img src="http://www.myclothes.none/tshirt1.jpg" alt="Red Tshirt"/> <img src="http://www.myclothes.none/tshirt2.jpg" alt="Green Tshirt"/> <img src="http://www.myclothes.none/tshirt8.jpg" alt="Yellow Tshirt"/> </sut:then> <sut:equals> <sut:profile name="last_purchase" /> <sut:value>professional</sut:value> </sut:equals> <sut:then> <sut:if> <sut:equals> <sut:profile name="gender" /> <sut:value>male</sut:value> </sut:equals> <sut:then> <p>Our latest Men's work clothes..</p> <img src="http://www.myclothes.none/maleshirt10.jpg" alt="Men's shirt white"/> <img src="http://www.myclothes.none/maleshirt20.jpg" alt="Men's shirt black"/> <img src="http://www.myclothes.none/maletrousers23.jpg" alt="Men's trousers black"/> </sut:then> <sut:equals> <sut:profile name="gender" /> <sut:value>female</sut:value> </sut:equals> <sut:then> <p>Our latest Women's work clothes..</p> <img src="http://www.myclothes.none/femaleshirt10.jpg" alt="Women's shirt white"/> <img src="http://www.myclothes.none/femaleshirt20.jpg" alt="Women's shirt black"/> <img src="http://www.myclothes.none/femaletrousers23.jpg" alt="Women's trousers black"/> </sut:then> <sut:else> <p>Our latest work clothes..</p> <img src="http://www.myclothes.none/maleshirt10.jpg" alt="Men's shirt white"/> <img src="http://www.myclothes.none/maletrousers23.jpg" alt="Men's trousers black"/> <img src="http://www.myclothes.none/femaleshirt10.jpg" alt="Women's shirt white"/> </sut:else> </sut:if> </sut:then> <sut:else> <p>Our latest clothes...</p> <img src="http://www.myclothes.none/tshirt2.jpg" alt="Green Tshirt"/> <img src="http://www.myclothes.none/femaleshirt20.jpg" alt="Women's shirt black"/> <img src="http://www.myclothes.none/maletrousers23.jpg" alt="Men's trousers black"/> </sut:else> </sut:if> <p> <a href="http://www.myclothes.none/welcome">Visit our online store!</a> </p>