HTML Guidelines – Merge Variables

Below are some best practices to follow when you are creating a custom HTML template for your Direct Mail campaign, together with ‘merge variables’ to easily generate highly personalised and dynamic content. Following these HTML Guidelines – Merge Variables will help you to get started.

HTML Guidelines – Merge Variables – Postcard A5 Back Side Template

HTML Guidelines - Merge Variables - Example Template Postcard A5 Back

<link href=“https://fonts.googleapis.com/css?family=Bitter:400,400i,700” rel=“stylesheet”>
<style>

.postcard {
  background-color: #E2E3E4;
}

.text {
  margin-top: 10mm;
  padding: 0mm 5mm 0mm 10mm;
  width: 122mm;
  height: 135mm;
  font-family: ‘Bitter’, serif;
  font-size: 12px;
  text-align: left;
  color: #000000;
  line-height: 1.8;
  border-right: 1px solid #bbb;
  position: absolute;
}

.discount-code {
  font-size: 18px;
  color: #27ae60;
  font-weight: 700;
}

.signature {
  margin-top: 105mm;
  margin-left: 8mm;
  width: 50mm;
  height: 25mm;
  position: absolute;
}

</style>

<div class=“text”>
  <p>Hi <strong>{{first_name}}</strong>,</p>
  <br>
  <p>This is an example of our A5 postcard template solution, which allows marketing professionals to use HTML-code to design and produce printed marketing campaigns with highly personalised and dynamic content.</p>
  <br>
  <p>As we move forward with the development of the product, we unlock new possibilities for marketers to connect better with their customers by utilising the positive characteristics of direct mail and combining them with programmatic marketing.</p>
  <br>
  <p>Your personal promo code: <span class=“discount-code”>{{discount_code}}</span></p>
  <br>
  <br>
  <p><strong>Happy Shopping!</strong></p>
  <br>
  <p>Regional Sales Director</p>
</div>

<div class=“signature”>
  <img src=“https://postana.com/images/example/signature.svg” width=“100%”>
</div>

Using Merge Variables

To make use of a merge variable you need to insert a ‘tag_name’ with double curly braces into your HTML template, for example {{tag_name}}. You can define whatever variable makes sense for the design you are creating.

In the preview above you can see that we created a merge variable {{first_name}} to insert the name of the person, and a second merge variable {{discount_code}} to insert an unique promotion code for this person.

Strictness Setting

We apply a ‘relaxed strictness setting’ policy on the merge variables. This means that we will not show an error if you create a merge variable in your HTML that is unused or doesn’t get an input value at the moment of creating the direct mail campaign. Instead of sending the error we will simply render nothing in the HTML in place of that merge variable.

Regardless of our relaxed strictness setting, if you add merge variables data that is not defined in your HTML with a {{tag_name}}, no error will be shown. Your HTML will simply be rendered as normal without including the extra variable(s).

Personalisation

Merge variables make it very easy to personalise your Direct Mail campaign with customer information such as; ‘name’, ‘location’, ‘gender’, ‘age’, ‘language’, etc…, but you can also use purchase information, such as; ‘order value’, ‘purchase date’, ‘frequency’ and ‘product information’. This will make your campaign relevant and highly targeted.

Dynamic Content

Merge variables can not only be used for personalisation. It can also be very helpful to create dynamic content and flexible designs by using it as a variable into your HTML code to define ‘color’, ‘fonts’ or ‘images’. You can use these options to create completely custom artwork for every user, or apply variations for running design experiments.

The HTML example below shows how to use a merge variable in combination with color. Please keep in mind that we use a relaxed strictness setting policy. This means that if the merge variable for the color gets an input that is not representing an HTML color code, than the color will not be applied.

.postcard {
  background-color: ‘#{{variable_background_color}}’;
}

The next HTML example shows how to use merge variables in combination with fonts. Please keep in mind that all variations of the fonts that you are planning to use must be include with a link to the font in the beginning of your HTML template.

<link href=“https://fonts.googleapis.com/css?family=Bitter:400,400i,700” rel=“stylesheet”>

<link href=“https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700” rel=“stylesheet”>

<style>

.discount-code {
  font-family: ‘{{variable_font}}’, serif;
  font-size: 18px;
  color: #27ae60;
  font-weight: 700;
}

This HTML example shows how to use merge variables in combination with images. You can use the merge variable to fully replace the url of a visual, but it is also possible to make a smaller section of the url dynamic. Please keep in mind that all variations of the images that you are planning to use must be available on the file hosting provider.

.postcard {
  background-imageurl(https://postana.com/images/example/postcard_A5_front-side-{{image_nr}}.jpg);
}