You've spent a lot of time building out great looking templates that render everywhere and the content blocks needed for your standard emails. But for some odd reason, every time the email specialist builds the email, things don't look quite right. In this post, I'll show you how to address some of these issues and make the template and your content blocks easier for your marketing team to use and be self-reliant.
Making the jump from coding individual emails to building out templates and their content blocks for many people is a difficult leap to make. I fought it for years, coming in every day and starting with a blank screen in Dreamweaver and building my email there. Then I would cut and paste that code into a new email in Salesforce Marketing Cloud. But I will tell you this, once you have come up with the "boilerplate" template and developed out the content blocks that will work in that template, the rewards far outweigh the time commitment.
My go-to template is called Cerberus. Ted Goas (who was very helpful in helping me to customize the template to my own needs) built the template and has made it available for the world. A simple Google search for "Cerberus email template" will point you in the right direction to find it. I go full in and use the Hybrid template, customizing the css and sizing for the organization's needs.
Then I'll pull out all of the individual "content blocks" that are well commented and build out individual content blocks in Salesforce Marketing Cloud and put them in a content block library folder. These will serve as the pieces that can get dropped into your template.
But what I have come across for as easy as those are to build, they are not marketing proof. The person making the email will miss something when it comes to inserting an image, and everything that I worked so hard to build out those templates and content blocks is now lost. But you can make it easier.
Consider this content block - it is a single column full-width image:
And here is the code for that content block:
<!-- Hero Image, Flush : BEGIN -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width:100%; max-width:640px;">
<tr>
<td style="background-color: #ffffff;"><img src="https://via.placeholder.com/1280x640" width="640" height="" alt="alt_text" border="0" style="width: 100%; max-width: 640px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto; display: block;" class="g-img"></td>
</tr>
</table>
<!-- Hero Image, Flush : END -->
If the marketer has experience with html, then they'll know to go in and change the img src, but nothing else without breaking anything else with the code. But those that are not familiar with html they typically will find a way to mess up your code.
But if you set that content block up with ampscript life becomes easier:
<!-- To change the image, replace INSERT IMAGE URL HERE with the url of the image after you've uploaded your image -->
%%[var @fullwidthimage
set @fullwidthimage = "INSERT IMAGE URL HERE"
]%%
<!-- Hero Image, Flush : BEGIN -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width:100%; max-width:640px;">
<tr>
<td style="background-color: #ffffff;"><img src="%%=v(@fullwidthimage)=%%" width="640" height="" alt="alt_text" border="0" style="width: 100%; max-width: 640px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; margin: auto; display: block;" class="g-img"></td>
</tr>
</table>
<!-- Hero Image, Flush : END -->
You'll notice that there is now AMPScript code at the top of the content block that declares and defines the variable for the full width image. All the person building the email has to do is swap out the INSERT IMAGE URL HERE with the actual url that results when they upload their image.
The only downside to this method of building emails like this is that the image will not render in the canvas area of the email during the building process. The person building it will need to so a send preview of the email to see that the image correctly renders. But one could argue that the person building the email should be doing a send preview anyway when they actually build their emails.
This is just one of those methods that I wanted to share that can cut down on the frustration of your marketing team and will lessen the amount of time you need to dedicate to helping them build the actual emails.
Ampscript is not just for templates and content blocks, you can also use it improve a customer or potential customer's experience with forms. Check out this post for more ampscript uses.
0 comments:
Post a Comment