• เรียน Google Ads
  • รับทำ Google Ads
  • Privacy Policy
  • Sitemap
Digi Era
  • Home
  • Google Adwords
  • seo
  • Google Tag Manager / Analytics
  • Facebook Ads
  • Home
  • Google Adwords
  • seo
  • Google Tag Manager / Analytics
  • Facebook Ads
No Result
View All Result
Digi Era
No Result
View All Result
Home Google Tag Manager / Analytics

ลองมาติดตั้ง Facebook Chat ด้วย Tag Manager กันดีกว่า

Apiwat Chaleamjit (X) by Apiwat Chaleamjit (X)
December 7, 2019
in Google Tag Manager / Analytics
0
0
SHARES
186
VIEWS
Share on FacebookShare on Twitter

Facebook Live Chat เป็นตัวช่วยที่จะทำให้เราสามารถติดต่อกับลูกค้าได้ง่ายขึ้น โดยไม่ต้องซื้อโปรแกรมแบบเสียเงิน และในวันนี้ Digi Era จะมาให้คำแนะนำว่าควรที่จะติดตั้งอย่างไรผ่านการใช้ Google Tag Manager แนะนำให้อ่านเรื่องนี้ก่อน – Tag Manager คืออะไร

เลือกอ่านเฉพาะบางหัวข้อที่คุณต้องการ

  • สิ่งที่ต้องเตรียมเมื่อต้องติดตั้ง Facebook Live Chat.
  • เริ่มสร้าง Facebook App กันก่อน
  • เริ่มตั้งค่าใน Page Admin เพื่อขอใช้งาน Live Chat
  • เริ่มการตั้งค่าใน Tag Manager
    • นำ Code ด้านบนไปติดใน Tag Manager กัน
    • เลือกว่าจะให้ Facebook Live Chat ทำงานในหน้าไหนบ้าง

สิ่งที่ต้องเตรียมเมื่อต้องติดตั้ง Facebook Live Chat.

  1. สิทธิ์ในการเข้าใช้งาน Google Tag Manager แบบ Full Access เพราะไม่เช่นนั้นคุณจะไม่สามารถติดตั้งได้แบบสมบูรณ์แบบ ลองศึกษาเรื่องสิทธิ์การใช้งานในบทความก่อนหน้านี้ – Google Tag Manager คืออะไร
  2. สิทธิ์ในการเข้าใช้งาน Facebook Developer
  3. สิทธิ์ขั้นสูงสุดใน Facebook Pages
  4. เว็บไซต์จะต้องติดตั้ง Google Tag Manager บนเว็บ ถ้ายังไม่ติดตั้งก็จะไม่สามารถทำได้

เริ่มสร้าง Facebook App กันก่อน

ก่อนที่จะเริ่มติดตั้งให้เข้าไปที่นี่ >> https://developers.facebook.com เพื่อสร้าง Application ขึ้นมา แต่เราจะไม่ได้สร้างมาเป็นแอพจริงๆ เพราะเราจะใช้เพียงแค่ Application ID เพียงเท่านั้น เพื่อใช้ในการเชื่อมระหว่างเฟสบุีคและเว็บไซต์ของเรา

สร้าง-digi-era-chat-app

เมื่อมองไปที่ด้านขวาบน หลังจากนั้นให้คลิกเพื่อสร้างแอพพลิเคชั่นขึ้นมา หลังจากนั้นให้เลือกใส่เป็นข้อมูลเบื้องต้นของแอพพลิเคชั่นของเรา โดยอาจจะตั้งตามชื่อของเว็บไซต์ และให้ใส่เป็นอีเมลที่สามารถติดต่อได้จริงๆ ตามภาพด้านล่าง

เมื่อคลิก Create App ID ก็จะถือว่าสร้างเสร็จเรียบร้อยแแล้ว หลังจากนั้นทางระบบจะให้คุณเข้าหน้า Dashboard ของแอพพลิเคชั่นของคุณ ให้ Copy เพียงเลขของ Application ID มาไว้ก่อนเพื่อที่จะนำไปใช้ต่อเมื่อต้องติดตั้งผ่าน Tag Manager โดยเลขไอดีให้ดูได้จากตัวอย่างด้านล่าง

เริ่มตั้งค่าใน Page Admin เพื่อขอใช้งาน Live Chat

หลังจากที่เราได้สร้าง Application อันนึงมาได้เป็นที่เรียบร้อย ให้เรากลับไปที่เพจเพื่อขอใช้งาน Facebook Live Chat แต่ระดับที่จะทำได้นั้นจะต้องเป็น Page Admin เท่านั้น ถ้าใครอยู่ในระดับนี้แล้วลองมาทำตามกันดู โดยเริ่มต้นให้ไปที่ Setting > Page Info แล้วให้ใส่เว็บไซต์ของเราลงไป เมื่อใส่เสร็จเรียบร้อยแล้วก็ถือว่าเป็นอันเสร็จ

เมื่อนำเว็บไซต์ไปใส่ในเพจของคุณแล้ว ให้กลับมาที่ Page ของเรา แล้วให้เลื่อนลงไปที่ About ให้ลงมาตรงด้านล่างสุดเพื่อมองหา Page ID ตามภาพด้านล่าง

เริ่มการตั้งค่าใน Tag Manager

เมื่อได้ตั้งค่าแอพพลิเคชั่น และเพจเป็นที่เรียบร้อยแล้ว ก็มาเริ่มตั้งค่าใน Google Tag Manager กันเลยดีกว่า มาดูกันว่าเราต้องตั้งค่าอย่างไรให้ Facebook Live Chat สามารถใช้งานได้ในเว็บไซต์ของเรา โดยเริ่มจากนำ Code ด้านล่างไปติดตั้งใน GTM โดย Code นี้ทาง Digi Era ไม่ได้เขียนขึ้นมาเอง ได้นำมาจาก https://simoahava.com/

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : 'เลือกใส่ App ID ของคุณ',
      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/xfbml.customerchat.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

  jQuery('body').append('<div class="fb-customerchat" page_id="ใส่เลข PageID ของคุณเอง" minimized="true" logged_in_greeting="ใส่ข้อความต้อนรับเมื่อมีคนทัก" logged_out_greeting="ใส่ข้อความต้อนรับเมื่อมีคนทัก" theme_color="เลือกใส่รหัสสีตามแต่ที่คุณต้องการ"> </div>');

</script>

นำ Code ด้านบนไปติดใน Tag Manager กัน

ให้คลิก new เพื่อสร้าง Tag โดยเราจะต้องเลือกเป็น Custom Html เพราะทาง Google Tag Manager ไม่มี Built-in Tag ที่เป็นของ Facebook ให้ใช้ได้

เมื่อคลิกที่คำว่า Custom Html ให้นำ Code ด้านบนไปใส่ แต่มันยังใช้งานไม่ได้คุณจะต้องแก้ไขก่อน โดยจะต้องใส่ App ID ที่ได้สร้างมาตั้งแต่ตอนแรก หลังจากนั้นให้เลือกใส่ Page ID และหลังจากนั้นจะต้องใส่ Custom Greeting Message เพื่อเอาไว้เป็นคำต้อนรับเมื่อมีคนทักเข้ามา

เลือกว่าจะให้ Facebook Live Chat ทำงานในหน้าไหนบ้าง

ข้อดีของการใช้ Tag Manager คือเราสามารถกำหนดได้ว่าจะให้ Facebook Live Chat ของเราทำงานในหน้าไหนได้บ้าง อย่างเช่น ให้ใช้งานเฉพาะหน้าที่เป็นสินค้าของเราเท่านั้น ไม่ต้องโชว์ในหน้า Thanks Page เป็นต้น

จากภาพด้านบนจะเห็นได้ว่า เราได้กำหนดให้ Facebook Live Chat สามารถที่จะทำงานได้ในทุกหน้าของเว็บ ยกเว้นในหน้า Thanks Page และ Google Ads 2 เป็นต้น ลองคลิกไปดู Facebook Chat จะไม่ทำงาน เมื่อได้ตั้งค่าเสร็จเรียบร้อยแล้ว หลังจากนั้นให้กด Preview Tag ก่อนเพื่อดูว่ามันทำงานจริงๆ หรือถ้ามั่นใจอาจจะกด Publish เลยเพื่อที่จะทำให้ Tag นี้ทำงานในทันที

ทั้งหมดก็เป็นการติดตั้ง Facebook Live Chat ผ่านการใช้ Google Tag Manager ซึ่งอาจจะต้องมีการเขียน Code บ้างเล็กน้อยแต่ก็ไม่ต้องขั้นถามทีม Developer ให้เสียเวลา เพียง Copy Code ของ Simoahava ไปใช้ก็จะสามารถใช้ได้แล้ว เพียงแต่ว่าอาจจะต้องปรับแต่งเล็กน้อยเพื่อที่จะให้มันสามารถใช้งานได้ สำหรับใครที่ลองทำแล้วไม่ได้ลองหลังไมค์จาก FB Live Chat ของ Digi Era ขวามือของบล็อกนี้ได้ครับ

Previous Post

Google Ads เปิดให้ใช้งาน Lead Form Extension

Next Post

รวบทุกการอัพเดตของ Google Ads ในปี 2019

Apiwat Chaleamjit (X)

Apiwat Chaleamjit (X)

เดินสายอยู่บนเส้นทาง Digital Marketing มานานกว่า 8 ปี โดยได้ดูแลแคมเปญให้กับธุรกิจขนาดเล็ก SME ไปจนถึงขนาดใหญ่ที่เป็น Corporate โดยมีความถนัดกับทุกด้านตั้งแต่ ธุรกิจด้านการเงินทุกชนิด, การประกันภัย, การศึกษา, อีคอมเมิร์ช และอื่นๆ อีกมากมาย โดยจุดมุ่งหมายเดียวในการทำแคมเปญของผม มักจะเน้นที่เพิ่มยอดขาย เพิ่มการรับรู้ของแบรนด์

Related Posts

google-analytics-4-what-changed-ga4
Google Tag Manager / Analytics

เมื่อ GA4 เข้ามาแทนที่ UA มีอะไรบ้างที่ต้องปรับตัว

by Apiwat Chaleamjit (X)
April 10, 2022
Goal ใน Google Analytics ตั้งค่าอย่างไร ทั้ง 2 เวอร์ชั่น - feature image
Google Adwords

Goal ใน Google Analytics คืออะไร และตั้งค่าอย่างไร ทั้ง 2 เวอร์ชั่น

by Apiwat Chaleamjit (X)
July 16, 2021
FAQ Schema คืออะไร ติดตั้งอย่างไรด้วย Google Tag Manager - 11
Google Tag Manager / Analytics

FAQ Schema คืออะไร ติดตั้งอย่างไรด้วย Google Tag Manager

by Apiwat Chaleamjit (X)
January 22, 2021
สอนใช้งาน Google Tag Manager Preview Mode เวอร์ชั่นใหม่
Google Tag Manager / Analytics

สอนใช้งาน Google Tag Manager Preview Mode เวอร์ชั่นใหม่

by Apiwat Chaleamjit (X)
January 17, 2021
ติดตั้ง event tracking ใน google analytics 4 property
Google Tag Manager / Analytics

สอนตั้งค่า Click Event Tracking ใน Google Analytics 4

by Apiwat Chaleamjit (X)
December 18, 2020
Next Post
รวบทุกการอัพเดตของ Google Ads ในปี 2019

รวบทุกการอัพเดตของ Google Ads ในปี 2019

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

สนใจให้ Digi Era ช่วยคุณ

บทความที่มีคนอื่นเยอะที่สุด

conversions คืออะไร
Google Adwords

Conversion คืออะไร ทำไมถึงต้องรู้ [Update 2020]

by Apiwat Chaleamjit (X)
January 9, 2019
0

การทำโฆษณาออนไลน์ผ่านช่องทางอย่าง Google หรือ Facebook มักจะวัดผลกันที่จำนวนคนคลิก, คนเห็น (impression) หรือ จำนวนคนคลิก Like ให้กับเนื้องานนั้นๆ โดยอาจจะลืมไปว่ามันยังมีค่าสำคัญอีกค่าหนึ่งที่เรากำลังมองข้าม และมักจะไม่ได้ให้ความสนใจมากนัก นั่นก็ คือ Conversions Conversions คืออะไร ทำไมเราต้องให้ความสำคัญกับมัน Conversions...

Read more
Responsive Search Ads คืออะไร และต้องใช้ยังไง

Responsive Search Ads (RSA) คืออะไรและควรใช้อย่างไร

June 19, 2021
Google Analytics 4 Property

Google Analytics 4 Property คืออะไร อัพเดทใหม่ที่น่าสนใจ

November 13, 2020
bounce rate คืออะไร

Bounce Rate คืออะไร พร้อมวิธีการใช้บน Google Analytics 4

February 20, 2019
google-analytics-4-what-changed-ga4

เมื่อ GA4 เข้ามาแทนที่ UA มีอะไรบ้างที่ต้องปรับตัว

April 10, 2022

Browse by Category

  • Facebook Ads
  • Google Adwords
  • Google Tag Manager / Analytics
  • seo

Digi Era

Digi Era เราต้องการแชร์ประสบการณ์การทำงานบนสาย digital โดยเฉพาะ Google Ads, Google Analytics, GTM และ SEO ให้กับเหล่าเพื่อนพ้องน้องพี่ ได้ลองนำไปใช้ ซึ่งเราก็หวังว่าทิป และทริคที่ผมเองได้นำมาเสนอจะสามารถสร้างสรรค์ทำให้สามารถก่อให้เกิดผลสำเร็จได้

บทความ

  • Google Ads
  • Google Analytics และ Tag Manager
  • SEO

บริการของเรา

  • รับทำ Google Ads
  • รับสอน Google Ads

Recent Posts

  • 10 เครื่องมือวัดผล Facebook Ads ที่นักการตลาดต้องรู้
  • แนะ 7 วิธีเลือกบริษัทรับทำ SEO รายเดือน ต้องทำอย่างไร?
  • รู้จักกับ Learning Phase ใน Facebook Ads

© 2022 Digi Era - Sitemap

No Result
View All Result
  • Home
  • Google Adwords
  • seo
  • Google Tag Manager / Analytics
  • Facebook Ads

© 2022 Digi Era - Sitemap