Интерфейс чата hubspot отсутствует на посещенной странице Turbolinks, но работает для полного обновления страницы

Я хочу интегрировать интерфейс чата hubspot в мое приложение Rails 4 + Turbolinks. Я настроил Диспетчер тегов Google для отображения интерфейса поддержки чата в каждом событии загрузки страницы, которое работает нормально.

Тег GTM (пользовательский HTML)

<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/xxxxxx.js"></script>
<!-- End of HubSpot Embed Code -->

ПРОБЛЕМА

  • Когда я обновляю страницу вручную (полное обновление страницы), появляется интерфейс клиента hubspot (окно чата).
  • когда я захожу на страницу с Turbolinks, она не появляется.

Для отладки я следовал

как-д-я-знаю-если-моя-HubSpot-кода отслеживания, является работоспособной

Я могу видеть этот тег, добавленный в тело документа (DOM), проверяя элемент или проверяя его в исходной странице просмотра браузера. Также на вкладке Сеть отображается сетевой вызов, выполненный для js.hs-script.com,

ОЖИДАЕТСЯ

  • Интерфейс чата hubspot для работы с посещением страницы турболинков:

интерфейс клиента чата hubspot

Источник

1 ответ

У меня также была эта проблема, и я решил ее, удалив все существующие сценарии Hubspot из заголовка до (повторно), включая загрузчик сценариев Hubspot. Я просто добавил следующий скрипт прямо перед добавлением загрузчика Hubspot:

<script>
  // Remove Hubspot <head> scripts after a Turbolinks page load
  // so it can re-initialize properly.  Paste this code immediately
  // before the hubspot loading script in the <body>
  (function() {
    var scripts, script;
  
    // Remove scripts added by hs-scriptloader
    scripts = document.querySelectorAll('script[data-loader="hs-scriptloader"]');
    for (var script of scripts) {
      script.remove();
    }
  
    // Remove Hubspot Analytics
    script = document.getElementById('hs-analytics');
    if (script != undefined) {
      script.remove();
    }
  
    // Avoid duplicate chat warning and allow chat to load
    window.hubspot_live_messages_running = undefined
  })()
</script>

<!-- Now add the script to load Hubspot-->
<script async="" defer="defer" id="hs-script-loader" src="//js.hs-scripts.com/xxxxxxx.js" type="text/javascript"></script>

Это все еще хрупкое решение, поскольку Hubspot может изменить селекторы (загрузчик данных и т. Д.) В любое время.

Источник

Код hubspot вставляет 2 файла JS в <head> и вводит некоторые встроенные таблицы стилей в <body> - один из файлов js (разговор-embed.js) создает div с идентификатором #hubspot-messages-iframe-container, Как следует из названия, он содержит iframe с окном чата. Это также добавляет кучу CSS к телу.

Основная проблема здесь заключается в том, что Turbolinks заменяет все в <body> за изменение страницы, оставляя скрипт hubspot не осведомленным о том, что страница была изменена. Поскольку все заменено, div вводится сценарием и CSS исчезает.

Моей первой попыткой было клонировать div контейнера чата в переменную окна и использовать appendChild(clonedNode) к event.data.newBody элемент внутри turbolinks:before-render событие. Хотя это и работает, но не очень элегантно. Он исчезает и появляется каждый раз, когда вы меняете страницу. Кроме того, состояние не было перенесено, поэтому, если я закрою окно, оно будет открыто на следующей странице и так далее.

Что работает, чтобы переместить #hubspot-messages-iframe-container из тела в саму метку html, оставляя его вне вреда от турболинков. Это состояние сохраняется (открыто, закрыто и т. Д.) И не мигает и не имеет побочных эффектов. Помните, что вы должны вручную удалить его со страниц, на которых вы можете его не захотеть.

Я знаю, что это немного странно, но это работает, и пока у них не будет своего рода API для повторной инициализации окна чата, это обходной путь:

document.addEventListener("turbolinks:load", function() {
  let targetNode = document.body
  let config = { childList: true }
  let callback = function() {
    if (document.body.querySelector('#hubspot-messages-iframe-container')) {
      document.documentElement.appendChild(
        document.getElementById('hubspot-messages-iframe-container')
      )
      observer.disconnect()
    }
  }

  let observer = new MutationObserver(callback)
  if (!document.querySelector("html > #hubspot-messages-iframe-container")) {
    observer.observe(targetNode, config)
  }
})

Вам также нужно будет скопировать стиль, введенный в тело, так как Turbolinks также заменит это. Вот чем я закончил (преобразованный в Sass):

html.hs-messages-widget-open.hs-messages-mobile
  height: 100% !important
  overflow: hidden !important
  position: relative !important
  body
    height: 100% !important
    overflow: hidden !important
    position: relative !important
    margin: 0 !important

#hubspot-messages-iframe-container
  display: initial !important
  z-index: 2147483647
  position: fixed !important
  bottom: 0 !important
  right: 0 !important
  &.internal
    z-index: 1016
    iframe
      min-width: 108px
  .shadow
    display: initial !important
    z-index: -1
    position: absolute
    width: 0
    height: 0
    bottom: 0
    right: 0
    content: ""
    &.internal
      display: none !important
    &.active
      width: 400px
      height: 400px
      background: radial-gradient(ellipse at bottom right, rgba(29, 39, 54, 0.16) 0, rgba(29, 39, 54, 0) 72%)
  iframe
    display: initial !important
    width: 100% !important
    height: 100% !important
    border: none !important
    position: absolute !important
    bottom: 0 !important
    right: 0 !important
    background: transparent !important
Источник
Другие вопросы по тегам