Using Marketo Munchkin code with Bootstrap 5.2

[LeaCharnley]

Hi

We're having some issues deploying the Munchkin tracking code into our website as it's affecting our UI. We use the Bootstrap framework for lots of UI elements in the site, for example our main menu, which operates on click and is present on all pages in the site. We're finding that with the munchkin code deployed, the OnClick is firing twice and immediately closing the menu again.

Does anyone have any ideas how we might be able to resolve this?

[Darshil_Shah1]

I think it'd be best if you could provide the link to your page.

[LeaCharnley]

www.altro.com/uk - the munchkin code is not currently live on there as it was causing the UI issue of the menu opening and collapsing again with one click.

[SanfordWhiteman]

Munchkin doesn’t fire click events. It passively listens for click events.

I loaded Munchkin on your site and couldn’t reproduce a problem with clicking. Please put up a page that demonstrates the problem if you want someone to look further.

[Darshil_Shah1]

Agreed with Sandy here! Munchkin doesn’t generate click events, they’re probably originating from somewhere else. Are you loading Munchkin via a tag management platform? If so, there could be other scripts getting loaded along with the Munchkin JS that might be generating click events.

[LeaCharnley]

No - our dev added the code directly in the head of our site, not through GTM (which I would usually do). If you see our menu which opens on click. With the munchkin applied, the menu immediately closes again, and the log in button doesn't action. When we take the munchkin off, it works fine again. This seemed to be more prevalent in Edge than Chrome.

We're seeing this is DevTools.

[Darshil_Shah1]

I checked this by monitoring the click events in both cases (with and without loading Munchkin JS) on your webpage but didn't see a second click event getting triggered in any case when I clicked the Menu in the top nav bar. See the below snapshots:

Without Munchkin JS:

With Munchkin JS:

Are you able to share the URL of the page with Munchkin deployed?

[LeaCharnley]

I've got in GTM on pause currently. I can unpause it for you to have a look. As I said, it seems to be a problem in Edge. I haven't seen the issue in Chrome.

[Darshil_Shah1]

I checked in the Edge as well but didn't see an extra click event.

---

@LeaCharnley wrote:

I've got in GTM on pause currently.

---

Sure that'd be great, @LeaCharnley! Thanks!

[LeaCharnley]

It's currently live on our homepage. www.altro.com/uk. 

It seems to be only occurring on Edge.

[SanfordWhiteman]

I can’t replicate anything in Edge.latest either.

[LeaCharnley]

That's the mobile menu you're looking at. This seems to be specific to the desktop menu.

[SanfordWhiteman]

I tested both and nothing was amiss. If you can take a screen recording maybe we can look for some particular misbehavior. But again, Munchkin listens for clicks. It doesn’t generate click events.

[LeaCharnley]

For reasons we can't identify Munchkin was causing this to fire a second time, after our initial call:

 document.addEventListener("DOMContentLoaded", function (event) {

We've mitigated it by adding a variable to detect the first load and only react to that.

Thanks for taking the time to try and assist

[SanfordWhiteman]

Munchkin doesn’t dispatch an additional DOMContentLoaded event. (In fact, it’s impossible for userland code to create a trusted DOMContentLoaded event, per decades-old security rules.)

[Darshil_Shah1]

I still don't see it on the Edge and the menu doesn't close on its own for me as you mentioned in your previous comment (maybe I'm missing something)! To confirm, I hope you're referencing the drawer in the top bar (highlighted below), right?

I see the visitWebpage call made to Marketo confirming the Munchkin JS is getting loaded on the page.

[SanfordWhiteman]

We absolutely need a page with code you believe reproduces the problem.