web-dev-qa-db-ja.com

Googleタグマネージャーを使用してFacebook Messengerカスタマーチャットプラグインをサイトに追加する方法

私は Facebook Messenger Customer Chat Plugin をGoogle Tag Managerを使用してWebサイトにインストールしようとしていますが、開発者以外が制御できるようにしていますが、GTMで「カスタムHTML」ブロックを作成した後、 HTMLが無効であるというタグを拒否しています。

このコードは手動で追加した場合は正常に機能しますが、GTM内で使用した場合は機能しません。

<!-- FACEBOOK MESSENGER CHAT BOX -->
<div class="fb-customerchat" page_id="xxxxxxxxxx"></div>
<script>
  // Initialise Facebook SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'xxxxxxxxxxx', // Facebook App ID goes here
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (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.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

そしてエラー：

テンプレートに無効なHTML、CSS、またはJavaScriptが見つかりました。

この問題の回避策は何ですか？

facebookgoogle-tag-manager
3
Simon East

私は、GTMがHTML（おそらくpage_id属性）について気に入らないことを発見しました。そのため、代わりに、<div>をJavaScriptを使用して動的に作成する必要があります。これが、使用した最終コードです。

<!-- FACEBOOK MESSENGER CHAT BOX -->
<script>
  // We create the DIV dynamically to work correctly with Tag Manager
  var chatDiv = document.createElement('div');
  chatDiv.className = 'fb-customerchat';
  chatDiv.setAttribute('page_id', 'xxxxxxxxxxxxxxx'); // Facebook Page ID goes here
  document.body.appendChild(chatDiv);

  // Initialise Facebook SDK
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'xxxxxxxxxxxxxxxx', // Facebook App ID goes here
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.11'
    });
  };

  (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.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>
3
Simon East