Some time back, the folks at Campaign Monitor contributed the go-to fancy button builder for cross-device emails, Bulletproof email buttons. If you haven't seen it, it looks like this:
Their compatibility testing was an awesome donation to the MA community, but there's a problem with the generated code when you use it in a Marketo email: the Outlook desktop version (the v:*
VML tags) doesn't have tracked links!
The reason is simple: Marketo only looks in <a href
attributes for links to rewrite, not (very non-standard) <v:roundrect href
attributes.
And this isn't so unreasonable. You can't expect that every href
is rewritable — for example, you'd better not rewrite a <link href
!
With a little tweak, though, we can fix it to it our liking.
Just touch up the Bulletproof builder's output with the substitutions in red:
<div><!--[if mso]>
<a:roundrect
xmlns:a="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
href="http://www.example.com"
style="height:53px; v-text-anchor:middle; width:200px;"
arcsize="8%"
strokecolor="#1e3650"
fill="t">
<a:fill type="tile" src="https://i.imgur.com/0xPEf.gif" color="#705558" />
<w:anchorlock/>
<center style="color:#ffffff;
font-family:sans-serif;
font-size:13px;
font-weight:bold;">Come at me, bro!</center>
</a:roundrect>
<![endif]--><a
href="http://www.example.com"
style="background-color:#705558;
background-image:url(https://i.imgur.com/0xPEf.gif);
border:1px solid #1e3650; border-radius:4px;
color:#ffffff; display:inline-block;
font-family:sans-serif; font-size:13px;
font-weight:bold; line-height:53px;
text-align:center; text-decoration:none;
width:200px; -webkit-text-size-adjust:none;
mso-hide:all;">Come at me, bro!</a></div>
Why does it work?
Because Marketo's (X)HTML parser is lazy and doesn't see the difference between the namespace a:
and the tag name a
. But that's great for us in this case!