วิธีการติดตั้ง Script Web Event Tracking

Published On - 10/03/2023

SABLE Guides

Web Event Tracking คือการจับพฤติกรรมในการรับชมเว็บไซต์ของผู้ชมที่เข้ามาดูหน้าเว็บไซต์ต่าง ๆ นอกเหนือจากการดูหน้าเว็บไซต์ตามปกติ ซึ่งจะช่วยให้ได้รับทราบพฤติกรรมในการใช้เว็บไซต์ของผู้ชมที่ละเอียดและแม่นยำมากขึ้น

ขั้นตอนการติดตั้ง

  1. ได้รับ Script จากเซเบิล ที่มี 2 ส่วน ส่วนที่ 1. Script Tracking 2.Token
  2. ให้เอาไปแปะที่เว็บไซต์ ซึ่งถ้าหากเว็บไซต์ใช้ WordPress หรือ Magento ทางเซเบิลมี plugin ให้ใช้งาน โดยมีชื่อว่า SABLE 
  3. สามารถปรับแต่ง cookie consent banner
  • Show PDPA เพื่อทำการเลือกว่าจะทำการ show PDPA หรือไม่ show
  • Text Color 
  • Background color
  • Button text color
  • Button color
  • Policy text
  • Policy link
  • Set position consent
  • Set device consent

การที่เราจะเริ่มการ Tracking ได้ ต้องมีการกด ยอมรับ PDPA  ถึงจะเริ่มทำการ Tracking ได้ตั้งแต่กดยอมรับ แล้วนำข้อมูลมาวิเคราะห์ สู่หน้า Dashboard Event Tracking โดยวิธีการติดมี อยู่ 3 รูปแบบ

Script Website

  1. ทาง SABLE จะให้ script ที่ทำการ tracking มาให้
  2.  นำ script ที่ ทาง SABLE ให้ set ไว้ที่ Tag head
    Script tracking
    <script src=”url tracking file script” brandid=”brand id” sbdefaultconsentcookie=”sc type” colors=”[‘text color’, ‘bg color’, ‘button text color’, ‘button color’]” policylink=”policy url” policytext=”text on dialog pdpa” integrate=”integrate plaform” position=”[‘position’, [‘device’]]></script>

    Example

    <head>
    <script src=”https://cdn.sable.asia/tracking-dev.js” brandid=”xxxxxxxxxx” sbdefaultconsentcookie=”sc_default” colors=”[‘#000000’, ‘#ffffff’, ‘#ffffff’, ‘#101828’]” policylink=”https://sable.asia/policy” policytext=”เราใช้คุกกี้เพื่อเพิ่มประสิทธิภาพ และประสบการณ์ที่ดีในการใช้งานเว็บไซต์ เมื่อคุณกด “ยอมรับทั้งหมด” เราจะสามารถเลือกแสดงสิ่งที่น่าสนใจสำหรับคุณได้โดยเฉพาะ” integrate=”wordpress” position=”[‘center’, [‘mobile’]]>
    </script>
    </head>
  3. หลังจากที่ set เสร็จสามารถเริ่มต้นการใช้งานได้เลย
  4. ตัวอย่างเมื่อ นำ script ไปใช้งาน และ set up เรียบร้อยแล้ว

Script Magento

Magento เป็นแพลตฟอร์มจัดการข้อมูลบนเว็บไซต์แบบ Content Management System (CMS) ในการพัฒนาเว็บไซต์ E-Commerce ที่มีฟังก์ชันการใช้งานที่ครบถ้วน โดยใช้ภาษา PHP ทำให้ผู้ใช้งานสามารถพัฒนาเว็บไซต์ได้

ก่อนที่จะเริ่มใช้งาน Extension ของ Sable ได้นั้นจำเป็นที่จะต้องมี project ของ Magento ที่ต้องมี data ต่างๆในระบบให้พร้อมใช้งานก่อน

ขั้นตอนการ Set Up เพื่อใช้งาน Extension

  1. ทาง SABLE จะให้ File sable.zip พร้อมกับ Token มา เพื่อนำไปใช้ในการติดตั้งและใช้งาน Extension
  2. Login เข้าหน้า magento Admin page [path domain/admin]


  3. เมื่อทำการ login เสร็จ จะเข้าสู่ Admin page หน้าแรก

  4. โดยที่ทางซ้ายมือจะมีแถบเมนู SABLE ให้ทำการ คลิก เข้าไปที่แถบเมนู SABLE เพื่อเริ่มทำการ Setting PDPA
    [เมื่อทำการlogin เข้ามา แล้วไม่เห็นแถบเมนู SABLE ให้ทำการ ติดติ้ง extension อีกรอบ]
  5. เมื่อคลิกไปที่แถบเมนู SABLE จะมี Tab Menu ให้ ให้ทำการคลิกไปที่ General 
  6. เมื่อทำการคลิก General ก็จะเข้าสู่หน้า ที่มีหัวข้อว่า SABLE Extension เพื่อเริ่มทำการ Custom PDPA

  7. โดยวิธีการ set up ให้เริ่มจาก
    1. นำ Token ที่ SABLE ให้ใส่ไปที่ช่อง Token เมื่อใส่ Token ไปที่ช่อง Token เสร็จให้ทำการกด Check Token เพื่อทำการเช็ค Token ว่าถูกต้องหรือไม่

    2. เมื่อทำการกด Check Token เสร็จ ถ้า Token ถูกต้องจะมีข้อความแจ้งว่า Valid Token แต่ถ้าคลิก Check Token แล้ว มีแจ้งเตือนว่า Invalid Token การทำงาน plugin ทั้งหมดจะไม่ทำงาน ให้ติดต่อเขามาที่ SABLE ทันที
      Valid Token

      Invalid Token
    3. เมื่อทำการ Check Token แล้ว valid ให้ไปที่ PDPA(Show/Hide) แล้วเปลี่ยนจาก Disable ไปเป็น Enable ถ้าไม่ทำการเปลี่ยนเป็น Enable ระบบจะทำการเก็บข้อมูลที่ ทำการ Tracking ได้ทันที โดยที่ user ยังไม่ได้กดยอมรับ PDPA

    4. ตัวอย่างเมื่อ show PDPA

    5. Web page[front end] ก็จะขึ้นกล่อง PDPA ขึ้นมาเพื่อให้ user กดยอมรับทั้งหมด เพื่อเริ่มทำการ Tracking

    6. หลังจากที่ User ทำการกดยอดรับทั้งหมด การ Tracking ก็จะเริ่มทำงาน ข้อมูลทั้งหมดที่ทำการ Tracking ก็จะนำมาวิเคราะห์ สู่หน้าระบบ Dashboard Event Tracking

Script WordPress

WordPress คือ โปรแกรมสำเร็จรูปที่ใช้สร้างและจัดการเนื้อหาเว็บไซต์ประเภท Contents Management System หรือเรียกย่อๆ ว่า “CMS” ซึ่งเขียนด้วยภาษา PHP และใช้ระบบจัดการฐานข้อมูล MySQL โดยมีส่วนประกอบหลักๆ

ก่อนที่จะเริ่มใช้งาน Extension ของ Sable ได้นั้นจำเป็นที่จะต้องมี project ของ WordPress ที่ต้องมี data ต่างๆในระบบให้พร้อมใช้งานก่อน

ขั้นตอนการติดตั้ง Extension or Plugins WordPress

  1. Login เข้า Admin account 
  2. เมื่อ login เข้าสู่ WordPress ได้แล้ว จะมีแถบเมนูให้เลือก 
  3. เลือก Plugins > Add New
  4. เข้าสู่หน้า Add New จะมีปุ่ม Upload Plugin ให้เลือก ให้เลือกคลิกที่ปุ่ม Upload Plugin
  5. เมื่อกด Upload Plugin เสร็จ ให้กด Choose File
  6. เลือก File sable.zip ที่ทาง SABLE ให้ หลังจากเลือก File sable.zip เสร็จ ให้ทำการกด Install Now เพื่อ Upload Plugin ไปที่ WordPress
  7. หลังจากที่กด Install Now ก็จะเข้าสู่หน้า Installing plugin เพื่อทำการรอ plugin install เมื่อ plugin install เสร็จ จะมีข้อความขึ้นมาว่า Plugin installed successfully
  8. เมื่อทำการติดตั้งเสร็จ ทางแถบเมนูทางด้านซ้ายมือ จะมี Icon SABLE ขึ้น

ขั้นตอนการ Set Up เพื่อใช้งาน Plugin

  1. ทางแถบเมนูทางด้านซ้ายมือ จะมี Icon SABLE ให้คลิกไปที่ Icon SABLE > Settings

  2. เข้าสู่หน้า Setting

  3. โดยวิธีการ set up ให้เริ่มจาก
    1. นำ Token ที่ SABLE ให้ ไปใส่ที่ช่อง Token Key เมื่อใส่ Token ไปที่ช่อง Token Key เสร็จให้ทำการกด Verify Token เพื่อทำการเช็ค Token ว่าถูกต้องหรือไม่

    2. เมื่อทำการกด Verify Token เสร็จ ถ้า Token ถูกต้องจะมีข้อความแจ้งว่า Valid Token แต่ถ้าคลิก Verify Token แล้ว มีแจ้งเตือนว่า Invalid Token การทำงานplugin ทั้งหมดจะไม่ทำงาน ให้ติดต่อเขามาที่ SABLE ทันทีValid Token

      Invalid Token
    3. เมื่อทำการ Verify Token แล้ว valid ให้ไปที่ PDPA แล้วทำการ checkbox ให้ขึ้นเครื่องหมายถูก แสดงคำว่า show ถ้าไม่ทำการ checkbox ให้ขึ้นเครื่องหมายถูก แสดงคำว่า hide จะทำการเก็บข้อมูลที่ ทำการ Tracking ได้ทันที โดยที่ user ยังไม่ได้กดยอมรับ PDPAshow PDPA
    4. ตัวอย่างเมื่อ show PDPA

    5. พอทำการกด show PDPA เรียบร้อย จากหน้า Website ก็จะขึ้นกล่อง PDPA ขึ้นมาเพื่อให้ user กด ยอมรับทั้งหมด เพื่อเริ่มทำการ Tracking

    6. หลังจากที่ User ทำการกดยอดรับทั้งหมด การ Tracking ก็จะเริ่มทำงาน ข้อมูลทั้งหมดที่ทำการ Tracking ก็จะนำมาวิเคราะห์ สู่หน้าระบบ Dashboard Event Tracking

ขั้นตอนการปรับแต่ง cookie consent banner

เมื่อทำการกด show PDPA แล้วเราสามารถ custom cookie consent banner ได้ ตามขั้นตอนดังนี้

  1. ทำการแสดง PDPA
    Mangento

    WordPress
  2. Set ข้อความ สีต่างๆ ที่ตัวเองต้องการ
    Magento

    WordPress
  3. Set Position ที่ต้องการให้ cookie consent banner ตามที่ตัวเองต้องโดยสามารถเลือกได้ 3 Position
    1. top
    2. center
    3. Bottom(default)
      Magento

      WordPress
  4. Set Device Consent เพื่อเลือกว่าจะทำการกำหนดแหน่งที่เลือกมาจากขั้นตอนที่ 3 (Set Position หรือ Responsive) ไปที่ device ไหนบ้าง
    Magento

    WordPress
  5. หลังจากที่ทำการ set up ทั้งหมดเสร็จ ให้ทำการกด save
    Magento

    WordPress

Script Shopify

Shopify เป็นแพลตฟอร์มสำหรับใช้สร้างเว็บไซต์ร้านค้าออนไลน์แบบสำเร็จรูป หรือให้บริการเว็บไซต์ e-commerce จากประเทศแคนาดา ซึ่งจะมีระบบในการซื้อขาย ระบบการจ่ายเงิน ตลอดจนถึงระบบจัดการหลังบ้านให้เสร็จสรรพสมบูรณ์ ครบจบในขั้นตอนเดียว เพื่อให้ผู้ที่ทำธุรกิจ E-Commerce มีเว็บไซต์ขายสินค้าออนไลน์เป็นของตัวเอง

ขั้นตอนการติดตั้ง Script

  1. ทาง SABLE จะให้ script ที่ทำการ tracking มาให้
  2. Login เข้า Admin account 
  3. เมื่อทำการ Login เรียบร้อยแล้วจะแสดงหน้า Dashboard
  4. บนแถบเมนูทางซ้ายมือ คลิกเลือกเมนู Online Store > Themes

  5. หลังจากที่เข้ามาหน้า Themes ให้ทำการเลือก Themes ที่ใช้งานในปัจจุบัน

  6. หลังจากนั้นทำการเลือก Customize เพื่อเข้าสู่ส่วนตกแต่งหน้าตาธีมของเว็บไซต์

  7. หลังจากที่ออกแบบเว็บไซต์ในแบบที่ต้องการแล้ว จากนั้น
    คลิก ปุ่ม 3 จุดทางมุมซ้ายบน > เลือก Edit code

  8. คลิกเข้ามาที่ Edit code > theme.liquid

  9. นำ script ที่ทาง SABLE จัดส่งให้นำไปวางไว้ที่ ส่วนของ Tag Head <head></head>
    ตัวอย่างการติด Tag SABLE  ไว้ที่ Tag head
  10. เมื่อวาง Script เรียบร้อยแล้ว ให้ทำการกดปุ่ม SAVE เพื่อบันทึก ก็สามารถเริ่มการ Tracking ได้ทันที

    ตัวอย่างเมื่อทำการ set script และทำการกด save