Як створити динамічну партнерську цільову сторінку для кількох країн

Якщо ви працюєте з партнерами та керуєте вашим інтернет-магазином на різних доменах для кожної країни, важливо створити чисту та оптимізовану для конверсій цільову сторінку, яка автоматично адаптується на основі коду реферера партнера.У цьому короткому посібнику ми покажемо, як створити мінімальну та адаптивну цільову сторінку для ваших партнерів, яка автоматично передає реферальний код (ref) на домени для конкретних країн, такі як:

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

Це налаштування є ідеальним, коли ви використовуєте різні магазини для кожної країни і хочете зберегти ваші партнерські посилання централізованими.

🎯 Що ми будуємо

• Проста, але стильна цільова сторінка з:
• Заголовком: "Exalted Fashion"
• Підзаголовком: "Обирайте свою країну, щоб почати покупки..."
• Чотири великі кнопки країни, кожна з прапором країни
• Автоматичною обробкою реферального коду з URL

Ось підсумковий результат (перегляньте код далі):

✅ HTML + JS Код (готовий до використання)

Ви можете скопіювати наступний код у будь-який .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.
• Динамічне перенаправлення: Коли користувач натискає кнопку, скрипт перенаправляє його на відповідний домен країни та автоматично передає реферальний код.
• Адаптований дизайн: Макет зручний для мобільних пристроїв з великими, доступними кнопками. Використовується Flexbox для забезпечення послідовності розмірів.

💡 Чому це корисно

• Одне посилання для всіх партнерів: Їм потрібно тільки посилатися на xyz.com/?ref=XXXX.
• Локалізований досвід: Клієнти перенаправляються на домен магазину, що відповідає їхньому регіону.
• Не потрібен сервер: Це статичне, повністю клієнтське рішення.

🧪 Приклад URL

Відвідання URL:

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

Натискання кнопки 🇩🇰 Denmark перенаправляє на:

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

🚀 Наступні кроки

1. Вбудуйте цю сторінку у вашу документацію для партнерів.
2. Поділіться базовим посиланням https://xyz.com/?ref=YOURCODE з вашими партнерами.
3. Ви можете розширити список кнопок, додавши більше країн з використанням того ж формату.

Налаштуйте вашу цільову сторінку в ChatGPT

Ви можете налаштувати цю сторінку під ваші потреби, використовуючи ChatGPT за наступним посиланням:

⚡ Як розгорнути сторінку

У вас є два прості варіанти публікації вашої динамічної партнерської цільової сторінки:

Варіант 1. Розгорніть на вашому магазині Selldone:

Увійдіть у вашу панель керування Selldone, перейдіть до Сторінки > Статичні, і створіть папку (наприклад, affiliate). Завантажте ваш HTML файл як index.html в цю папку. Потім перейдіть до розділу Доменів, додайте новий домен або піддомен і призначте його для нової статичної сторінки, вказавши шлях до папки affiliate.

Варіант 2. Розгорніть безкоштовно на Cloudflare Pages (рекомендується):

Ви також можете хостити вашу сторінку безкоштовно, використовуючи Cloudflare Pages. Просто створіть новий проект, перетягніть і відпустіть ваш файл index.html та розгорніть його. Після того як це стане доступним онлайн, призначте власний піддомен (або домен) у Cloudflare, щоб зробити сторінку доступною в інтернеті.Обидва методи дозволяють ділитися брендованою, швидкозавантажуваною партнерською сторінкою з включеним відстеженням рефералів.