[SalesForce] How to track html email links inside conditional comment blocks for outlook

We use buttons for our call to action links in emails, which go to recipients mostly at financial firms, which means they mostly use Outlook. Because of this, my button code includes conditional comment blocks (<!--[if (gte mso 9)]>...<[endif]-->) to insert VML code for Outlook's Word rendering engine (thank you, Microsoft).

For the entire area of the button to work, I must include an href="url" attribute in the VML block. Being inside the commented code, this URL then doesn't get recognized and tracked by Marketing Cloud. If I don't include the href attribute, then only the text of the button is clickable, but tracked. How can I encode the URL to be trackable and clickable for the entire area of the button in Outlook?

A sample code snippet is below. I have a few ideas for solutions if someone can confirm any of them or direct me to other resources:

  • Send a preview test, then grab the urlID from the tracking report from it and somehow encode my "hidden" URL with href="http://cl.exct.net/?[query]=[urlID]". If this can work, what is the query and will this also pick up subscriber data?
  • Is there an AMPscript solution? I don't currently use any AMPscript, but could easily learn.

  • Is there an alternative suggestion for coding the button? I haven't found one that works this well for multiple clients after many searches.

    ...
<td align="center" bgcolor="#FE5000" height="28" style="border-collapse: collapse !important; color: #ffffff; display: block; height: 28px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 !important; padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; vertical-align: middle; width: 146px;" width="146">
 <!--[if (gte mso 9)]>
  <v:rect href="http://exampleurl.com"  style="behavior:url(#default#VML);display:inline-block;position:absolute; height:28px; v-text-anchor:middle; width:180px; top:0; left: 0; border:0; z-index:1;" stroke="f" fillcolor="#FE5000" >
   <w:anchorlock/>
    <center style="color:#ffffff;font-family:sans-serif;font-size:12px;font-weight:bold;">
 <![endif]-->
 <a href="http://exampleurl.com" style="..." target="_blank" title="Register">
  <span style="color: #FFFFFF;"><strong>Register now</strong></span>
 </a>
 <!--[if (gte mso 9)]>
    </center>
   </v:rect><br /><br />
 <![endif]-->
</td>
...

Best Answer

I have come up with a solution, as I ran into this problem myself.

Marketing Cloud will recognize Ampscript contained in commented out code and insert it properly. However, tracking for VML is normally a no-go, as you yourself have noticed. Just as you wouldn't want an href in your <link> code mucked with, it will not insert tracking code into typical VML code. This is, in my opinion, an oversight on the part of Salesforce. However, we have a hack.

The trick is to create semantically incorrect code such that it breaks elegantly and is contained. A controlled fire, if you will.

After all, what Marketing Cloud is really looking for is a non-commented element containing an href.

Therefore, here's the solution:

<!-- Dual VML/Standard Button -->
<tr><td style="padding:0 0 0 0;" align="center" valign="top">
    <!--[if !mso]><!--><div style="display:none;visibility:hidden;overflow:hidden;max-height:0px;"><!--<![endif]-->
        <a <a:rect href="https://www.youtube.com/" xmlns:a="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" alias="Hero-CTA-Button" style="height:46px; width:200px; v-text-anchor: middle;" strokecolor="#4d4d4f" fillcolor="#ffffff">
            <w:anchorlock/>
            <center style="font-family:Helvetica, Arial,sans-serif; font-size:14px; font-weight:bold; color:#4d4d4f;">SHOP NOW</center>
        </a:rect>
    <!--[if !mso]><!--></a></div><!--<![endif]-->

    <!--[if !mso]><!-->
    <table border="0" cellpadding="0" cellspacing="0" align="center">
        <tr><td width="200" align="center">
            <a href="https://www.youtube.com/" alias="Hero-CTA-Button" target="_blank" style="text-decoration:none; display:block; background-color:#ffffff; padding:15px; border: 1px solid #4d4d4f;"><span style="font-family:Helvetica, Arial, sans-serif; font-size:14px; font-weight:bold; color:#4d4d4f;">SHOP NOW</span></a>
        </td></tr>
    </table>
    <!--<![endif]-->

</td></tr>
<!-- End VML Button -->

Pay attention to primarily the first 7 lines of code. The first thing to note is that I've created a div on line 3 wrapping around our dumpster fire instructing everything that's not outlook to hide.

Line 4 is where the magic happens... I trick Marketing Cloud to think that this is a normal anchor by starting my VML code <a <a:rect. I make sure on line 8 to close what browsers believe is an anchor just for safety, but Outlook isn't allowed to see this instruction as it already has been instructed on line 7 to close the rect.

The code is kind of like a Pollock abstract painting. Depending on who you are, you're going to interpret it differently. Thankfully, this code is battle tested and seems to work correctly in everything.

Cheers

Related Topic