여러 국가를 위한 동적 어필리에이트 랜딩 페이지 만들기

다양한 국가별 도메인에서 Selldone의 전자상거래 쇼핑몰을 운영하며 어필리에이트 마케팅을 진행하고 있다면, 어필리에이트 추천 코드에 따라 자동으로 적응하는 깔끔하고 전환 최적화된 랜딩 페이지를 구축하는 것이 중요합니다.이 짧은 튜토리얼에서는 어필리에이트를 위한 최소한의 반응형 랜딩 페이지를 만드는 방법을 소개하며, 이 페이지는 추천 코드(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를 사용하여 현재 URL에서 ref 파라미터를 가져옵니다.
• 동적 리디렉션: 사용자가 버튼을 클릭하면 스크립트가 자동으로 해당 국가 도메인으로 추천 코드를 전달하며 리디렉션합니다.
• 반응형 디자인: 모바일 친화적인 레이아웃으로 큰 버튼을 사용합니다. 일관된 크기를 위해 플렉스박스를 사용합니다.

💡 유용한 이유

• 모든 어필리에이트를 위한 한 링크: xyz.com/?ref=XXXX 링크만 사용하면 됩니다.
• 현지화된 경험: 고객이 해당 지역에 맞는 상점 도메인으로 리디렉션됩니다.
• 백엔드가 필요 없습니다: 이 솔루션은 정적이며 완전히 클라이언트 사이드 기반입니다.

🧪 예제 URL

예제:

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

🇩🇰 덴마크 버튼을 클릭하면 다음으로 리디렉션됩니다:

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

🚀 다음 단계

1. 어필리에이트 문서에 이 페이지를 포함하세요.
2. 기본 링크 https://xyz.com/?ref=YOURCODE를 파트너와 공유하세요.
3. 나중에 같은 형식으로 더 많은 국가를 버튼 리스트에 추가할 수 있습니다.

ChatGPT에서 랜딩 페이지 사용자 정의

다음 링크에서 ChatGPT를 사용하여 페이지를 필요에 맞게 사용자 정의할 수 있습니다:

⚡ 페이지 배포 방법

두 가지 쉬운 옵션으로 동적 어필리에이트 랜딩 페이지를 게시할 수 있습니다:

옵션 1. Selldone 가게에 배포:

Selldone 대시보드에 로그인하고, 페이지 > 정적으로 이동한 후 폴더 (예: affiliate)를 만듭니다. HTML 파일을 index.html 로 이 폴더에 업로드합니다. 그런 다음, 도메인 섹션으로 가서 새 도메인이나 서브도메인을 추가하고, 경로를 어필리에이트 폴더로 설정하여 새 정적 페이지에 할당합니다.

옵션 2. Cloudflare Pages에 무료로 배포 (권장):

Cloudflare Pages를 사용하여 페이지를 무료로 호스팅할 수도 있습니다. 새 프로젝트를 만들고 index.html 파일을 드래그 앤 드롭하여 배포합니다. 라이브로 실행되면 Cloudflare에서 사용자 정의 서브도메인(또는 도메인)을 할당하여 웹에서 페이지에 접근할 수 있도록 설정합니다.이 두 방법 모두 추천 추적이 포함된 브랜드 페이지를 신속하고 빠르게 공유할 수 있도록 합니다.