Learn how to use liquid markup language to create targeted and relevant content for both landing pages and email campaigns.
Overview
Advanced personalisation allows you to use Liquid markup language to create targeted and relevant content both on landing pages and in campaigns. In extension to other means of personalisation, advanced personalisation can be used to:
- Put insight data into an email campaign
- Put insight data into a landing page
- Loop through collections of data to repeat blocks of HTML to each relevant piece of content
- Manipulate the way text, dates, currency and numbers are displayed
- Show content depending on address book membership
- Use complex logic to determine what content should be displayed to each contact
Even if you're not going to write in Liquid markup yourself, it's useful to have an overview of what it is and what it can achieve.
What is Liquid?
Liquid is a markup language, which was developed for the eCommerce system Shopify. Liquid allows you to create content that changes, depending on the current data, and acts as an extension to the CSS and HTML that emails and landing pages are built upon.
We use Liquid because many front end developers are used to working with it, or will find it easy to learn it. A fuller description of what is possible in Liquid can be found on Github.
Before you start
Things you need to know:
- We support an extensive subset of the Liquid markup language. However, not all elements are supported.
- You must have Advanced personalisation turned on for your account.
To learn more, check out the article Add advanced personalisation to your account
- There are reserved variable names.
Don't use the following variable names, as they're reserved for system-defined values:account
contact
token
campaign
The basic elements of advanced personalisation
Advanced personalisation depends on the following:
- Data
What information you have about contacts - Logic
Why contacts should/should not see certain content and what content those contacts should/should not see, depending on their data - Content
Outputs content to those contacts, using HTML, CSS, outputs and filtered outputs
Output data into content
Outputs can be used to take data and create content.
For example:
Hello {{ contact.data.firstname }},
This will output 'Hello' followed by the first name stored for a particular contact.
Those of you used to our standard personalisation will note that this is exactly equivalent to:
Hello @FIRSTNAME@,
In this case we outputted a piece of contact data; we can also output account specific data. For example:
Hello {{ contact.data.firstname }}, the current time is {{ account.datetime }}.
This will show a message to the named contact containing the current date and time.
For a complete list of all the data that can be outputted, check our documentation on outputs and data objects.
For outputting Insight data, you'll need to know about logic tags (below) and see our guide to outputting Insight data.
Filtered outputs
You can use filters to change the way outputs are displayed. For example:
Hello {{ contact.data.firstname }}, the current date is {{ account.datetime}}.
Might be outputted as:
Hello ben, the current date is 05/08/2015 07:30:31.
But it can be changed with filters as follows:
Hello {{ contact.data.firstname | capitalize }}, the current date is {{ account.datetime | date: "%e %B %Y" }}.
To show:
Hello Ben, the current date is 05 August 2015.
Note that the first element in the output (surrounded by {{}} brackets ) is always what gets outputted, and the other bits (separated by | pipes) are filters.
An output can have multiple filters.
For example:
{{ account.datetime | date: "%e %B %Y" | upcase }}
Will output the date in the format containing the day (dd), month and year, then uppercase all letters inside it:
05 AUGUST 2015
Various filters are available for manipulating text, numbers, dates and arrays. See our list of available filters.
Logic tags
Tags are used when building logic to tell your content what to do, for example:
{% if contact.data.firstname == 'ben' %}
Hey Ben!
{% else %}
Hello there!
{% endif %}
In the above example, this will show different content depending on whether or not the contact's first name is Ben. This functions pretty much as our regular dynamic content.
A more interesting example is using for-loops, for example:
{% for book in contact.addressbooks %}
{{ book.name }} <br/>
{% endfor %}
This will get the list of address books that a contact is in, and for each address book show the name of the book followed by a line break.
For a full list of supported logic tags, see our documentation using logic tags in campaigns and landing pages.
Even with these basic rules, advanced personalisation allows for some truly tailored content but the power really comes when you combine all the options available.
Liquid markup is space sensitive
Therefore, make sure that you separate each operator with a single space. For example, the following code evaluates to true:
{% if 1 == 1 %}Whereas, the following code evaluates to false:
{% if 1==1 %}