วิธีสร้างหน้า Landing Page สำหรับตัวแทนจำหน่ายให้รองรับหลายประเทศ

หากคุณทำงานร่วมกับตัวแทนจำหน่ายและดำเนินการร้านค้าออนไลน์บน โดเมนที่แตกต่างกันตามประเทศ การสร้างหน้า Landing Page ที่สะอาดและเพิ่มประสิทธิภาพการแปลงเป็นสิ่งสำคัญ ซึ่งสามารถปรับเปลี่ยนอัตโนมัติตามรหัสอ้างอิงของตัวแทนจำหน่ายได้ในบทเรียนสั้นๆ นี้ เราจะแสดงวิธีสร้างหน้า Landing Page ที่เรียบง่ายและตอบสนองได้สำหรับตัวแทนจำหน่ายของคุณ ซึ่งสามารถส่งผ่านรหัสการอ้างอิง (ref) ไปยังโดเมนตามประเทศอย่างอัตโนมัติ เช่น:

• 🇺🇸 en.selldone.com
• 🇬🇧 uk.selldone.com
• 🇩🇰 da.selldone.com
• 🇫🇷 fr.selldone.com

การตั้งค่านี้เหมาะอย่างยิ่งเมื่อคุณใช้ร้านค้าที่เจาะจงตามประเทศต่างๆ และต้องการให้ลิงก์ของตัวแทนจำหน่ายของคุณเป็นศูนย์กลาง

🎯 สิ่งที่เรากำลังสร้าง

• หน้า Landing Page ที่เรียบง่ายแต่มีสไตล์ซึ่งมีองค์ประกอบดังนี้:
• หัวข้อ: "Exalted Fashion"
• ประโยคใต้หัวข้อ: "เลือกประเทศของคุณเพื่อเริ่มช้อปปิ้ง..."
• ปุ่มประเทศใหญ่ๆ สี่ปุ่ม แต่ละปุ่มมีธงของประเทศ
• การจัดการรหัสอ้างอิงจาก URL อย่างอัตโนมัติ

นี่คือลักษณะสุดท้ายของงาน (เลื่อนลงเพื่อดูโค้ด):

✅ HTML + JS Code (พร้อมใช้งาน)

คุณสามารถคัดลอกและวางโค้ดต่อไปนี้ลงในไฟล์ .html ใด ๆ และโฮสต์บนเซิร์ฟเวอร์ของคุณ:%7B%22html%22%3A%22%3C!DOCTYPE%20html%3E%5Cn%3Chtml%20lang%3D%5C%22en%5C%22%3E%5Cn%3Chead%3E%5Cn%20%20%3Cmeta%20charset%3D%5C%22UTF-8%5C%22%20%2F%3E%5Cn%20%20%3Cmeta%20name%3D%5C%22viewport%5C%22%20content%3D%5C%22width%3Ddevice-width%2C%20initial-scale%3D1.0%5C%22%2F%3E%5Cn%20%20%3Ctitle%3ESelldone%20Fashion%3C%2Ftitle%3E%5Cn%20%20%3Cstyle%3E%5Cn%20%20%20%20body%20%7B%5Cn%20%20%20%20%20%20font-family%3A%20'Inter'%2C%20sans-serif%3B%5Cn%20%20%20%20%20%20background-color%3A%20%23f9f9f9%3B%5Cn%20%20%20%20%20%20margin%3A%200%3B%5Cn%20%20%20%20%20%20padding%3A%200%3B%5Cn%20%20%20%20%20%20display%3A%20flex%3B%5Cn%20%20%20%20%20%20flex-direction%3A%20column%3B%5Cn%20%20%20%20%20%20min-height%3A%20100vh%3B%5Cn%20%20%20%20%20%20color%3A%20%23222%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20main%20%7B%5Cn%20%20%20%20%20%20flex%3A%201%3B%5Cn%20%20%20%20%20%20display%3A%20flex%3B%5Cn%20%20%20%20%20%20flex-direction%3A%20column%3B%5Cn%20%20%20%20%20%20align-items%3A%20center%3B%5Cn%20%20%20%20%20%20justify-content%3A%20center%3B%5Cn%20%20%20%20%20%20padding%3A%202rem%201rem%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20h1%20%7B%5Cn%20%20%20%20%20%20font-size%3A%202.5rem%3B%5Cn%20%20%20%20%20%20margin-bottom%3A%200.5rem%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20p.instruction%20%7B%5Cn%20%20%20%20%20%20font-size%3A%201.1rem%3B%5Cn%20%20%20%20%20%20margin-bottom%3A%202rem%3B%5Cn%20%20%20%20%20%20color%3A%20%23555%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20.buttons%20%7B%5Cn%20%20%20%20%20%20display%3A%20flex%3B%5Cn%20%20%20%20%20%20flex-direction%3A%20column%3B%5Cn%20%20%20%20%20%20gap%3A%201rem%3B%5Cn%20%20%20%20%20%20width%3A%20100%25%3B%5Cn%20%20%20%20%20%20max-width%3A%20400px%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20.country-button%20%7B%5Cn%20%20%20%20%20%20padding%3A%201.2rem%3B%5Cn%20%20%20%20%20%20font-size%3A%201.25rem%3B%5Cn%20%20%20%20%20%20background-color%3A%20%23fff%3B%5Cn%20%20%20%20%20%20border%3A%202px%20solid%20%23ddd%3B%5Cn%20%20%20%20%20%20border-radius%3A%2012px%3B%5Cn%20%20%20%20%20%20cursor%3A%20pointer%3B%5Cn%20%20%20%20%20%20transition%3A%20all%200.2s%20ease%3B%5Cn%20%20%20%20%20%20text-decoration%3A%20none%3B%5Cn%20%20%20%20%20%20color%3A%20%23222%3B%5Cn%20%20%20%20%20%20text-align%3A%20center%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20.country-button%3Ahover%20%7B%5Cn%20%20%20%20%20%20background-color%3A%20%23eee%3B%5Cn%20%20%20%20%20%20border-color%3A%20%23ccc%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20%40media%20(min-width%3A%20600px)%20%7B%5Cn%20%20%20%20%20%20.buttons%20%7B%5Cn%20%20%20%20%20%20%20%20flex-direction%3A%20row%3B%5Cn%20%20%20%20%20%20%20%20flex-wrap%3A%20wrap%3B%5Cn%20%20%20%20%20%20%20%20justify-content%3A%20center%3B%5Cn%20%20%20%20%20%20%7D%5Cn%5Cn%20%20%20%20%20%20.country-button%20%7B%5Cn%20%20%20%20%20%20%20%20flex%3A%201%201%2040%25%3B%5Cn%20%20%20%20%20%20%7D%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20footer%20%7B%5Cn%20%20%20%20%20%20padding%3A%201rem%3B%5Cn%20%20%20%20%20%20text-align%3A%20center%3B%5Cn%20%20%20%20%20%20font-size%3A%200.9rem%3B%5Cn%20%20%20%20%20%20color%3A%20%23888%3B%5Cn%20%20%20%20%20%20border-top%3A%201px%20solid%20%23eee%3B%5Cn%20%20%20%20%20%20background-color%3A%20%23fafafa%3B%5Cn%20%20%20%20%7D%5Cn%20%20%3C%2Fstyle%3E%5Cn%3C%2Fhead%3E%5Cn%3Cbody%3E%5Cn%5Cn%20%20%3Cmain%3E%5Cn%20%20%20%20%3Ch1%3ESelldone%20Fashion%3C%2Fh1%3E%5Cn%20%20%20%20%3Cp%20class%3D%5C%22instruction%5C%22%3ESelect%20your%20country%20to%20start%20shopping...%3C%2Fp%3E%5Cn%5Cn%20%20%20%20%3Cdiv%20class%3D%5C%22buttons%5C%22%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-us%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%BA%F0%9F%87%B8%20United%20States%3C%2Fa%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-de%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%A9%F0%9F%87%AA%20Germany%3C%2Fa%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-dk%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%A9%F0%9F%87%B0%20Denmark%3C%2Fa%3E%5Cn%20%20%20%20%20%20%3Ca%20id%3D%5C%22btn-fr%5C%22%20class%3D%5C%22country-button%5C%22%3E%F0%9F%87%AB%F0%9F%87%B7%20France%3C%2Fa%3E%5Cn%20%20%20%20%3C%2Fdiv%3E%5Cn%20%20%3C%2Fmain%3E%5Cn%5Cn%20%20%3Cfooter%3E%5Cn%20%20%20%20%C2%A9%20%3Cspan%20id%3D%5C%22year%5C%22%3E%3C%2Fspan%3E%20Selldone.%20All%20rights%20reserved.%5Cn%20%20%3C%2Ffooter%3E%5Cn%5Cn%20%20%3Cscript%3E%5Cn%20%20%20%20function%20getRefParam()%20%7B%5Cn%20%20%20%20%20%20const%20params%20%3D%20new%20URLSearchParams(window.location.search)%3B%5Cn%20%20%20%20%20%20return%20params.get(%5C%22ref%5C%22)%20%7C%7C%20%5C%22%5C%22%3B%5Cn%20%20%20%20%7D%5Cn%5Cn%20%20%20%20const%20ref%20%3D%20getRefParam()%3B%5Cn%5Cn%20%20%20%20document.getElementById(%5C%22btn-us%5C%22).href%20%3D%20%60https%3A%2F%2Fen.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%20%20%20%20document.getElementById(%5C%22btn-de%5C%22).href%20%3D%20%60https%3A%2F%2Fde.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%20%20%20%20document.getElementById(%5C%22btn-dk%5C%22).href%20%3D%20%60https%3A%2F%2Fda.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%20%20%20%20document.getElementById(%5C%22btn-fr%5C%22).href%20%3D%20%60https%3A%2F%2Ffr.selldone.com%3Fref%3D%24%7Bref%7D%60%3B%5Cn%5Cn%20%20%20%20%2F%2F%20Set%20current%20year%20in%20footer%5Cn%20%20%20%20document.getElementById(%5C%22year%5C%22).textContent%20%3D%20new%20Date().getFullYear()%3B%5Cn%20%20%3C%2Fscript%3E%5Cn%5Cn%3C%2Fbody%3E%5Cn%3C%2Fhtml%3E%5Cn%22%7D

🔧 การทำงาน

• การดึงรหัสการอ้างอิง: ใช้ URLSearchParams เพื่อรับพารามิเตอร์ ref จาก URL
• การเปลี่ยนเส้นทางการทำงานแบบไดนามิก: เมื่อผู้ใช้คลิกที่ปุ่ม สคริปต์จะเปลี่ยนเส้นทางไปยังโดเมนประเทศที่เหมาะสมและส่งรหัส ref อย่างอัตโนมัติ
• การออกแบบที่ตอบสนอง: มีการตอบสนองที่ดีต่อลูกค้าและมีปุ่มที่ใหญ่และเข้าถึงได้ง่าย ใช้ Flexbox เพื่อให้ขนาดแน่นอน

💡 เหตุใดจึงมีประโยชน์

• ลิงก์เดียวสำหรับตัวแทนจำหน่ายทั้งหมด: พวกเขาเพียงแค่เชื่อมโยงไปที่ xyz.com/?ref=XXXX.
• ประสบการณ์ท้องถิ่น: ลูกค้าจะถูกเปลี่ยนเส้นทางไปยังโดเมนร้านค้าที่ตรงกับภูมิภาคของพวกเขา
• ไม่จำเป็นต้องมีแบ็กเอนด์: นี่คือโซลูชั่นฝั่งลูกค้าทั้งหมด

🧪 ตัวอย่าง URL

เมื่อเยี่ยมชม:

https://xyz.com/?ref=AFF12345

เมื่อคลิกปุ่ม 🇩🇰 เดนมาร์ก จะเปลี่ยนทางไปที่:

https://da.selldone.com/?ref=AFF12345

🚀 ขั้นตอนต่อไป

1. นำหน้าดังกล่าวไปไว้ในเอกสารประกอบของตัวแทนจำหน่ายของคุณ
2. แบ่งปันลิงก์พื้นฐาน https://xyz.com/?ref=YOURCODE กับพันธมิตรของคุณ
3. คุณสามารถเพิ่มรายชื่อปุ่มด้วยประเทศใหม่ได้ในภายหลังโดยใช้รูปแบบเดียวกัน

ปรับแต่ง Landing Page ของคุณใน ChatGPT

คุณสามารถปรับแต่งหน้านี้ตามความต้องการของคุณได้โดยใช้ ChatGPT ที่ลิงค์ต่อไปนี้:

⚡ วิธีปรับใช้หน้า

คุณมีสองตัวเลือกที่ง่ายในการเผยแพร่หน้า Landing Page ของตัวแทนจำหน่ายแบบไดนามิกของคุณ:

ตัวเลือกที่ 1. ปรับใช้ในร้าน Selldone ของคุณ:

เข้าสู่ระบบแผงควบคุมของ Selldone ไปที่ Pages > Static แล้วสร้างโฟลเดอร์ (เช่น affiliate) อัปโหลดไฟล์ HTML ของคุณในชื่อ index.html ภายในโฟลเดอร์นี้ จากนั้นไปที่ส่วนโดเมน เพิ่มโดเมนหรือซับโดเมนใหม่ แล้วกำหนดให้เป็นหน้า static ใหม่โดยการตั้งค่าเส้นทางไปยังโฟลเดอร์ affiliate

ตัวเลือกที่ 2. ปรับใช้ฟรีบน Cloudflare Pages (แนะนำ):

คุณยังสามารถโฮสต์หน้าของคุณได้ฟรีโดยใช้ Cloudflare Pages ทำการสร้างโปรเจกต์ใหม่ ลากและวางไฟล์ index.html ของคุณ แล้วปรับใช้ เมื่อมันเป็นทางการแล้ว ให้กำหนดซับโดเมนหรือโดเมนที่กำหนดเองใน Cloudflare เพื่อให้หน้าสามารถเข้าถึงได้บนเว็บทั้งสองวิธีนี้ทำให้คุณสามารถแชร์หน้าแบรนด์ที่โหลดได้รวดเร็วพร้อมการติดตามการอ้างอิงที่รวมอยู่แล้ว