首页 > 解决方案 > MessageBird 全渠道小部件 - 单页 Web 应用程序 - 错误

问题描述

我正在使用仅允许通过 Google 跟踪代码管理器进行代码编辑的在线订购解决方案(白标解决方案)。我想在解决方案上显示一个聊天小部件。目前使用 LiveChat 但想更改为 MessageBird。在单页应用程序上插入代码时遇到问题。

https://developers.messagebird.com/api/omnichannel-widget/

我已经通过 Google 跟踪代码管理器在所有页面上触发或历史更改(以允许单页网络应用程序)插入 MessageBird Omnichannel 小部件。

<script>  
var MessageBirdChatWidgetSettings = {     
widgetId: '37d411fb-b884-4342-a226-5c8aac703e44',     
initializeOnLoad: true,   
};  

!function(){"use strict";if(Boolean(document.getElementById("live-chat-widget-script")))console.error("MessageBirdChatWidget: Snippet loaded twice on page");else{var e,t;window.MessageBirdChatWidget={},window.MessageBirdChatWidget.queue=[];for(var i=["init","setConfig","toggleChat","identify","hide","on","shutdown"],n=function(){var e=i[d];window.MessageBirdChatWidget[e]=function(){for(var t=arguments.length,i=new Array(t),n=0;n<t;n++)i[n]=arguments[n];window.MessageBirdChatWidget.queue.push([[e,i]])}},d=0;d<i.length;d++)n();var a=(null===(e=window)||void 0===e||null===(t=e.MessageBirdChatWidgetSettings)||void 0===t?void 0:t.widgetId)||"",o=function(){var e,t=document.createElement("script");t.type="text/javascript",t.src="https://livechat.messagebird.com/bootstrap.js?widgetId=".concat(a),t.async=!0,t.id="live-chat-widget-script";var i=document.getElementsByTagName("script")[0];null==i||null===(e=i.parentNode)||void 0===e||e.insertBefore(t,i)};"complete"===document.readyState?o():window.attachEvent?window.attachEvent("onload",o):window.addEventListener("load",o,!1)}}();
</script>

这在我们的桌面版本上运行良好 - 小部件加载到右下角的“屏幕外”区域,但在移动版本上会导致问题 - 减慢页面加载速度并干扰页面元素和其他通过 Google 跟踪代码管理器触发的标签。 我怀疑这个问题与我们的在线订购解决方案是单页网络应用程序有关吗?

我在视频中解决了这个问题: https ://www.loom.com/share/efacb3ebe89e49ceb7b5049da8a31a58

我之前使用的是 LiveChat,并且还通过 GTM(相同的触发器)插入了代码。这工作得很好,我目前在网站上。

<script type="text/javascript">
  window.__lc = window.__lc || {};
  window.__lc.license = 11857671;
  (function() {
    var lc = document.createElement('script'); lc.type = 'text/javascript'; lc.async = true;
    lc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.livechatinc.com/tracking.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(lc, s);
  })();
</script>
<noscript>
<a href="https://www.livechatinc.com/chat-with/11857671/" rel="nofollow">Chat with us</a>,
powered by <a href="https://www.livechatinc.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a>
</noscript>
<!-- End of LiveChat code -->
<script src="https://73b0e137397e4eceb870f14567b2e515.js.ubembed.com" async></script>

我曾尝试仅在主页上触发 MessageBird 小部件标签,同样的问题。我也试过不初始化 MessageBird 小部件,同样的问题。

我将不胜感激任何意见或建议。

标签: javascriptsingle-page-applicationgoogle-tag-managermessagebird

解决方案


推荐阅读