search

microsoft / BotFramework-WebChat

A highly-customizable web-based client for Azure Bot Services.
https://www.botframework.com/
MIT License
1.56k stars 1.51k forks source link

WebChat is not working due to some conflict with Google Tag Manager #4966

Open kr-prash opened 7 months ago

kr-prash commented 7 months ago

We have the WebChat (Ver 4.13.0) built into a React application which connects to the Microsoft Bot Framework backend service built in NodeJS. The WebChat stopped working all of a sudden in our enterprise application and started displaying the message 'Taking longer than usual to connect.', as shown below, since last week (11/14/2023). This issue was also seen with the latest version of WebChat (v4.16.0). Please also find below our findings on this issue.

image

After much debugging we have identified that this issue is happening due to some sort of conflict with ‘Google Tag Manager’ which is also used in the application. If the Google Tag Manager is initialized, as shown below, before the WebChat session is initialized, then it is somehow conflicting with the WebChat middleware events, thereby not triggering 'DIRECT_LINE/CONNECT_FULFILLED' event.

image

When 'Taking longer than usual to connect.' error occurs we also see the below error in the Console tab of the browser, which is resulting when the WebChat is making a request to 'https://directline.botframework.com/v3/directline/conversations'. Please find below the screenshot of this error.

Error in Console: Uncaught DOMException: Failed to read the 'responseText' property from 'XMLHttpRequest': The value is only accessible if the object's 'responseType' is '' or 'text' (was 'json') at XMLHttpRequest.onreadystatechange (:3:163) onreadystatechange @ VM328:3 XMLHttpRequest.send (async)

image
compulim commented 7 months ago

Sounds like Google Tag Manager hijacked XMLHttpRequest and they failed the response. I found a similar question on StackOverflow.

  1. Can you bring the issue to Google Tag Manager?
    • Reason: if their code is not installed, XMLHttpRequest works fine. Sounds like a compatibility issue in their hijacked version
  2. Can you suggest any changes to DirectLineJS that would solve the issue?
kr-prash commented 7 months ago

@compulim, Thank you for the response.

Sure, we will bring this issue to Google Tag Manager and keep you updated.

Currently, I don't have any suggestions to change DirectLineJS. Is this something your team can look into and let me know if it can be resolved in WebChat/DirectLineJS? I can work with your team to test if you have any updated build. Please let me know.

kr-prash commented 7 months ago

@compulim, any update on this issue?

Meantime, we have raised this issue with the "Google Tag Manager" team and we will keep you updated with their findings. https://github.com/alinemorelli/react-gtm/issues/127

compulim commented 6 months ago

@kr-prash I tried to load Web Chat with 2 versions of Google Tag Manager. I am still able to talk to the bot.

The versions of GTM I am loading:

In both cases, I am not seeing any errors related to responseText. I am able to communicate with the bot.

react-gtm-module seems using an older version of GTM (gtm.js). Could you follow instructions from Google and load the GA v4 (gtag/js) and see if it still repro?

kr-prash commented 6 months ago

@compulim,

Thank you for the feedback. We are using the latest version of 'react-gtm-module' (v2.0.11) and we found that it is already injecting the latest gtm.js, which is v9.0 as shown in the screenshot below. My team is currently exploring the options to use GA v4 (gtag/js) as suggested by you. I will keep you updated with our findings.

image
compulim commented 5 months ago

image

We couldn't repro the issue.

We loaded gtm.js and still everything works correctly.

Do you think there are other dependencies causing the issue? Could you try to load it outside of react-gtm-module to see if it's an issue of Google Tag Manager or react-gtm-module?