How do I track html email links inside conditional comment blocks for outlook

Question

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>
  ...
  

Answer 1

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

Answer 2

Normal link wrapping has a limit of 100 unique links in an email. A fairly common use of HttpGetWrap is actually to circumvent this limit.

Answer 3

We've been using the following for a few months now. It seems to work so far. I haven't tried it in the Free Form block but I don't use Free Form for anything. This is based on Chris's answer above which also didn't work for me since Content Builder seems to move things around.

Taking the anchor out of the VML seems to work. I had used the Bulletproof button to create rounded cornered rectangles to contain content. Placing tables with images and links inside the rectangles wasn't a problem, so I tested to see if the links were tracking and they were. So yeah, this can be used to create rounded cornered content areas also. You just can't use Bulletproof buttons inside of Bulletproof rectangles.

<tr>
    <td>
      <!-- VML Button -->
                      <div>
                        <!--[if mso]>
                        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" target="_blank" style="height:43px;v-text-anchor:middle; width:143px;" arcsize="15%"  strokecolor="#c10e6d" fillcolor="#c10e6d">
                        <w:anchorlock/>
                        <center>
                        <![endif]--> 
                        <div style="display:none;visibility:hidden;overflow:hidden;max-height:0px;">
                          <a href="enter"  alias="" style="color:#ffffff;font-family: Arial, Helvetica, sans-serif;font-size:19.5px;font-weight:400;line-height:43px;text-align:center;text-decoration:none;width:143px;-webkit-text-size-adjust:none;">Button Text</a>
                        </div>
                        <!--[if mso]>
                      </center>
                      </v:roundrect>
                      <![endif]-->
                      </div>

<!-- Standard Button -->
      <!--[if !mso]><!-->
      <table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center">
             <table align="right" width="143" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" style="font-family: Arial, Helvetica, sans-serif;">
                    <a href="enter" target="_blank"  alias="" style="background-color:#c10e6d;border-radius:10px;color:#ffffff;display:inline-block;font-family: Arial, Helvetica, sans-serif;font-size:20px;font-weight:400;line-height:43px;text-align:center;text-decoration:none;width:143px;-webkit-text-size-adjust:none;mso-hide:all;">Button Text</a>
                </td>
              </tr> 
             </table>
          </td>
        </tr>
      </table>
      <!--<![endif]-->
    </td>
  </tr>

Answer 4

Good question!

This is an eternal struggle that'll likely never get resolved, unless it's at the ESP level. I suppose that MSFT could fix the rendering, but that's highly unlikely.

Trying to make this work will drive you crazy.

Your first bullet option won't work, since the Subscriber information is encoded in the "wrapped" link. Your send preview subscriber info is included.

There is one AMPScript option -- if you're up for it. The basis was fleshed out by Jon Sakas in his excellent answer to this question: Is it possible to track form submissions as clicks?

The idea is that you force SFMC to track a link using the httpgetwrap| prefix.

The caveat with with httpgetwrap is that it only tracks the first 100 unique links in a send. The httpgetwrap option has to be enabled by SFMC Support.

If you're OK with all that, then this might do the trick.

Answer 5

Chris' answer works properly when the code is used in a plain html Email message.

When you place this code in a Free Form Content Block to be used in a template it gets screwed up. After saving you loose most code.

All between '<a .... <w:anchorlock>' gets removed, so you're even further from home. This is the code that remains when you open the Free Form Content Block:

<!-- Dual VML/Standard Button --><!--[if !mso]><!--><div style="display:none;visibility:hidden;overflow:hidden;max-height:0px;">
 <!--<![endif]--><a> <w:anchorlock><center style="font-family:Helvetica, Arial,sans-serif; font-size:14px; font-weight:bold; color:#4d4d4f;">
  SHOP NOW</center> <!--[if !mso]><!--></w:anchorlock></a></div><!--<![endif]--><!--[if !mso]><!--><table cellspacing="0" cellpadding="0" border="0" align="center">

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

So to be honest.. I'm a bit lost. Our styleguide really says rounded corners of buttons. I was happy to read this hack. It does work in an Email Message, but like stated: Free Form blocks won't accept it. Are there any other hacks that will be accepted within the Free Form blocks?

Cheers! Martijn