Anyone who has tried to create an email template within Marketo will know what a pain this is! I am going to show you the best way to create Marketo email templates that scale elegantly across different screen sizes and look amazing no matter what device or email client is being used.
I will also show you how we can use variables and tokens within our Marketo email templates so that emails are easy to modify in the email editor, can be populated via API, and can be reused across programs to reduce the number of emails we need to build.
If you want to import the email template I work with in the video below into your Marketo instance then you can download the email template here.
Email Template Structure
As outlined in the documentation a Marketo email template is made up of the following:
- A container that houses all the modules within the email template
- Modules that are made of up elements
- Elements that are the content of your email taking the form of either:
- Rich Text
- Images
- Snippets
- Videos
- Variables that can be used within elements to change the content of an element where variables can have these different data types:
- String
- List
- Number
- Color
- Boolean
- HTML Block
- Image
A module consisting of image and text elements populated by variables
Building your email template in this structured fashion using modules and variables will set you up for success by making your emails super easy to modify in the email editor AND by making your emails easy to update via API (see around minute 5 in this video).
Take a look at the Marketo Dynamic Email Content via API post to see how you can streamline your email creation process by automatically populating emails with content from a Google Sheet.
Creating an Email Template
By far and away the best way to create Marketo email templates is by using a drag-and-drop email building tool such as Stripo to design the email template and then import this email template into Marketo. As I am sure you might already be familiar, Marketo is not great for trying to design email templates. There is no drag-and-drop builder and the only way for you to build email templates is by modifying HTML and CSS code within the template builder: not fun!
Using a 3rd party drag-and-drop email design tool will ensure that the email design is dynamic, will scale well across different screen sizes, and will look good no matter what device or email client is being used.
Importing HTML Code from a 3rd Party Tool
Once you have the email designed and you have exported the HTML code then:
- Navigate to the Marketo Design Studio
- Click on “Email Templates”
- Click on the “New” dropdown menu
- Click “New Email Template”
- Choose a folder for the email template
- Name the email template
- Delete the HTML code already in the email template
- Paste in the HTML code you exported from the 3rd Party email design tool
N.B. Once you import the code from your 3rd party tool you might need to use a HTML formatting tool to make this code a bit friendlier on the eyes.
Converting HTML to Email Template Structure
Once you have imported the HTML code into your Marketo email template it is now time to “Marketofy” this code by adding in modules, elements, and variables.
The reason we need to do this is that if we try and create an email from the Marketo email template as is i.e. without “Marketofying” it then we will not be able to edit the email at all within the email editor (see the video above around 10:20).
How we go about adding modules, elements, and variables to the Marketo email template is tricky to explain over text so I recommend checking out the video at the top of the post to see how this is done.
In short and as shown by the images below the process involves:
- Modifying the “class” attributes to include syntax for Marketo containers, modules, and elements.
- Adding “id” attributes so that these modules and elements can be referenced via API.
- Adding “mktoName” attributes so that modules and elements can easily be distinguished from one another in the email editor.
- Adding variables within the elements to make modifying the email easier within the email editor and via API.
Marketo email template code without modules, elements, and variables
Marketo email template code with modules, elements, and variables
N.B. I highly recommend adding some comments to the code to delineate the different modules from one another (like in the image above) because this makes it so much easier to find the right section when you want to update the template.
Global Vs Local Variables in Email Templates
When defining email variables at the top of your Marketo email template it is necessary to:
- Select the type of the variable (see the “Marketo Email Template Structure” section)
- Set the “id” attribute which is the value you will use when referencing this variable via API
- Set the “mktoName” attribute which is the name you will see in the email editor (see the second image below)
- Set the “default” attribute to the default value that this variable should have
- Set the “mktoModuleScope” parameter to “true” to make it a local variable or “false” to make it a global variable
The difference between local and global variables is that:
- Local variables can have different values in different modules. A good example of using a local variable would be for the title in identical modules so that each module will look the exact same but have a different title.
- Global variables have the same value in every module. A good example of using a global variable would be for the background color or text color used by all modules.
See the video above around 17:30 to get a walkthrough of the difference between local and global email variables and good examples of where each should be used.
N.B. Global email variables do not work in dynamic content sections.
Defining variables within the template code
Appearance of variables in the email editor
Tokens in Email Templates
One way to level up your Marketo email templates is by using tokens so that one template can be used to generate an email with content that can be dynamically changed depending on the lead the email is being sent to (lead tokens) or the program (local tokens) or smart campaign (trigger tokens) the email is sent from.
For example, say you have a program for each ebook that contains a smart campaign that sends out an email to whoever fills out the form to request the ebook. By using a local program token in each ebook program that contains the link to the ebook and by using this local program token in your Marketo email template you can then have one single email to send out the links to all ebooks.
You can even try using trigger tokens in your email templates!
<a href="{{my.content link}}}">Download it now</a>
Local program tokens available for use in Marketo email templates
Testing Your Marketo Email Template
Now that we’ve done all the hard work let’s make sure that our Marketo email template is ready for the big time!
If you use a 3rd party email design tool like Stripo their templates should automatically scale across different screen sizes and look good no matter what device and email client combination is being used. They should also have preview tools that enable you to see what the email looks like on different screen sizes and maybe even on different devices and email clients.
However, once we have imported this template into Marketo and possibly made tweaks to the HTML code to “Marketofy” it we should do more checks to make sure that everything is still working as expected.
3rd Party Email Testing Tools
I highly recommend using a tool like Email on Acid to test out your Marketo email template. By sending a sample of your email template to these tools you can ensure that your email scales well and that it looks good across popular device and email client combinations.
Testing your Marketo email template across different devices and email clients
Your Desktop & Mobile
This is definitely not as rigorous a check as using a 3rd party email testing tool but at the very least you should send a sample of your Marketo email template to as many of your own email addresses across as many email clients as possible. Then you should check how the email looks on both your desktop and your mobile.
What’s After Marketo Email Templates?
Nice work! We now have a fully functioning Marketo email template that looks good across all screen sizes, devices, and email clients.
Also if you want to level up your automation game and start populating emails using the Marketo API then check out the Marketo Dynamic Email Content via API post.
3 Comments
.png)