Недопустимый HTML-код при добавлении кода поддержки чата Facebook с помощью Диспетчера тегов Google?
Я пытаюсь добавить модуль чата поддержки Facebook на свой сайт с помощью Диспетчера тегов Google.
Код, который я использую, генерируется 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
Диспетчер тегов Google использует инструмент (Компилятор закрытия), который проверяет достоверность JavaScript. В отличие от браузера, который обычно просто игнорирует нестандартные атрибуты, линтер в компиляторе Closure довольно строг и отказывается от вещей, которые он не понимает (моя обоснованная догадка заключается в том, что это необходимо - CC пытается оптимизировать Javascript, чтобы он работал быстрее, и если он не понимает, что делает часть вашего тега, он не может оптимизировать).
Поэтому, если вы получили это предупреждение, сначала проверьте биты, которые не являются стандартным HTML. Как было указано в другом ответе, такие атрибуты, как «атрибуция», «page_id» и «theme_color», являются хорошими кандидатами. Вам нужно будет удалить их один за другим, чтобы увидеть, сможете ли вы развернуть свой тег, а затем надеяться, что ваш чат все еще будет работать.
Я предполагаю, что вы добавили данный код в тег Пользовательский 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>