Branding Marketo’s “View As Web Page" domain

The {{system.viewAsWebPageLink}} token always points to your Primary LP domain. But you want View As Web Page (VAWP) to use the Domain Alias for each brand or other subtenant in your instance.

Though the path to the VAWP service is clearly exposed — it’s /index.php/email/emailWebview and it exists under any domain — you can’t simply hard-code the domain of your choice and be on your way.

The problem is the specific type of mkt_tok value that must be in the query string. It’s a weird quirk: until the redoubtable Courtney Grimes discovered it, there was no (public) knowledge that mkt_tok came in different types!

Say your Primary LP domain is pages.example.com and the Domain Alias you’re going for is pages.example.org, your non-profit side.

If you include this link:

<a href="https://pages.example.org/index.php/email/emailWebview">View as Web Page</a>

Then Marketo will add a mkt_tok to the link automatically (like any tracked link) but it’s the wrong type of mkt_tok. Quoting from a Marketo case:

the mkt_tok value generated for view as webpage tokens is slightly different than the mkt_tok value generated for links in emails and Velocity scripts

More confusing, the generic mkt_tok may appear to work fine when you’re spot-checking emails, but apparently some types of personalization (segments? COs? I don’t know the details) will fail.

So, tempting as it is, “just” hard-pointing to the Domain Alias, though it works perfectly for LPs themselves, won’t work for the VAWP service.

The workaround

Luckily, we have a perfect storm of hackability, if you will.

  • {{system.viewAsWebPageLink}} always includes the correct mkt_tok, regardless of where it appears in the email (hint, meaning it is pre-mkt_tok-enized even if it's not the direct target of an <a href>)
  • {{system.viewAsWebPageLink}} doesn’t include any characters that would need to be URL-encoded if they appeared in the hash part of a URL

As a result, we can append the {{system.viewAsWebPageLink}} to the URL of a dedicated redirector page (a Marketo LP).

The redirector page is visited via the desired Domain Alias. Then it immediately redirects to the VAWP service under that same hostname.

Since that was probably opaque, I mean a URL like this:

https://pages.example.org/brandView#https://pages.example.com/index.php/email/emailWebview?mkt_tok=eyJpIjoiWkdabE56TXpNalUzTjJKbS...

Gets redirected to one like this:

https://pages.example.org/index.php/email/emailWebview?mkt_tok=eyJpIjoiWkdabE56TXpNalUzTjJKbS...

OK, OK. The Primary LP domain still appears somewhere in the first URL. So in technical terms, yes, it’s still there. But the hostname shown when you hover over the link is the Domain Alias.

The redirector page HTML

The entirety of the redirector page (Guided LP template) is:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Loading Web View...</title>
  <script>
  (function(redirectTarget){
    if( !redirectTarget ) return;

    var systemVAWP = document.createElement("a"),
        customVAWP = document.createElement("a");

    systemVAWP.href = redirectTarget;
    customVAWP.href = document.location.href;

    customVAWP.pathname = systemVAWP.pathname;
    customVAWP.search = systemVAWP.search;
    customVAWP.hash = "";

    document.location = customVAWP;  
  })(document.location.hash.substring(1));       
  </script>
</head>
<body>
</body>
</html>

Publish an LP based on that template (here brandView.html), then link to that LP under the preferred Domain Alias, using the no-track class:

<a class="mktNoTrack" href="https://www.example.org/brandView#{{system.viewAsWebPageLink}}">View as Web Page</a>

Completely unnecessary enhancement

You can animate the document title while redirecting, even though it should take a fraction of a second:

animated-ss

Here’s the JS for that:

// Optional, just animating the ellipsis
(function(){
  var numDots = 0,
      maxDots = 10,
      dotDelay = 250;

  function appendDot(){       
   if ( numDots++ < maxDots ){
     document.title += ".";
     setTimeout(appendDot, dotDelay);
   } else {
     console.log("Please-wait dots exceeded, possible timeout of next page?";
   }  
  }
  
  appendDot();
})();

This is merely a frill and doesn’t change the actual logic.

Choose your Primary LP domain wisely

This situation should be a reminder: choose a Primary LP domain that’s okay for everyone in your instance to see – even though we can minimize its exposure, there are still places where it’s visible, even if just for a half-second, or via view-source:, or until someone remembers to write some Velocity to switch it out.

If you’re running a “concierge” instance serving multiple sub-clients, you don’t want to dedicate the Primary domain to any one client. And if you want to obscure your own agency’s name, you should register a generic domain name along the lines of marketo-hosted.solutions.

If you’re running multiple brands then the Primary can be the umbrella company, or if that’s not supposed to be shown, a generic domain like the above.