Custom JavaScript Variable: พลิกแพลงการเก็บข้อมูลด้วย Code

ในบทนี้เราจะมาพูดถึง Custom JavaScript Variable ซึ่งเป็นฟีเจอร์ที่ผมชอบที่สุดใน GTM เพราะมันทำให้เราสามารถ "สร้างข้อมูลใหม่" ขึ้นมาได้เอง โดยไม่ต้องง้อ Developer หลังบ้าน (หรือถ้าเราเป็น Dev เอง ก็ยิ่งสนุกครับ)

หลักการของมันง่ายมากครับ: "เขียนฟังก์ชัน 1 ตัว แล้ว Return ค่าที่เราอยากได้ออกมา"

รูปแบบมาตรฐาน (The Pattern)

เวลาเราสร้างตัวแปรประเภทนี้ เราต้องเขียน Code ให้อยู่ในรูปแบบของ Anonymous Function (ฟังก์ชันไม่มีชื่อ) ที่ต้องมีการ return ค่าเสมอครับ

function() {
  // 1. คำนวณหรือหาค่า
  var result = "ค่าที่ต้องการ";

  // 2. ส่งค่ากลับออกไป (สำคัญมาก! ถ้าไม่มี return ค่าจะเป็น undefined)
  return result;
}

Use Case 1: ดึงราคาสินค้า (แล้วตัดหน่วยทิ้ง)

สมมติหน้าเว็บเราแสดงราคาว่า ฿1,500.00 แต่เวลาส่งเข้า GA4 หรือ Facebook Pixel เขาต้องการแค่ตัวเลข 1500.00 (ไม่เอาตัวอักษร ฿)

ถ้าใช้ Variable ทั่วไปเราจะได้ตัว ฿ ติดมาด้วย แต่ถ้าใช้ Custom JS เราสั่งลบได้เลยครับ

วิธีทำ:

1. ไปที่ Variables -> New
2. เลือก Custom JavaScript
3. วาง Code นี้ลงไป (เปลี่ยน Selector ให้ตรงกับเว็บเพื่อน ๆ นะครับ):

function() {
  // หา Element ที่มี class ชื่อ 'product-price'
  var priceElement = document.querySelector('.product-price');

  if (priceElement) {
    var text = priceElement.innerText; // ได้ค่า "฿1,500.00"
    // ลบตัว ฿ และลูกน้ำ (,) ออก
    return text.replace(/[฿,]/g, '').trim(); 
  }

  return undefined; // ถ้าหาไม่เจอ ให้คืนค่าว่าง
}

ผลลัพธ์: GTM จะได้ค่า 1500.00 ไปใช้งานต่อได้ทันที!

Use Case 2: เปลี่ยน Text ให้เป็น Lowercase (เพื่อความเป๊ะ)

เคยเจอปัญหาไหมครับ? คนหนึ่งพิมพ์ "Purchase", อีกคนพิมพ์ "purchase", อีกหน้าเป็น "PURCHASE" เวลาดู Report ใน GA4 ข้อมูลมันแยกกันหมดเลย

เราสามารถเขียน Script บังคับให้ทุกอย่างเป็นตัวพิมพ์เล็ก (Lowercase) ก่อนส่งได้ครับ

function() {
  var category = {{Click Text}}; // ดึงค่าจากตัวแปร Built-in มา

  if (category) {
    return category.toLowerCase(); // แปลงเป็นตัวพิมพ์เล็ก
  }

  return undefined;
}

ผลลัพธ์: ไม่ว่าหน้าเว็บจะเขียนยังไง ส่งเข้า GA4 จะเป็นตัวพิมพ์เล็กเสมอ ข้อมูลสะอาดขึ้นเยอะครับ

Use Case 3: ดึงข้อมูลจาก Meta Tag (สาย SEO ต้องรู้!)

บางทีเราอยากรู้ว่า "คนอ่านบทความหมวดหมู่ไหนมากสุด?" หรือ "ใครเป็นคนเขียนบทความนี้?" ข้อมูลพวกนี้มักซ่อนอยู่ใน Meta Tag บนหัวเว็บครับ

function() {
  // ดึงค่าจาก <meta name="author" content="Son WebMastery">
  var meta = document.querySelector('meta[name="author"]');

  return meta ? meta.content : undefined;
}

การนำไปใช้: เอาตัวแปรนี้ไปใส่ใน GA4 Event Parameter ชื่อ author_name ทีนี้เราก็วัดผล Writers ในทีมได้แล้วครับ!

ข้อควรระวัง (Do's & Don'ts)

1. ต้องมี return เสมอ: ถ้าลืม return ตัวแปรนี้จะไม่มีค่าอะไรเลย
2. ระวังเรื่อง Performance: อย่าเขียน Loop หนัก ๆ หรือดึงข้อมูลซับซ้อนเกินไป เพราะ Script นี้จะรันทุกครั้งที่ Trigger ทำงาน อาจทำให้เว็บหน่วงได้
3. Check Null เสมอ: ก่อนจะดึงค่า .innerText หรือ .content ต้องเช็คก่อนว่า Element นั้นมีอยู่จริงไหม (เหมือนตัวอย่างที่ผมใส่ if ไว้) ไม่งั้น JavaScript จะ Error ครับ

สรุปบทเรียน

Custom JavaScript Variable คือเครื่องมือที่เปลี่ยนให้ GTM เป็นมากกว่าแค่ "ตัวส่งข้อมูล" แต่เป็น "ตัวประมวลผลข้อมูล" เบื้องต้นได้ครับ

Tip: เพื่อน ๆ สามารถใช้ try { ... } catch(e) { ... } ใน Custom JS ได้นะครับ เพื่อกันไม่ให้ Script พังเวลาเจอ Error ที่ไม่คาดคิด — Son, WebMastery.dev