สร้างลิงก์ UTM Campaign ฟรี

วิธีการทำงาน

ตัวสร้าง UTM ประกอบ URL ติดตามในเบราว์เซอร์ทั้งหมดด้วย URL และ URLSearchParams API มาตรฐาน — ไม่มีเซิร์ฟเวอร์ ไม่มีการอัปโหลด ขณะพิมพ์ useMemo hook สดจะแยกวิเคราะห์ URL ฐาน ตรวจชื่อโฮสต์ และต่อเฉพาะพารามิเตอร์ UTM ที่คุณกรอก

1. 1
   แยกวิเคราะห์และตรวจสอบ URL

   URL ฐานของคุณถูกป้อนเข้าคอนสตรัคเตอร์ URL ในตัวของเบราว์เซอร์ เครื่องมือเติม https:// อัตโนมัติหากไม่มีสคีม แล้วตรวจว่าชื่อโฮสต์มีจุดอย่างน้อยหนึ่งจุด (หรือเป็น localhost) — ปฏิเสธข้อความอิสระก่อนที่จะทำให้ผลลัพธ์เสีย
2. 2
   ต่อพารามิเตอร์ UTM ผ่าน URLSearchParams

   แต่ละช่องที่กรอก (source, medium, campaign, term, content) ถูกเขียนลงออบเจกต์ search-params ของ URL ด้วย URLSearchParams.set() หากเปิดสวิตช์ตัวพิมพ์เล็ก ค่าจะถูกแปลงเป็นตัวพิมพ์เล็ก ณ จุดนี้ ป้องกันการระบุแหล่งที่มาไม่ตรงกันจากตัวพิมพ์ที่ไม่สอดคล้อง
3. 3
   QR code เรนเดอร์ด้วยไลบรารี qrcode

   ทุกครั้งที่ URL สุดท้ายเปลี่ยน ไลบรารี qrcode จะเรนเดอร์ data-URL 256 px สำหรับตัวอย่างในหน้า และวาดเวอร์ชัน 1024 px ลงบน canvas นอกจอพร้อมกัน จากนั้น canvas ถูกแปลงเป็น Blob PNG ผ่าน canvas.toBlob() ปุ่มดาวน์โหลดจึงบันทึกแบบซิงโครนัสได้ — จำเป็นบน iOS ซึ่งบล็อกการสร้าง Blob แบบ async ภายในตัวจัดการคลิก
4. 4
   เทมเพลตที่แชร์ได้ผ่าน hash ของหน้า

   สถานะฟอร์ม (URL ฐานและค่า UTM) ถูกเข้ารหัสลงใน fragment ของ URL หน้าอย่างต่อเนื่องด้วย window.history.replaceState ใครก็ตามที่เปิด URL ที่มี hash นั้นจะได้ฟอร์มที่กรอกไว้แล้ว คุณจึงบันทึกหรือแชร์เทมเพลตแคมเปญได้โดยไม่ต้องจัดเก็บบนเซิร์ฟเวอร์

เครื่องมือที่เกี่ยวข้อง