Неверный HTML при добавлении кода поддержки чата Facebook с помощью Google Tag Manager? - PullRequest
Новая
       13

Неверный HTML при добавлении кода поддержки чата Facebook с помощью Google Tag Manager?

0 голосов
/ 21 февраля 2019

Я пытаюсь добавить модуль чата поддержки Facebook на свой сайт с помощью Google Tag Manager.

Код, который я использую, генерируется Facebook, и все, что я делаю, это копирую его прямо вМенеджер тегов Google, поэтому я не уверен, почему он не работает ...

Он выдает мне эту ошибку:

"В шаблоне найден неверный HTML, CSS или JavaScript" 

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v3.2'
    });
  };

  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your customer chat code -->
<div class="fb-customerchat"
  attribution=setup_tool
  page_id="XXXXXXXXXXX"
  theme_color="#111111">
</div>

Ответы [ 2 ]

0 голосов
/ 20 июля 2019

Полагаю, вы добавили данный код в пользовательский тег HTML GTM, в этом случае обычный HTML не будет работать (<div class="fb-customerchat" [...]</div>).Следовательно, данный код должен быть преобразован в javascript, чтобы работать.

Я бы следовал документации GTM и использовал бы Определяемые пользователем (константы) переменные для хранения параметров или любой строки/ значение.(Необязательно, он будет работать с жестко закодированными значениями, такими как var page_id = '0123456789';)

В следующем примере я смешал оба метода для лучшего понимания. 

<script>
(function() {
    // Sample variables
    var page_id = '{{FB - PageID}}';
    var ref = '';
    var theme_color = '{{FBChat - ThemeColor}}';
    var logged_in_greeting = 'Your greeting message for logged in users'; // Can be a Custom Constant Variable Sting
    var logged_out_greeting = 'Your greeting message for logged out users'; // Can be a Custom Constant Variable Sting

    // Do not edit
    var el = document.createElement('div');
    el.className = 'fb-customerchat';
    el.setAttribute('page_id', page_id);
    if (ref.length) {
        el.setAttribute('ref', ref);
    }
    el.setAttribute('theme_color', theme_color);
    el.setAttribute('logged_in_greeting', logged_in_greeting);
    el.setAttribute('logged_out_greeting', logged_out_greeting);
    document.body.appendChild(el);
})();
  
  // Facebook SDK for JavaScript : https://developers.facebook.com/docs/javascript/quickstart
    window.fbAsyncInit = function() {
    FB.init({
      appId      : '{{FB - AppID}}',
      xfbml      : true,
      // autoLogAppEvents : true,
      version    : 'v3.3'
    });
    // autoLogAppEvents replacement with logPageView
    FB.AppEvents.logPageView();
  };
  
  // Customer Chat SDK : https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/sdk#install
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
0 голосов
/ 21 февраля 2019

Менеджер тегов Google использует инструмент ( Closure Compiler ), который проверяет Javascript на достоверность.В отличие от браузера, который обычно просто игнорирует нестандартные атрибуты, линтер в компиляторе Closure довольно строг и не согласен с вещами, которые он не понимает (я догадываюсь, что должен - CC пытается оптимизировать Javascript для более быстрой работы, иесли он не понимает, что делает часть вашего тега, он не может оптимизировать).

Так что, если вы получаете это предупреждение, сначала проверьте биты, которые не являются стандартным HTML.Как было указано в другом ответе, такие атрибуты, как «attribution» и «page_id» и «theme_color», являются хорошими кандидатами.Вам нужно будет удалить их один за другим, чтобы узнать, сможете ли вы развернуть свой тег, а затем надеяться, что ваш чат все еще будет работать.

...