簡單幾步驟

你也可以在網站上放上

Facebook Customer Chat

利用GTM放Facebook Messenger Plugin




訪客除了在網站上到達指定頁面可以填寫表單洽詢之外
你希望他們在任何頁面上有問題就立刻尋找專人回覆嗎?

這次我們教你怎麼利用GTM放FB Customer Chat Plugin


Zines CMS系統提供客戶埋第三方追蹤碼
除了GA(Google Analytics)、Facebook Pixel、Adwords Remarketing Tag之外
也有功能超強大的GTM(Google Tag Manager)



  如何透過GTM(Google Tag Manager)將Facebook Customer Chat置入你的網站中。

你會有四個階段要處理

  1. 檢查自己是否符合條件能夠用GTM放FB Chat
  2. 複製代碼
  3. Google Tag Manager設定
  4. 臉書設定


步驟一　檢查自己是否符合條件能夠用GTM放FB Chat

檢查你的主辦單位是否符合以下兩個條件


步驟二　複製代碼

修改程式碼

請複製以下這串天書
並修改其中黃色字串的部分

<script>
  (function() {
    // Modify the variable values below
    var page_id = '粉絲專頁編號';
    var theme_color = '顏色HEX(如:#D20C0C)';
    var logged_in_greeting = '登入狀態歡迎詞(如:嗨!你好!)';
    var logged_out_greeting = '登出狀態歡迎詞(如:嗨!你好!)';
    var greeting_dialog_display = 'hide';
    var ref = '';
        
    // Don't touch the code below
    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);
    el.setAttribute('greeting_dialog_display', greeting_dialog_display);  
    document.body.appendChild(el);
  })();
  
    // Initialise Facebook SDK
        window.fbAsyncInit = function() {
          FB.init({
            xfbml            : true,
            version          : 'v4.0'
          });
        };

        (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/zh_TW/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk_'));
            
</script>


步驟三　Google Tag Manager設定

進入 Google Tag Manager
選擇「New Tag」

選擇「New Tag」

點選Tag Configuration

點選Tag Configuration

選擇「Custom HTML」

選擇「Custom HTML」

將複製的程式碼貼入HTML中

將複製的程式碼貼入HTML中

點選下方Triggering選擇「All Pages」點選下方Triggering選擇「All Pages」

完成後點選右上角儲存
並重新命名完成後點選右上角儲存並重新命名



步驟四　臉書設定

進入品牌的粉絲專頁設定
點選Messenger 開放平台

進入品牌的粉絲專頁設定並點選Messenger 開放平台

下拉找到「允許清單中的網域」
輸入官網網址 (加入https://)

(例如: https://feversocial.com)

下拉找到「允許清單中的網域」 輸入官網網址

點選儲存，就大功告成啦！

對了！要記得發布GTM哦！
不然東西一直在草稿階段…畫面上會看不到哦！


其他技術相關文章

icon_BackToTop