ecbeing へのタグ設置方法

概要

ecbeing は、オンラインストア構築・運営のためのプラットフォームです。AnyGift タグを ecbeing で実装するには、共通テンプレートにスクリプトタグとマーカータグの2つを挿入する必要があります。

共通テンプレートの特定方法

テンプレートの場所

ecbeing の管理画面から共通テンプレートにアクセスします。

1. ecbeing 管理画面にログイン
2. デザイン → テンプレート を開く
3. 共通テンプレート セクションを探す

商品詳細ページ用テンプレート

AnyGift タグを設置対象にするのは、以下のテンプレートです：

• 共通テンプレート > 商品詳細ページテンプレート
• または 商品詳細 > 商品表示用テンプレート

テンプレート一覧から、商品詳細ページの表示に使用されているテンプレート名を確認してください。テンプレート名に「商品詳細」「商品表示」などが含まれていることが多いです。

設置手順

ステップ1: スクリプトタグを挿入する

1. ecbeing 管理画面で デザイン → テンプレート を開く
2. 共通テンプレート から商品詳細ページ用のテンプレートを選択
3. テンプレート編集画面を開き、 タグの直前に以下のコードを挿入します

<!-- AnyGift スクリプト start -->
<script type="text/javascript">
  window.AnyGift = {
    productCode: '[商品ID]',
    storeId: 'YOUR_STORE_ID',
  };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>
<!-- AnyGift スクリプト end -->

コード内の変数説明

ecbeing のテンプレート変数の確認

ecbeing の管理画面でテンプレート編集時に、利用可能な変数は以下の方法で確認できます：

1. テンプレート編集画面右側の 変数リファレンス または ヘルプ をクリック
2. 商品に関連する変数（productId、product.id など）を探す
3. テンプレートで使用されている変数名に合わせて、上記コードの [商品ID] を置き換え

ステップ2: マーカータグを挿入する

1. 同じテンプレート編集画面で、「ギフトとして贈る」ボタンを表示したい位置にマーカータグを挿入します
2. 通常は、商品の購入ボタンの近くに設置することを推奨します

<!-- AnyGift マーカー start -->
<div data-anygift="marker"></div>
<!-- AnyGift マーカー end -->

推奨される設置位置

• 購入ボタンの直上 - 最も自然な配置
• 購入ボタンの直下 - 購入前にギフト選択肢を促す場合
• 商品説明の下 - ページ下部で告知したい場合

ヒント: data-anygift="marker" で表示対象になるのは先頭の1個だけです。複数個所に表示する場合は、各位置に <div data-anygift-product-code="[商品ID]"></div> を設置してください。

ステップ3: テンプレート保存と反映

1. テンプレート編集画面で 保存 または 更新 をクリック
2. ecbeing の場合、テンプレート変更は即座に反映されることが多いですが、必要に応じて キャッシュクリア を実行

実装チェックリスト

導入作業が完了したら、以下の項目を確認してください。

• [ ] スクリプトタグが挿入されている
• [ ] <script type="text/javascript"> で始まる AnyGift 設定ブロックがある
• [ ] productCode に [商品ID] が設定されている
• [ ] storeId に正しいストア ID が設定されている

• [ ] https://d1ioo46r7yo3cy.cloudfront.net/store.js の読み込みスクリプトがある

• [ ] マーカータグが挿入されている

• [ ] <div data-anygift="marker"></div> が商品詳細ページに存在する

• [ ] 購入ボタンの近くなど、目立つ場所に設置されている

• [ ] テンプレートが保存されている

• [ ] ecbeing で変更内容が保存されている

• [ ] 必要に応じてキャッシュがクリアされている

• [ ] 動作確認が完了している

• [ ] 商品詳細ページにアクセスして「ギフトとして贈る」ボタンが表示される
• [ ] ボタンをクリックすると AnyGift のギフト購入画面が開く

動作確認手順

1. ページへのアクセス

1. ecbeing のストアフロントで商品詳細ページにアクセス
2. ページが正常に読み込まれることを確認

2. ボタン表示の確認

• 表示される ✓ → 次のステップへ
• 表示されない ✗ → トラブルシューティングを参照

期待される表示:
┌─────────────────────────────┐
│   商品詳細ページ             │
│ ・商品画像                   │
│ ・商品説明                   │
│ ┌───────────────────────┐  │
│ │ ギフトとして贈る       │  ← このボタン
│ └───────────────────────┘  │
│ ┌───────────────────────┐  │
│ │ カートに追加          │  │
│ └───────────────────────┘  │
└─────────────────────────────┘

3. ボタン動作の確認

1. 「ギフトとして贈る」ボタンをクリック
2. AnyGift の購入画面（受贈者情報入力）が開く
3. 画面が正常に表示される

トラブルシューティング

Q1: 「ギフトとして贈る」ボタンが表示されない

原因と対応:

ブラウザキャッシュをクリアする手順:

1. Chrome の場合: Ctrl+Shift+Delete（Windows）/ Cmd+Shift+Delete（Mac）
2. Safari の場合: 開発メニュー > キャッシュを空にする
3. ページを再読み込み（Ctrl+R / Cmd+R）

ecbeing キャッシュをクリアする手順:

1. ecbeing 管理画面 → 設定 または キャッシュ管理
2. キャッシュクリア または 再構築 ボタンをクリック
3. 処理完了後、ストアフロントを再度確認

Q2: コンソールにエラーが表示される

確認方法:

1. ブラウザの開発者ツールを開く（F12 キー）
2. Console タブを開く
3. 赤いエラーメッセージが表示されていないか確認

よくあるエラーと対応:

Q3: ボタンはあるがクリックしても反応しない

考えられる原因:

1. JavaScript が無効 - ブラウザの設定で JavaScript を有効にしてください
2. store.js の読み込み失敗 - ブラウザコンソールでエラーを確認
3. storeId が無効 - AnyGift から発行されたストア ID であるか確認

Q4: 複数の商品でテストしたが、一部の商品でボタンが表示されない

考えられる原因:

1. productCode が空白になっている - テンプレート変数が一部の商品で未設定の可能性
2. 商品ステータスの問題 - その商品がストアでアクティブ状態か確認

確認方法:

1. 問題がある商品ページで開発者ツール → Elements タブ
2. <div data-anygift="marker"></div> の直上にスクリプトタグを探す
3. productCode の値が正しく出力されているか確認

<!-- 正常な例 -->
<script type="text/javascript">
  window.AnyGift = {
    productCode: 'PROD-12345',  <!-- ← ここに商品ID が出力されている -->
    storeId: 'abc123',
  };
</script>

<!-- 問題がある例 -->
<script type="text/javascript">
  window.AnyGift = {
    productCode: '',  <!-- ← 空白！ -->
    storeId: 'abc123',
  };
</script>

Q5: eギフト機能自体が動作しない（ボタンはあるが購入画面が開かない）

確認事項:

1. AnyGift ストア ID が有効か - AnyGift管理画面でストアが有効化されているか確認
2. AnyGift で商品が登録されているか - 対象商品が AnyGift の商品マスターに存在するか確認
3. AnyGift 側の設定 - AnyGift管理画面で ecbeing 連携が有効になっているか確認

AnyGift管理画面での確認:

1. AnyGift管理画面 → ストア設定
2. ストア ID を確認
3. ecbeing 連携の設定状況を確認

サポートが必要な場合

上記の対応でも問題が解決しない場合は、以下の情報を用意した上でAnyGiftサポートにお問い合わせください：

• ストア ID（AnyGift から発行されたもの）
• 問題が発生している商品の ID
• ecbeing の管理画面へのアクセス情報（サポート用ユーザーを用意していただきます）
• ブラウザコンソールのエラーメッセージ（スクリーンショット）
• 実装したスクリプトタグとマーカータグの位置（テンプレートコード）