Cách Tạo Trang Đích Liên Kết Động Cho Nhiều Quốc Gia

Nếu bạn đang làm việc với các đối tác liên kết và chạy cửa hàng thương mại điện tử của mình trên nhiều miền khác nhau cho mỗi quốc gia, việc xây dựng một trang đích sạch sẽ và tối ưu hóa chuyển đổi là rất quan trọng, trang này tự động thích ứng dựa trên mã giới thiệu của đối tác liên kết.Trong hướng dẫn ngắn này, chúng tôi sẽ chỉ cho bạn cách tạo một trang đích tối giản và phản hồi cho các đối tác của bạn, tự động truyền mã giới thiệu (ref) sang các miền riêng cho từng quốc gia như:

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

Cấu hình này là lý tưởng khi bạn đang sử dụng các cửa hàng dành riêng cho từng quốc gia và muốn giữ liên kết của đối tác ở trung tâm.

🎯 Chúng Ta Sẽ Xây Dựng Gì

• Một trang đích đơn giản nhưng phong cách với:
• Tiêu đề: "Thời Trang Nâng Cấp"
• Phụ đề: "Chọn quốc gia của bạn để bắt đầu mua sắm..."
• Bốn nút lớn với cờ của mỗi quốc gia
• Xử lý mã giới thiệu tự động từ URL

Đây là kết quả cuối cùng (kéo xuống để xem mã):

✅ Mã HTML + JS (Sẵn Sàng Sử Dụng)

Bạn có thể sao chép mã sau vào bất kỳ tệp .html nào và lưu trữ trên máy chủ của mình:%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

🔧 Cách Hoạt Động

• Trích Xuất Mã Giới Thiệu: Chúng tôi sử dụng URLSearchParams để lấy tham số ref từ URL hiện tại.
• Chuyển Hướng Động: Khi người dùng nhấp vào nút, script sẽ chuyển họ đến miền quốc gia phù hợp và tự động truyền mã ref.
• Thiết Kế Phản Hồi: Bố cục thân thiện với di động với các nút lớn dễ tiếp cận. Sử dụng Flexbox để có kích thước nhất quán.

💡 Tại Sao Điều Này Hữu Ích

• Một liên kết cho tất cả đối tác: Họ chỉ cần liên kết đến xyz.com/?ref=XXXX.
• Trải nghiệm địa phương hóa: Khách hàng được chuyển hướng đến miền cửa hàng phù hợp với khu vực của họ.
• Không cần backend: Đây là một giải pháp tĩnh, hoàn toàn từ phía khách hàng.

🧪 Ví Dụ URL

Truy cập:

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

Nhấp vào nút 🇩🇰 Đan Mạch sẽ chuyển hướng đến:

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

🚀 Các Bước Tiếp Theo

1. Nhúng trang này vào tài liệu đối tác của bạn.
2. Chia sẻ liên kết cơ bản https://xyz.com/?ref=YOURCODE với các đối tác của bạn.
3. Bạn có thể mở rộng danh sách nút với nhiều quốc gia hơn sau này bằng cách sử dụng cùng định dạng.

Tuỳ Chỉnh Trang Đích Của Bạn Trong ChatGPT

Bạn có thể tuỳ chỉnh trang này theo nhu cầu của bạn bằng cách sử dụng ChatGPT theo liên kết sau:

⚡ Cách Triển Khai Trang

Bạn có hai tùy chọn dễ dàng để xuất bản trang đích liên kết động của mình:

Lựa Chọn 1. Triển Khai trên Cửa Hàng Selldone Của Bạn:

Đăng nhập vào bảng điều khiển Selldone của bạn, đi đến Trang > Tĩnh, và tạo một thư mục (ví dụ: affiliate). Tải lên tệp HTML của bạn dưới dạng index.html bên trong thư mục này. Sau đó, vào mục Miền, thêm một miền hoặc tên miền phụ mới và gán nó cho trang tĩnh mới bằng cách đặt đường dẫn đến thư mục affiliate.

Lựa Chọn 2. Triển Khai Miễn Phí Trên Cloudflare Pages (được đề xuất):

Bạn cũng có thể lưu trữ trang của mình miễn phí bằng cách sử dụng Cloudflare Pages. Chỉ cần tạo một dự án mới, kéo và thả tệp index.html của bạn, và triển khai nó. Khi nó trực tuyến, gán một tên miền phụ tùy chỉnh (hoặc tên miền) trong Cloudflare để làm cho trang có thể truy cập trên web.Cả hai phương thức cho phép bạn chia sẻ một trang đích thương hiệu, tải nhanh với theo dõi giới thiệu được bao gồm.