Marketo Munchkin and Google Analytics have a lot in common on the client side, but GA’s event_callback feature is something Munchkin ain’t got.

 

event_callback lets you trigger a JS action as soon as possible after Google fires an event: not one millisecond before, and not some gross-grained period after, but exactly at the right time.

 

When you’re redirecting away from a page, event_callback ensures the event shows up in GA. Rather than guessing “GA usually takes less than 2 seconds” — or worse, not even thinking about GA’s network needs at all — you do this:

gtag("event", "page_view", {
  "event_callback": function() {
    document.location.href = "/followup-page.html";
  }
});

 

Similarly, it would be great to know when Munchkin has sent the Visit Web Page. To do that, we need an event or callback that fires at that exact moment. No guesswork.

 

The goal

Instrumenting an existing library that only exists as minimized JS is a pretty foolish thing in general.

 

But in this case we have a huge advantage: the fact that Munchkin supports Beacons makes our additional code unintrusive.

 

We don’t actually need to intercept the call to sendBeacon,which would be intrusive. Instead, we merely wait for the Munchkin library (the real library, not the initial bootstrapper) to load. When it’s loaded, we know it’s also issued the Beacon call and we’re good to go.

 

The code

You can grab the code from here:

teknkl-munchkinhitevent-v1.js

 

Download that file and reupload it to Marketo Design Studio (or to your company’s webserver if you prefer).

 

The usage

Using the new event is simple, but the order-of-operations is crucial.

 

Your code/markup needs must be in this order:

➊ the remote script teknkl-munchkinhitevent-v1.js

➋ run the created function window.enableMunchkinHitEvent(), optionally passing forceAfter and debug arguments

➌ add an event listener on the window for the custom event named munchkin.visitWebPage

➍ the usual Munchkin embed code

 

Here’s an example:

<!-- TEKNKL custom libraries -->
<script id="teknkl-munchkinhitcallback-v1" src="https://pages.example.com/rs/123-ABC-456/images/teknkl-munchkinhitevent-v1.js"></script>
<!-- /TEKNKL custom libraries -->

<!-- enable event and add listener -->
<script>
   enableMunchkinHitEvent({ forceAfter: 4000, debug: true });
   
   document.addEventListener("munchkin.visitWebPage", function(e){
      
     // detail includes properties: transport, usedFallback, timeElapsed
     alert("Munchkin hit complete!" + "\n" + JSON.stringify(e.detail,null,2));
      
     // do your redirect or any other action here 
     // document.location.href = "https://www.example.com/the/final/destination.html";
   });
   
</script>
<!-- /enable event and add listener -->

<!-- standard Munchkin embed -->
<script type="text/javascript">
   (function() {
      var didInit = false;

      function initMunchkin() {
         if (didInit === false) {
            didInit = true;
            Munchkin.init('410-XOR-673', {
               domainLevel: 2
            });
         }
      }
      var s = document.createElement('script');
      s.type = 'text/javascript';
      s.async = true;
      s.src='//munchkin.marketo.net/munchkin-beta.js';
      s.onreadystatechange = function() {
         console.log("in munchkin", this.readyState)
         if (this.readyState == 'complete' || this.readyState == 'loaded') {
            initMunchkin();
         }
      };
      s.onload = initMunchkin;
      document.getElementsByTagName('head')[0].appendChild(s);
   })();
</script>
<!-- /standard Munchkin embed -->

 

enableMunchkinHitEvent() takes 2 arguments, both related to timeout behavior:

  • forceAfter {integer, default 4000}: number of milliseconds after which the event will be forcibly fired, even if Munchkin has not responded. (Remember, Munchkin might be disabled by a tracking protection feature or plugin, but we still need to get the person to their final destination!) If the timeout was exceeded, then the event.details.usedFallback will be true. Note this feature can also be used to determine if Munchkin is supported (by definition!).
  • debug {boolean, default true}: also log a line to the F12 Console if the timeout expired.

 

Coupla notes

Deploy this code sparingly as it’s only necessary in specific circumstances — namely, when you want to redirect both accurately and as soon as possible after the page loads.

I wouldn’t bother using it when substantive human actions must occur in the interim. For example, teeeeeechnically we can’t even guarantee that Munchkin has logged a hit by the time a person successfully submits (meaning manually submits) a Marketo form. But we take it as a given that Munchkin must’ve fired at some point, or else we’d have to pause the onSuccess callback until we got confirmation. Don’t worry about that case.