Munchkin Code on Angular Webpages

[Alyssa_Hoffmann]

We have recently completed our Marketo implementation with the munchkin code placed on around 10% of our website. Due to the nature of the webpages, the remaining 90% are angular and our developers have not yet found a solution for placing the code on these pages and accurately tracking them. The angular pages are very high-value so our success is contingent on accurate tracking. Has anyone else experienced a similar issue? I'm interested to hear how you got around this? 

[SanfordWhiteman]

The web framework you choose has no impact on loading the Munchkin library ("placing the code"). Nothing at all stops Munchkin (which is just an asynchronously loaded script) from loading if the page also uses Angular.

Likewise, Munchkin Visit Web Page is gonna happen regardless of whether you use Angular.

Now, if you're talking about tracking in-page activities that are managed by Angular, that is another story. You need to be really specific about what you aren't able to do.

[Alyssa_Hoffmann]

Hi Sanford. Thanks for your response.

I'm sorry for the vague questions but you are correct in that the challenge we are having is with tracking in-page activities. 

Thanks

Alyssa

[SanfordWhiteman]

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.

[Carrie_Chandle1]

The way I read your post makes me think we went through something similar... we ultimately got Marketo to help build a modified custom Munchkin code for us to capture in-page activities as web page views and link clicks. It's not a 100% fix, but it got us what we need and we can now tell what our contacts have done within those pages. You could try reaching out to your CSM for a technical resource if you don't have any luck here.