အခမဲ့ UTM ကမ်ပိန်းလင့်ခ်တည်ဆောက်စက်

မည်သို့ အလုပ်လုပ်သည်

UTM builder သည် standard URL and URLSearchParams API များကို သုံး၍ tracking URL များကို browser ထဲတွင် လုံးဝ ပေါင်းစည်းပါသည် — server, upload မပါဝင်ပါ။ ရိုက်နေစဉ် live useMemo hook တစ်ခုသည် သင့် base URL ကို parse လုပ်ပြီး hostname ကို စစ်ဆေးကာ သင်ဖြည့်ထားသော UTM parameter များကိုသာ ထည့်ပေးသည်။

1. 1
   URL parsing နှင့် validation

   သင့် base URL ကို browser ၏ built-in URL constructor သို့ ပေးပို့သည်။ Scheme မရှိပါက ကိရိယာသည် https:// ကို auto-prepend လုပ်ပြီး hostname တွင် dot အနည်းဆုံး တစ်ခု (သို့ localhost) ရှိကြောင်း စစ်ဆေးသည် — free-form ရေးသားချက်ကို output ကို မပျက်စီးမီ ငြင်းပယ်သည်။
2. 2
   URLSearchParams မှတစ်ဆင့် UTM parameter များ ထည့်ထားသည်

   ဖြည့်ထားသော field တစ်ခုစီ (source, medium, campaign, term, content) ကို URLSearchParams.set() ဖြင့် URL ၏ search-params object သို့ ရေးသည်။ Lowercase toggle ဖွင့်ထားပါက တန်ဖိုးများကို ဤအဆင့်တွင် အက္ခရာသေးပြောင်းသည်၊ ၎င်းသည် capitalisation ကွဲပြားမှုကြောင့် ဖြစ်သော attribution ကိုက်ညီမှု မရှိခြင်းကို ကာကွယ်သည်။
3. 3
   qrcode library က render လုပ်ထားသော QR code

   Final URL ပြောင်းလဲတိုင်း qrcode library သည် inline preview အတွက် 256-px data-URL တစ်ခု render လုပ်ပြီး တစ်ပြိုင်နက် off-screen canvas ပေါ်တွင် 1024-px version တစ်ခု ဆွဲသည်။ Canvas ကို canvas.toBlob() မှတစ်ဆင့် PNG Blob သို့ serialize လုပ်ထားသဖြင့် download ခလုတ်သည် synchronously သိမ်းနိုင်သည် — click handler အတွင်း async Blob ဖန်တီးခြင်းကို ပိတ်ဆို့ထားသော iOS တွင် လိုအပ်သည်။
4. 4
   စာမျက်နှာ hash မှတစ်ဆင့် မျှဝေနိုင်သော template

   Form state (base URL ပေါင်း UTM value မည်သည်ကိုမဆို) ကို window.history.replaceState ကို သုံး၍ စာမျက်နှာ၏ URL fragment ထဲသို့ ဆက်လက် encode လုပ်ထားသည်။ ထို hash ပါသော URL ကို ဖွင့်သူတိုင်းသည် form ကို ကြိုတင်ဖြည့်ထားသည်ကို ရရှိသဖြင့် server-side storage မလိုဘဲ campaign template တစ်ခုကို သိမ်း (သို့) မျှဝေနိုင်သည်။

ဆက်နွှယ်သော ကိရိယာများ