microsoft
WebChat is not working due to some conflict with Google Tag Manager
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.
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.
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 (
Sounds like Google Tag Manager hijacked XMLHttpRequest and they failed the response. I found a similar question on StackOverflow.
- Can you bring the issue to Google Tag Manager?
- Reason: if their code is not installed,
XMLHttpRequestworks fine. Sounds like a compatibility issue in their hijacked version
- Reason: if their code is not installed,
- Can you suggest any changes to DirectLineJS that would solve the issue?
- Web Chat do not deal with network connectivity, it's DirectLineJS job for any network calls
- It should be around https://github.com/microsoft/BotFramework-DirectLineJS/blob/master/src/directLine.ts#L389
@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.
@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
@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:
- https://www.googletagmanager.com/gtm.js?id=G...
- https://www.googletagmanager.com/gtag/js?id=G...
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?
@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.
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?