Munchkin Code on Angular Webpages

Munchkin will ignore a variety of events it doesn't consider interesting out of the box (for some details see this post).

But it's strikingly easy to "redecorate" links that have site-specific importance using the Munchkin API visitWebPage and clickLink functions. Simply bind the interesting (in this case) Angular events and call Munchkin.munchkinFunction(/* event data */) to create author-defined (what I usually call synthetic) Munchkin activities.

You don't need any custom-compiled Munchkin library (yikes!) or anything like that, the API is already built-in.

The question, then, is less about invoking Munchkin from the Angular event stack than it is about choosing the namespace for your custom events, assuming they don't already correspond to URL paths and/or internal app schema.

For example, say you have a control panel UI where the person can switch between Salesforce and Dynamics integrations. You want to capture the moment of that switch.

You could do it like

Munchkin.munchkinFunction("visitWebPage", {
  url : "/controlpanel/integration/salesforce/enable"
} );
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

which stores the whole action in the path (part of the "web page" in Marketo-speak).

Or you could do it like

Munchkin.munchkinFunction("visitWebPage", {
  url : "/controlpanel/integration/salesforce",
  params: "?action=enable"
} );‍‍‍‍‍‍‍‍‍‍‍‍

which moves part of the activity into the query string of the synthetic Visit Web Page activity you'll see in the lead's Activity Log.

It's pretty much the same as modeling a RESTful URL structure, something any app engineer should be familiar with, except the URLs are all virtual (you can't navigate to them in your browser). Planning such a structure is not a tiny undertaking, but neither is it such a big deal. You just have to coordinate the app teams, the actions, and what you want to trigger/filter on in Marketo.

Note clickLink is not recommended for reasons explored elsewhere: I highly advise sticking with synthetic visitWebPage.