Blog

ระบบติดตามผู้สมัคร (ATS) คืออะไร?
ATS ย่อมาจาก Applicant Tracking System ซึ่งเป็นซอฟต์แวร์ที่บริษัทใช้เพื่อให้กระบวนการรับสมัครงานเป็นระบบมากขึ้น ทำหน้าที่เสมือนด่านคัดกรองดิจิทัล โดยการสแกนและกรองประวัติย่อก่อนที่จะถึงมือนักสรรหาบุคลากร

กระบวนการทำงานของ ATS
1. การส่งใบสมัคร: ผู้สมัครส่งประวัติย่อผ่านช่องทางออนไลน์
2. การแยกวิเคราะห์: ระบบสแกนประวัติย่อเพื่อค้นหาคำสำคัญ รูปแบบ และข้อมูลที่เกี่ยวข้อง
3. การจัดอันดับ: ประวัติย่อจะถูกจัดอันดับตามความสอดคล้องกับคำบรรยายงาน
4. การคัดเลือก: เฉพาะประวัติย่อที่ได้รับการจัดอันดับสูงเท่านั้นจะถูกส่งต่อให้นักสรรหาบุคลากร
วิธีทำให้ประวัติย่อผ่าน ATS

1. ใช้คำสำคัญจากคำบรรยายงาน
- เหตุผล: ATS มองหาคำสำคัญเฉพาะที่เกี่ยวข้องกับงาน
- วิธีปฏิบัติ:
  - อ่านประกาศรับสมัครงานอย่างละเอียด
  - ระบุคำสำคัญ เช่น ทักษะ คุณสมบัติ เครื่องมือ
  - แทรกคำเหล่านี้อย่างเป็นธรรมชาติในประวัติย่อ
2. จับคู่ตำแหน่งงาน
- เหตุผล: ATS มักให้ความสำคัญกับตำแหน่งงานที่ตรงกับคำบรรยายงาน
- วิธีปฏิบัติ:
  - ใช้ชื่อตำแหน่งที่ตรงกับประกาศรับสมัคร
  - เน้นตำแหน่งที่เกี่ยวข้องมากที่สุด
3. ใช้รูปแบบที่เรียบง่าย
- เหตุผล: ATS มีปัญหากับเค้าโครงที่ซับซ้อน กราฟิก หรือฟอนต์แปลก ๆ
- วิธีปฏิบัติ:
  - ใช้ฟอนต์มาตรฐาน เช่น Arial, Calibri หรือ Times New Roman
  - หลีกเลี่ยงรูปภาพ ตาราง คอลัมน์ หรือการออกแบบที่ซับซ้อน
  - ใช้รูปแบบย้อนหลัง (ประสบการณ์ล่าสุดก่อน)
4. บันทึกประวัติย่อเป็น Plain Text หรือ PDF
- เหตุผล: บางระบบ ATS อ่านไฟล์บางประเภทไม่ได้
- วิธีปฏิบัติ:
  - บันทึกเป็น PDF หรือ Plain Text (.txt)
  - ตรวจสอบรูปแบบไฟล์ตามคำแนะนำในประกาศรับสมัคร
5. ใช้หัวข้อมาตรฐาน
- เหตุผล: ATS ใช้หัวข้อเพื่อจัดหมวดหมู่ข้อมูล
- วิธีปฏิบัติ:
  - ใช้หัวข้อมาตรฐาน เช่น:
    
    ข้อมูลติดต่อ
    
    สรุปประวัติอาชีพ
    
    ประสบการณ์การทำงาน
    
    การศึกษา
    
    ทักษะ
  - หลีกเลี่ยงหัวข้อสร้างสรรค์
6. เพิ่มประสิทธิภาพส่วนทักษะ
- เหตุผล: ATS สแกนหาทักษะเฉพาะทาง
- วิธีปฏิบัติ:
  - ระบุทักษะที่กล่าวถึงในคำบรรยายงาน
  - หลีกเลี่ยงคำคุณศัพท์กว้าง ๆ
7. ใช้หัวข้อย่อย
- เหตุผล: หัวข้อย่อยช่วยให้ ATS วิเคราะห์ได้ง่าย
- วิธีปฏิบัติ:
  - ใช้หัวข้อย่อยสั้น ๆ ภายใต้แต่ละตำแหน่งงาน
  - เริ่มด้วยคำกริยาที่แสดงการกระทำ
8. หลีกเลี่ยงกราฟิกและแผนภูมิ
- เหตุผล: ATS ไม่สามารถแปลความหมายองค์ประกอบภาพได้
- วิธีปฏิบัติ:
  - แทนที่ภาพด้วยคำอธิบายข้อความ
  - แทนแผนภูมิทักษะด้วยรายการข้อความธรรมดา
9. รวมใบรับรองและประวัติการศึกษา
- เหตุผล: ATS มองหาคุณสมบัติที่ตรงกับข้อกำหนดงาน
- วิธีปฏิบัติ:
  - ระบุใบรับรองและวุฒิการศึกษาอย่างชัดเจน
  - รวมชื่อสถาบันและปีที่สำเร็จการศึกษา
10. ทดสอบประวัติย่อ
- เหตุผล: เพื่อให้แน่ใจว่าเป็นมิตรกับ ATS
- วิธีปฏิบัติ:
  - ใช้เครื่องมือ เช่น Jobscan, Resume Worded
  - ตรวจทานเพื่อแก้ไขข้อผิดพลาดการสะกด
สรุป

ATS คือระบบซอฟต์แวร์ที่บริษัทใช้กรองประวัติย่อ การผ่าน ATS ต้องทำประวัติย่อให้เป็นมิตรกับระบบโดยใช้คำสำคัญที่เหมาะสม มีรูปแบบเรียบง่าย และหลีกเลี่ยงกราฟิก
March 5, 2025
How to Add Facebook Pixel to Your Next.js
การติดตามการโต้ตอบของผู้ใช้เป็นสิ่งสำคัญในการทำความเข้าใจประสิทธิภาพของเว็บไซต์ Facebook Pixel ช่วยให้เราสามารถตรวจสอบการเข้าชมเว็บ ปรับแต่งโฆษณา และกำหนดกลุ่มเป้าหมายใหม่ได้ นี่คือคำแนะนำสั้นๆ ในการนำ Facebook Pixel ไปใส่ในโปรเจกต์ Next.js

Install Facebook Pixel

เริ่มจาก install package:
```
npm install react-facebook-pixel
```
Create a Pixel Tracker Component
```
// components/PixelTracker.ts
import { useEffect } from "react";
import ReactPixel from "react-facebook-pixel";
```
```
const PixelTracker = () => {
  useEffect(() => {
    const pixelId = "YOUR_PIXEL_ID";
    ReactPixel.init(pixelId);
    ReactPixel.pageView();
  }, []);
  return null;
};
export default PixelTracker;
```
ใส่ Tracker เช้าไปใน Layout
```
// app/layout.tsx
import dynamic from "next/dynamic";
```
```
const PixelTracker = dynamic(() => import("../components/PixelTracker"), { ssr: false });
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        {/* Meta Pixel Code */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?                         
              n.callMethod.apply(n,arguments):n.queue.push   
              (arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!
              0;n.version='2.0';n.queue=[];t=b.createElement(e);
              t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,
              'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', 'YOUR_PIXEL_ID');
              fbq('track', 'PageView');
            `,
          }}
        />
        <noscript>
          <img
            height="1"
            width="1"
            style={{ display: "none" }}
            src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=
            PageView&noscript=1"/>
        </noscript>
        {/* End Meta Pixel Code */}
      </head>
      <body>
        <PixelTracker />
        {children}
      </body>
    </html>
  );
}
```
การทำแบบนี้จะช่วยให้แน่ใจว่าโค้ดตัวติดตามและเมตาพิกเซลถูกฝังอยู่ในแอปพลิเคชันของคุณอย่างถูกต้อง

Pixel ID ถูกใช้ตามตัวอย่าง ทั้งในส่วนของคอมโพเนนต์ PixelTracker และ<Head> meta ก็ใช้ Pixel ID ตามนี้

เพื่อตรวจสอบว่า Facebook Pixel ทำงานปกติและ Pixel ID ถูกติดตั้งอย่างถูกต้อง ให้ทำตามขั้นตอนนี้เพื่อเช็คในแท็บ Network ของเบราว์เซอร์
- เปิดเว็บไซต์ในเบราว์เซอร์ (เช่น Chrome)
- คลิกขวาที่ไหนก็ได้บนหน้าเว็บ แล้วเลือก “ตรวจสอบ” (Inspect)
- ไปที่แท็บ “เครือข่าย” (Network) ใน Developer Tools
1. รีโหลด ในขณะที่อยู่ใน Developer Tools
2. ในแท็บ Network ให้พิมพ์ Your_Pixel_ID ในช่องค้นหาเพื่อกรองผลลัพธ์
March 4, 2025
Add Google Analytics to Next.Js
Google Analytics เป็นเครื่องมือวิเคราะห์เว็บที่ทรงพลัง ซึ่งให้ข้อมูลเชิงลึกที่มีค่าเกี่ยวกับการเข้าชมเว็บไซต์ของคุณและติดตามพฤติกรรมของผู้ใช้ การรวม Google Analytics เข้ากับแอปพลิเคชัน Next.js ของคุณจะช่วยให้คุณสามารถติดตามและวิเคราะห์การโต้ตอบของผู้ใช้ วัดผลประสิทธิภาพของแคมเปญการตลาด และตัดสินใจโดยอิงตามข้อมูล เราจะมาสำรวจขั้นตอนในการตั้งค่า Google Analytics (gtag.js) ในแอปพลิเคชัน Next.js กัน

การตั้งค่าบัญชี Google analytics
- ก่อนอื่น ให้เข้าไปที่ Google Analytics Website และลงชื่อสมัครใช้ด้วยบัญชี Google ของคุณ
- เริ่มต้นการตั้งค่าบัญชี จากนั้นสร้างคุณสมบัติ (property) ใหม่สำหรับแอปพลิเคชัน Next.js ของคุณ และกรอกข้อมูลที่ระบบขอ เมื่อเสร็จสิ้นการตั้งค่า คุณจะถูกนำไปยังหน้าแพลตฟอร์มใหม่สำหรับบัญชีของคุณ
- เลือกแพลตฟอร์มสำหรับโปรเจกต์ของคุณ ในกรณีนี้จะเป็น เว็บ (web)
- กรอก URL ของเว็บไซต์ที่แอปพลิเคชัน Next.js และตั้งชื่อที่ต้องการ จากนั้นคลิกที่ สร้างสตรีม (Create Stream) เพื่อดำเนินการต่อ
- เมื่อสร้างสตรีมคุณสมบัติ (property stream) เรียบร้อยแล้ว คุณจะถูกนำไปยังหน้าเพจที่คล้ายกับด้านล่าง ให้จดหมายเลข Property ID ไว้ โดยควรอยู่ในรูปแบบ G-XXXXXXXXX
Initialize Next.js project

ตั้งค่าโปรเจกต์ Next.js ของคุณตามข้อกำหนดของ https://nextjs.org/
```
npx create-next-app@latest your-next-app
```
Environment variables

ใน root directory ของโปรเจกต์ของคุณ ควรจะมีไฟล์ environment (.env) หากยังไม่มี คุณสามารถสร้างไฟล์โดยใช้ชื่อนี้ได้ เพิ่ม Property ID ที่เราคัดลอกไว้ก่อนหน้านี้ลงในไฟล์นี้
```
NEXT_PUBLIC_GOOGLE_ANALYTICS= 'G-XXXXXXXX'
```
Create a google analytics Component

สร้างโฟลเดอร์ components หรือโฟลเดอร์อื่นที่คุณต้องการไว้นอกเหนือจากไดเรกทอรี app แต่อยู่ภายในไดเรกทอรีโปรเจกต์ของคุณ โดยควรอยู่ในไดเรกทอรี src เป็นหลัก จากนั้น ในโฟลเดอร์ components ให้สร้างไฟล์ชื่อ GoogleAnalytics.tsx
ในไฟล์ดังกล่าว ให้คัดลอกโค้ดด้านล่างนี้และบันทึกไฟล์
```
import Script from "next/script";

const GoogleAnalytics = ({ ga_id }: { ga_id: string }) => (
  <>
    <Script
      async
      src={`https://www.googletagmanager.com/gtag/js? 
      id=${ga_id}`}
    ></Script>
    <Script
      id="google-analytics"
      dangerouslySetInnerHTML={{
        __html: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${ga_id}');
        `,
      }}
    ></Script>
  </>
);
export default GoogleAnalytics;
```
Render the component in the Layout file

ในไฟล์ layout.tsx ราก (root) ที่อยู่ในไดเรกทอรี app ให้นำเข้า (import) คอมโพเนนต์ GoogleAnalytics ของคุณดังนี้:
```
import GoogleAnalytics from "~/components/GoogleAnalytics";
```
จากนั้น คุณสามารถแก้ไขโค้ดของคุณให้ตรงกับรูปแบบด้านล่างนี้ได้
```
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
      <html lang="en">
        <body>
          {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS && (
            <GoogleAnalytics ga_id= 
            {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
          )}
          // ... your other code content here.
        </body>
      </html>
  );
}
```
Run your app

บนเทอร์มินัล ให้รันคำสั่งต่อไปนี้เพื่อเริ่มแอปพลิเคชัน
```
npm run dev
```
On the browser, navigate to your next app live url, most likely it will be http://localhost:3000
Open the browser console.
On the console, type datalayer. If you see an output similar to the one below then, Yaay 🎉 you did it!

บนเบราว์เซอร์ ให้ไปที่ URL ของแอป Next.js

http://localhost:3000
เปิดคอนโซลของเบราว์เซอร์
ในคอนโซล ให้พิมพ์ datalayer หากคุณเห็นผลลัพธ์ที่คล้ายกับด้านล่างนี้ แล้วล่ะก็ ยินดีด้วย 🎉 คุณทำสำเร็จแล้ว!

Host your app

If you are planning to host your site, be sure to add your property in your hosting service project settings. You should find the environment variables settings and add you ID with the same keyname as used in the project .env.local file.

You can now go to the analytics dashboard and click on the live button, where you will see the information about the application in real-time!
February 25, 2025

Hi 👋, how can we help?