GoogleTagManager (fbevent.js) breaks JQuery UI dialog

user_13963816 0
Viewed 344

Recently we implemented the GoogleTagManager (GTM), and certain Jquery UI dialogs are not showing at all (some of them always work, some of them never work, consistently). Unfortunately, I cannot provide sample codes.

When a UI button is clicked that calls .dialog("open") the dialog is not shown but the entire page goes grey (div class="ui-widget-overlay ui-front"). I see in the html that the div has "display:none" style. If I remove the display: none, the dialog is finally shown, but the form's UI is messed up. Somehow the width of the modal is 300px instead of 1000px, etc. Also, the event listeners from the save/cancel buttons are missing. If I put autoOpen: true on the jquery UI dialog declaration, the dialog is shown, but is still messed up the same way.

I noticed that when I have an adblocker, everything works properly, but when I don't, the bug appears. I also realized that a "fbevents.js" file is in the browser when GTM is used, and if I explicitly disable only this file with an adblocker, the bug disappears.

I also see a facebook.com/tr/ call that stays "pending" forever in the network tab in Chrome, when I click on the icon that calls the dialog("open").

And of course, if there is no GTM, the site works properly.

Do you have any idea what is this bug or how should I continue the investigation? (without updating jquery/jqueryUI or without switching to bootstrap modal)?

google-tag-manager jquery-ui html javascript
2 Answers

Without additional detail is very hard to guess, what causes your problem, but there is one thing, I will try ona first place.

Check, how is your trigger made.

There are some GTM configurations, that steps into link click event processing.

So maybe, there is an event listenning on an A element, that onlky pretends to be a link and GTM is waiting for response.

GTM dialog window with trigger configuration

If this is a true, try to change event listener into just Generic click event (Click - All Elements).

gtm all link click

user_34893620

I got lucky. I found a second form that exists for a short period of time, which was facebook related (GTM). I realized that a "xy.appendTo('form')" JS code inserts data into the wrong form... By changing the code to "xy.appendTo('#form1')" the problem is gone.

So a simple appendTo('form') started the domino effect, which resulted in duplicated IDs in the DOM, and messed up everything...

The facebook.com/tr call in the network tab is still in pending state, but I believe that is somehow related to Jakub Kriz's suggestion (I will update my answer soon).

UPDATE:

Even though the GTM debugger shows no trigger has been fired, the GTM sends requests to facebook.com/tr calls every time a "a/a href" or "input type="button"" is clicked. I believe this is a default functionality, and I understand why.

In some cases our website is using these html tags in an invalid way: "a" is used instead of a "div" and "input type button" is used for an icon that opens a modal dialog. If we change these, the unnecessary facebook.com/tr calls will be gone.

But I've got still no clue about the pending state. I believe when I apply the changes I mentioned above, the problem will be gone.

user_139638160
Related