Building Taxi Email Design Systems for Adobe Campaign

Script Tags

Including javascript inline in an HTML document can cause issues, for example, a > might be used in an if statement like this:

<% if(number_of_sausages > 10) { // do something } %>

The start and end delimiters in Adobe Campaign for scripts are <% %> . Unfortunately, Taxi treats this as normal HTML and sees a tag that looks like this:

<% if(number_of_sausages >

Things then all start to go horribly wrong as the HTML gets tidied up and parts of the Adobe code can get lost.

To put JavaScript in HTML there is a standard tag, the <script> tag. These have the special property of allowing invalid HTML inside them, i.e. allowing javascript to survive unmolested. So the following snippet will go through Taxi unharmed:

The remove_outer rule will remove the script tag at export, but leave the correctly formed Adobe Campaign javascript behind, complete with it’s start and end delimiters.

Check for Missing Newlines

Here is a snippet of javascript:

<% // This is a comment var my_variable = 1; // This is another comment var another_variable = 1; // This is a third comment if(something === value) { myObject.do_thing(); } %>

Sometimes the newlines get lost when copying + pasting, like this:

<% // This is a comment var my_variable = 1; // This is another comment var another_variable = 1; // This is a third comment if(something === value) { myObject.do_thing(); } %>

It is important to make sure this does not happen. Anything appearing on the same line after // is ignored so it’s possible for large parts of the code to be missed if newlines go missing

This kind of code always appears without newlines when opening an HTML document in a browser - that makes false positives likely when doing this check. Therefore it is important to use view-source when carrying out this check.

Including Javascript in attributes

Sometimes it is necessary to put some javascript into an attribute. In our example we will change a link from having a fixed href to some javascript code:

Original HTML

<a href="http://example.com">click me!</a>

Script

<%@ include url="http://mynewsletter.com" %>

Bad script inclusion

<a href="<%@ include url="http://mynewsletter.com" %>">click me!</a>

The problem here is that it looks like the href attribute finishes after url= , i.e. like this:

href="<%@ include url="

The confusion is caused by using quote marks in the javascript as well has having quote marks to show the start and end of the href= attribute.

Good script inclusion

<a href='<%@ include url="http://mynewsletter.com" %>'>click me!</a>

In this case single quote marks are used to delimit the href whereas double quotes are used inside the script. Remember than in a html document you can use single or double quotes around an attribute.

Comments

Comments can sometimes be added to Email Design Systems HTMLs, for example mso conditional comments which help with the rendering of an email in Outlook.

In Adobe, when a comment is directly after an opening <a> tag, the ESP strips out the code which makes it a comment, so it will appear when the email renders.

For example this:

becomes this:

The 'gte mso 9' is no longer a comment, so will be visible in the email

The solution is to put the comment before the opening <a> tag and have a <span> tag around the comment and <a> tag, like this:

<a href="https://www.taxiforemail.com" target="_blank" style="text-decoration:none; color:#ffffff;">

PreviousAdobe Campaign connector NextExporting an email to Adobe

Last updated 11 months ago