複数の国向けダイナミックなアフィリエイトランディングページを作成する方法

アフィリエイトと提携し、各国ごとに異なるドメインであなたのeコマースショップを運営している場合、アフィリエイトリファラーコードに基づいて自動的に適用される、クリーンでコンバージョンに最適化されたランディングページを構築することが重要です。この短いチュートリアルでは、アフィリエイトのための簡素かつレスポンシブなランディングページを作成し、リファラーコード（ref）を国別の特定ドメインに自動的に渡す方法を紹介します。

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

異なる国別ストアを使用しており、アフィリエイトリンクを中央に集約したい場合に最適なセットアップです。

🎯 構築するもの

• シンプルでスタイリッシュなランディングページ:
• 見出し: 「Exalted Fashion」
• サブタイトル: 「ショッピングを始めるために国を選択してください...」
• 4つの大きな国のボタン、各国の旗付き
• 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パラメータを取得します。
• 動的リダイレクト: ユーザーがボタンをクリックすると、スクリプトが適切な国のドメインに自動的にリダイレクトし、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を使用して、このページをあなたのニーズに合わせてカスタマイズできます:

⚡ ページをデプロイする方法

動的なアフィリエイトランディングページを公開するには、ここで2つの簡単なオプションがあります。

オプション1. Selldoneショップにデプロイ:

Selldoneダッシュボードにログインし、ページ > 静的に進み、フォルダー（例: affiliate）を作成します。HTMLファイルをindex.htmlとしてこのフォルダ内にアップロードします。その後、ドメインセクションに進み、新しいドメインまたはサブドメインを追加し、パスをaffiliateフォルダに設定して新しい静的ページに割り当てます。

オプション2. Cloudflare Pagesで無料デプロイ（推奨）:

Cloudflare Pagesを使用してページを無料でホスティングすることもできます。新しいプロジェクトを作成し、index.htmlファイルをドラッグアンドドロップし、デプロイします。ライブになったら、Cloudflareでカスタムサブドメイン（またはドメイン）を割り当てて、Webでページにアクセス可能にします。どちらの方法も、ブランド化され、高速に読み込まれるアフィリエイトページをリファラートラッキング付きで共有することができます。