Coding dynamic content components

6 minute read

It’s fair to say we’re pretty excited about dynamic content components. That is, how you can create campaigns with content which automatically adjusts according to the profile characteristics of your audience. Dynamic content can now be used directly using special components in the Sign-Up.to responsive email editor. However to get to the nitty-gritty of how dynamic content components work we’re going to have to delve a little deeper into the coding technicalities.

Coding dynamic components

The starting point for this is a working knowledge of HTML and, since Dynamic Content is driven by a decision process, a familiarity with the IF…ELSE statement. It’s a techie read – so be prepared.

Alternatively if you like what you see… but… you’d like us to do it for you, then drop us a line (solutions@sign-up.to) so we can understand exactly what you have in mind.

By the way –  there’s also lots more detail in the Sign-Up.to Knowledge Base Guide on dynamic personalisation. You’ll also see individual links to sections of this guide article below.

First – to recap.
Dynamic content is an advanced form of personalisation that uses profile field data to display different areas of pre-set content. Unlike responsive coding the content which is displayed is calculated at the point of send. This means that a campaign with a lot of dynamic elements may take a little longer than normal to be processed and sent. Also, since, in order to be able to select the appropriate content to display, emails with dynamic content are generally built to include all of the possible content. Linking dynamic content campaigns with large numbers of profile variations can therefore create a somewhat large base email.

You’ll also need to ensure that the “Enable Dynamic Content” option is selected for your account for this to work. If you think this might be an option you need turned on, please let our Support Team know (support@sign-up.to).

Let’s look at some of the detail of how to include information into your dynamic content components.

Images
Let’s start simple with the img tag. With this we can populate content into the src URL of an img tag effectively customising the image that the subscriber sees. This is done by including the profile name enclosed in “%” in an sut:image tag, thus:

<sut:image src=”http://www.sign-up.to/assets/images/%PROFILE%.png” name=”image1″ />

This will need to be hard coded into a component so it can’t be amended in the editor. The email editor does not host images by the image name so to use this you’ll either need to host the images yourself or upload them to the image libraries of the old Campaign Designer or Campaign Editor.

A practical example of this is if a client has several account managers and wanted to display the photo of the account manager to the subscribers.

<sut:image src=” http://c1948902.cdn.cloudfiles.rackspacecloud.com/17970-DYNAMIC_CONTENT–%accountmanager%.jpg” name=”Manager” />

The IF statement
This is the real meat of dynamic content. Simply put, within the IF statement there is a string parameters, and then an ELSE option that covers all other eventualities. So:

Dynamic content

Without including an Equals or Value tag the IF statement can also be used to detect whether a field is populated and display relevant content:

Dynamic content

Statements can be nested to further differentiate or make some common sense changes to the content. There are also several Comparison tags that can be used instead of or in conjunction with Equals. If several parameters are positive then only the first will be displayed.

Dynamic content

The IF in the email editor
All of this can be applied to the email editor and combined with custom, pre-populated components. It will need to be added to the HTML section of a component, rather than the XML, with any editable areas specified as

<columncontent/>.

This provides the bonus that a user without any coding knowledge can edit the content on a per campaign basis. Here is an example of a “meet the team” style component with a section to the right to add a weekly special offer.

DC-a

 

DC-b

DC-c

DC-d

And here’s how it would look…

Finished campaign

You can add images, edit the text, edit the theme and add or remove sections within the component as you wish. Your subscriber will receive an email with only the relevant section to them.