はじめる前に — AnyGift タグ挿入型の初期設定
AnyGift タグ挿入型を導入してギフト機能を有効化するための初期設定手順を説明します。
導入の流れ
AnyGift タグ挿入型の導入は、大きく以下のステップで進みます。
1. AnyGift 管理画面にログイン
↓
2. ストアの基本設定を行う
↓
3. 商品を登録する
↓
4. スクリプトタグをECサイトに埋め込む
↓
5. 動作確認（テスト購入）
1. 管理画面へのログイン
AnyGift の管理画面（Admin）にブラウザでアクセスし、発行されたID・パスワードでログインします。
2. ストアの基本設定
管理画面の「基本設定」から、あなたのストアの情報を入力します。
| 設定項目 | 説明 |
|---|---|
| ストア名 | ギフト受取ページや通知メールに表示されるストア名 |
| ECサイトURL | あなたのECサイトのURL |
| 受取期限 | ギフトが購入されてから受取者が住所を入力できる期限 |
| 期限切れ時の対応 | 期限が過ぎた場合の処理方法（通知のみ / キャンセルなど） |
3. 商品の登録
ギフト購入対象とする商品をAnyGiftに登録します。商品の登録方法は複数あります。
| 方法 | 向いているケース |
|---|---|
| 管理画面から手動登録 | 商品数が少ない場合 |
| CSV 一括インポート | 大量の商品を一度に登録したい場合 |
| makeshop / futureshop との自動同期 | 対応ECカートをご利用の場合 |
| NextEngine との同期 | NextEngine をご利用の場合 |
商品を登録したら、ギフト対象にしたい商品の 「eギフト対象フラグ」を有効 にしてください。このフラグが有効な商品のみ、ECサイトのギフトボタンから購入できます。
詳しい手順は商品・在庫の管理を参照してください。
4. スクリプトタグの埋め込み
あなたのECサイトのHTMLに、以下のスクリプトタグを1行追加してください。
<script src="https://{cdnUrl}/store.js"></script>
埋め込む場所は、原則としてすべてのページに共通で読み込まれる箇所（<head> タグ内や共通フッターなど）を推奨します。スクリプトは自動的に商品ページを検知し、「ギフトとして贈る」ボタンを挿入します。
スクリプトタグの入手先: 管理画面でストア設定を完了すると、あなたのストア専用のスクリプトタグが発行されます。
SPA（シングルページアプリケーション）対応
VueやReactなどのSPAフレームワークを使ったECサイトの場合、ページ遷移時にスクリプトの再初期化が必要になることがあります。この設定はサポートチームにご相談ください。
プラットフォーム別の設置手順
利用しているECカートに合わせた詳細な設置手順をご確認ください：
5. デザインのカスタマイズ（任意）
ギフトボタンや購入フローのデザインを、あなたのブランドに合わせてカスタマイズできます。
- カスタムCSS: 管理画面の「デザインカスタマイズ」からカスタムCSSをアップロードして、ギフトボタンや購入モーダルの見た目を変更できます
- カスタムバナー: ギフト購入フロー内に、あなたのストアのバナー画像を表示できます
6. テスト購入で動作確認
設定が完了したら、テストモードで購入フローを確認します。
- ECサイトにアクセスし、商品ページに「ギフトとして贈る」ボタンが表示されていることを確認
- ボタンをクリックし、送り主情報の入力・決済モーダルが表示されることを確認
- テスト用のカード情報で決済を完了し、メールが届くことを確認
- ギフトURLにアクセスし、受取フォームが正常に表示されることを確認
次のステップ
初期設定が完了したら、以下のガイドを参考に運用を開始してください。