Deferred Munchkin - not logging Visit Web Page

[Thorsten]

Hi everyone,

I tried to implement Sanford's solution for deferring the Munchkin.Init() call for GDPR compliance on Marketo Landing Pages, as per https://blog.teknkl.com/conditionally-loading-munchkin-on-marketo-lps-for-gdpr-related-policies/.

My problem was initially that - directly after accepting the cookie - the "Visit Web Page" event was not captured against the targeted customer, but as anonymous.

It was stripping the mkt_tok and lost the identification of the customer. I understand it's working as designed for good reasons, but it’s hitting me on the deferred scenario.

I now tried to bring back the mkt_tok as per Sanford’s solution here: https://blog.teknkl.com/restoring-the-mighty-mkt_tok/.

So I am running

if (window.__mktTokVal && history.replaceState) {
      var restoredLoc = document.createElement("a");

      restoredLoc.href = document.location.href;
      restoredLoc.search += (restoredLoc.search ? "&" : "") + "mkt_tok=" + window.__mktTokVal;
      history.replaceState({}, null, restoredLoc.href);
}
Munchkin.init();

right after the cookie has been accepted – et voila – the “Visit Web Page” activity is being recorded again as expected now.

But – now I got the mkt_tok in the URL again… So I tried to remove it by running

window.history.pushState({}, document.title, document.location.origin + document.location.pathname);

after the Munchkin.Init().

But – you probably guessed it by this point – we’re back to square one where the “Visit Web Page” doesn’t get recorded anymore… It’s probably too fast removing the URL before the Munchkin.Init() can complete its stuff?

Does anyone have any clever idea on how to make it work?

Example:

If you want to give it a try, here’s the link for my test customer to play around with. My scenario starts with the customer receiving an email with a link to a Marketo Landing Page (https://exploremore-qa.techdata.com/Q0PB08Q0Zi25x041H00w3o0).

[SanfordWhiteman]

(function(){

  function detectMunchkinLibLoadComplete(e){
    if( e.target.tagName === "SCRIPT" && /\/\d+\/munchkin\.js/.test(e.target.src) ) {
      // remove the mkt_tok here
      document.removeEventListener("load", detectMunchkinLibLoadComplete, true);
    }
  }

  document.addEventListener("load", detectMunchkinLibLoadComplete, true);
  Munchkin.init();

})();

[Thorsten]

Hi Sanford,

first of all, thanks for the rapid response. I am just not sure if I implemented your code correctly. Apparently the way I did didn't work. I tried it in a couple of different ways as well then, but neither created the Visit Web Page activity right after accepting the cookie, we're back to anonymous now.

Here's the latest and how I understand I should implement your code in the greater context:

if (window.__mktTokVal && history.replaceState) {
      var restoredLoc = document.createElement("a");

      restoredLoc.href = document.location.href;
      restoredLoc.search += (restoredLoc.search ? "&" : "") + "mkt_tok=" + window.__mktTokVal;
      history.replaceState({}, null, restoredLoc.href);
    }

    (function () {
      function detectMunchkinLibLoadComplete(e) {
        if (e.target.tagName === "SCRIPT" && /\/\d+\/munchkin\.js/.test(e.target.src)) {
          // remove the mkt_tok here
          window.history.pushState({}, document.title, document.location.origin + document.location.pathname);

          document.removeEventListener("load", detectMunchkinLibLoadComplete, true);
        }
      }

      document.addEventListener("load", detectMunchkinLibLoadComplete, true);
      Munchkin.init();
})();

Isn't that initializing the Munchkin after the mkt_tok has been removed from the URL again? Thanks for your help!

[SanfordWhiteman]

Maybe we've been overthinking this.

If you switch to {apiOnly: true} — you can do this with the deferred version, too, by passing your additional options — then you have control over the logged Visit Web Page:

      Munchkin.init( "123-ABC-456", {apiOnly: true} );
       
      var restoredLoc = document.createElement("a");
      restoredLoc.href = document.location.href;
      restoredLoc.search += (restoredLoc.search ? "&" : "") + "mkt_tok=" + window.__mktTokVal;
      Munchkin.munchkinFunction("visitWebPage",{
         url : restoredLoc.protocol + "//" + restoredLoc.hostname + restoredLoc.pathname + restoredLoc.hash,
         params : restoredLoc.search
      }); 

This will log the restoredLoc metadata regardless of what's currently in the URL.

[Thorsten]

Ok, I tried this one as well. Without luck though. Again it did not record the Vist Web Page on the known lead directly.

Here's the code I put in after the cookie accept:

Munchkin.init( "642-ZQB-201", {apiOnly: true} );
       
      var restoredLoc = document.createElement("a");
      restoredLoc.href = document.location.href;
      restoredLoc.search += (restoredLoc.search ? "&" : "") + "mkt_tok=" + window.__mktTokVal;
      Munchkin.munchkinFunction("visitWebPage",{
         url : restoredLoc.protocol + "//" + restoredLoc.hostname + restoredLoc.pathname + restoredLoc.hash,
         params : restoredLoc.search
      });

I hate to say this, but the only thing that seems to work is the old shabby crutch "setTimeout", giving the Munchkin.init() a bit of time to do it's thing whilst the mkt_tok is on still.

    if (window.__mktTokVal && history.replaceState) {
      var restoredLoc = document.createElement("a");

      restoredLoc.href = document.location.href;
      restoredLoc.search += (restoredLoc.search ? "&" : "") + "mkt_tok=" + window.__mktTokVal;
      history.replaceState({}, null, restoredLoc.href);
    }

    Munchkin.init();

    setTimeout(() => {
      window.history.pushState({}, document.title, document.location.origin + document.location.pathname);
    }, 2500);

[SanfordWhiteman]

You have to put the apiOnly in your initial config (where you cache the config for deferred execution), not after the cookie accept.

i.e. 

(function munchkinInitDeferred(customOptions){
  var nativeMunchkinInit = Munchkin.init;
  Munchkin.init = function cacheInitOptions(id, options){
    if (customOptions) { 
      Object.keys(customOptions)
      .forEach(function(key){
        options[key] = customOptions[key];
      });
    }
    Munchkin.init = nativeMunchkinInit.bind(Munchkin, id, options);
    console.log("Munchkin: Cached options", options);
  };
})( {apiOnly: true} );

Then you run only the bare Munchkin.init() when the cookie is accepted.

[Thorsten]

Ok, I put it into the initial config and called the below code after the accept. Unfortunately this didn't work either, again the Visit Web Page is logged against anonymous.

    Munchkin.init();

    var restoredLoc = document.createElement("a");
    restoredLoc.href = document.location.href;
    restoredLoc.search += (restoredLoc.search ? "&" : "") + "mkt_tok=" + window.__mktTokVal;
    Munchkin.munchkinFunction("visitWebPage", {
      url: restoredLoc.protocol + "//" + restoredLoc.hostname + restoredLoc.pathname + restoredLoc.hash,
      params: restoredLoc.search,
    });

[Thorsten]

Hi Sanford, all,

anything else I could try, any ideas? If not I can just go back to the timeout solution and close this topic.