コンテンツにスキップ

商品一覧ページへのeギフトボタン設置

このガイドでは、ECサイトの商品一覧ページに AnyGift のeギフトボタンを設置する方法を説明します。

商品一覧ページにボタンを設置することで、顧客が商品を検索中にギフト購入を検討しやすくなり、ギフト転換率の向上に期待できます。

設置に必要なもの

商品一覧ページにeギフトボタンを表示するには、以下の 2つのタグ を埋め込みます：

① Marker タグ（各商品ごとに配置）

eギフトボタンを表示したい位置に以下を挿入します：

<div data-anygift-product-code="{productCode}"></div>

設定ルール：

  • {productCode} には、AnyGift管理画面で商品登録時に設定した商品ID を指定してください
  • 商品一覧ページでは複数の商品が表示されるため、各商品ごとに異なる商品IDを設置 してください
  • テンプレート内で動的に商品IDを挿入するようプログラムしてください

例（テンプレート言語の場合）:

<!-- Liquid（Shopify）の場合 -->
<div data-anygift-product-code="{{ product.id }}"></div>

<!-- PHP の場合 -->
<div data-anygift-product-code="<?php echo $product['id']; ?>"></div>

<!-- JavaScript/Vue.js の場合 -->
<div data-anygift-product-code="{{ product.id }}"></div>

② AnyGift タグ（全ページ共通、head タグ内に配置）

すべてのページの共通テンプレートファイルの <head> 内に以下を挿入します：

<script type="text/javascript">
  window.AnyGift = {
    storeId: 'kamada',
  };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js"></script>

設定ルール：

  • storeId はAnyGift担当窓口から指定された値（kamada）で固定です
  • このタグは <head> 内のどこでもOK ですが、</head> 直前を推奨
  • すべてのページで読み込まれる 共通テンプレートに配置してください
  • このタグは一度だけ配置すればよく、複数回配置する必要はありません

前提条件

eギフトボタンが表示されるための条件：

  • ✓ AnyGift管理画面で商品登録が完了 していること
  • ✓ eギフト対象フラグが ON に設定されている商品のみボタンが表示されます
  • eギフト対象フラグが OFF の商品には、ボタンは表示されません
  • 商品登録後、管理画面から商品詳細を編集し、「eギフト対象」をONに設定してください

設置手順

ステップ1: AnyGift タグを head に挿入

  1. サイトのメインテンプレートファイル（全ページで読み込まれるテンプレート）を開く
  2. <head> タグ内に、上記の AnyGift タグ を挿入
  3. ファイルを保存

ステップ2: Marker タグを商品一覧に挿入

  1. 商品一覧ページのテンプレートファイルを開く
  2. 各商品の要素内（商品画像の下、価格の下など）に Marker タグ を挿入
  3. テンプレート内で 動的に商品IDを挿入 するようプログラミング
  4. ファイルを保存

ステップ3: 動作確認

  1. ブラウザでサイトにアクセス して商品一覧ページを表示
  2. eギフトボタンが表示されているか確認
  3. ボタンが表示されない場合は、下記のトラブルシューティングを参照
  4. テスト購入 してeギフト購入フローが正常に動作するか確認

トラブルシューティング

Q: eギフトボタンが表示されない

A: 以下を確認してください

  1. AnyGift タグが に正しく挿入されているか
  2. ブラウザの開発者ツール（F12）を開き、ページソースで <script> と window.AnyGift を検索

  3. タグが存在するか確認

  4. Marker タグが正しく挿入されているか

  5. 開発者ツールでページソースを確認

  6. data-anygift-product-code= が存在するか確認

  7. 商品IDが正しく指定されているか

  8. AnyGift管理画面で登録した商品の ID を確認

  9. Marker タグの {productCode} に動的に商品ID が挿入されているか確認

  10. eギフト対象フラグが ON になっているか

  11. AnyGift管理画面で該当商品を開く
  12. 「eギフト対象」が ON に設定されているか確認

  13. OFF の場合は ON に変更して保存

  14. ブラウザキャッシュをクリア

  15. Cmd+Shift+R（Mac）または Ctrl+Shift+R（Windows）で再読み込み

Q: 一部の商品だけボタンが表示されない

A: 以下を確認してください

  • その商品の「eギフト対象」フラグが OFF になっていないか
  • AnyGift管理画面で商品が正しく登録されているか
  • 商品IDが正確に指定されているか（タイプミスなど）

Q: ボタンをクリックしてもeギフト購入ページに遷移しない

A: 以下を確認してください

  • ブラウザコンソールで JavaScript エラーが発生していないか（開発者ツール F12）
  • AnyGift タグの storeId が正しく設定されているか
  • 商品ページにアクセスして、そこからのeギフト購入は正常に動作するか（ボタンの問題かそれ以外かを切り分け）

Q: レイアウトがおかしい

A: Marker タグを正しい位置に配置してください

  • Marker タグが親要素外に配置されていないか確認
  • CSS の display プロパティで Marker タグが隠れていないか確認

デザインカスタマイズ

ボタンのスタイルをカスタマイズしたい

Marker タグの周辺に CSS を適用することで、ボタンの位置やサイズを調整できます：

<div class="anygift-container">
  <div data-anygift-product-code="{{ product.id }}"></div>
</div>

<style>
  .anygift-container {
    margin-top: 15px;
    text-align: center;
  }
</style>

詳細なカスタマイズ例については、詳細マニュアルを参照してください。

詳細マニュアル

より詳しいカスタマイズ方法、HTML/CSS のコード例（4列レイアウト等）、よくある質問については、以下の詳細マニュアルをご参照ください：

AnyGift 商品一覧ページ設置ガイド（詳細版）

関連ガイド