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

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

0 голосов
/ 06 июля 2018

Я хочу интегрировать интерфейс чата 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 chat client interface

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

У меня также была эта проблема, и я решил ее, удалив все существующие сценарии 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 может изменить селекторы (загрузчик данных и т. Д.) В любое время.

0 голосов
/ 16 ноября 2018

Код hubspot вставляет 2 js-файла в <head> и вставляет некоторые встроенные таблицы стилей в <body> - один из js-файлов (messages-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
...