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

Shopifyをご利用の事業者様は対象外です。

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

商品一覧ページにボタンを設置すると、顧客が商品を探している段階でeギフトを選択できるため、ギフト購入の機会を増やせます。

前提条件

AnyGift管理画面で商品登録を完了していること
eギフト対象フラグがONに設定されていること
eギフト対象フラグがOFFの商品には、ボタンは表示されません。

設置に必要なタグ

商品一覧ページにeギフトボタンを表示するには、以下の2つのタグを設置します。

① 商品コード指定タグ（商品ごとに配置）

商品一覧ページのテンプレートファイルを開き、eギフトボタンを表示したい位置に下記タグを挿入します。

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

{productCode} には、AnyGift管理画面で商品登録時に設定した商品IDを指定してください。商品一覧ページでは商品ごとに異なる商品IDが必要なため、テンプレートの繰り返し処理などを使って、各商品の商品IDを動的に挿入します。

商品一覧ページの設置例（やまや様）

商品情報を表示している箇所に、各商品の商品IDを指定してタグを配置します。

以下は記述例です。テンプレート変数や繰り返し処理の書式は、ご利用のECカートに合わせて読み替えてください。

{% for product in products %}
  <div class="product-item">
    <a href="{{ product.url }}">
      <img src="{{ product.image }}" alt="{{ product.name }}">
      <p>{{ product.name }}</p>
    </a>

    <!-- 商品ごとの商品IDを指定してeギフトボタンを表示 -->
    <div data-anygift-product-code="{{ product.id }}"></div>
  </div>
{% endfor %}

例えば、商品IDが 4957750754911 の商品は、JavaScript読み込み後に次のタグとして認識されます。

<div data-anygift-product-code="4957750754911"></div>

商品ごとの商品IDが正しく挿入されていることを、ページのソースや開発者ツールで確認してください。

② AnyGiftタグ（全ページ共通）

サイトの全ページで読み込まれる共通テンプレートファイルの<head>内に、次のタグを一度だけ挿入します。

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

storeId はAnyGift担当窓口から指定された値で固定してください。
タグは<head>内のどこに配置しても構いませんが、</head>直前を推奨します。
全ページで読み込まれる共通テンプレートに配置してください。
このタグは一度だけ配置し、ページごとに複数回配置しないでください。

設定値の例

項目	設定内容
`productCode`	eギフト対象商品の商品登録時に登録した商品ID。カートサービスごとの動的な変数を使って、商品ごとに異なる値を設定します。
`storeId`	AnyGift担当窓口から指定された値。指定された値をそのまま固定で設定します。

例えば、次の商品の場合は、商品ごとに対応する商品IDがproductCodeへ入る必要があります。

商品名	商品ID
うまだし30包	72153
減塩うまだし25包	72157

JavaScript読み込み後は、各商品に合わせて次のように認識されます。

うまだし30包
<div data-anygift-product-code="72153"></div>
減塩うまだし25包
<div data-anygift-product-code="72157"></div>

商品IDを動的に設定するには、ECカートのテンプレートやサイトの実装に関する知識が必要になる場合があります。設定方法についてはAnyGiftサポートへご相談ください。

設置手順

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

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

ステップ2: 商品コード指定タグを商品一覧に挿入

商品一覧ページのテンプレートファイルを開きます。
商品画像の下や価格の下など、ボタンを表示したい位置に商品コード指定タグを挿入します。
テンプレート内で各商品の商品IDを動的に挿入するよう設定します。
ファイルを保存します。

ステップ3: 動作確認

ブラウザで商品一覧ページを表示します。
各商品にeギフトボタンが表示されることを確認します。
テスト購入を行い、eギフト購入フローが正常に動作することを確認します。

よくある質問

Q. eギフトボタンが表示されません。どうすればよいですか？

A. 次の項目を上から順番に確認してください。

AnyGiftタグの設置場所を確認する
AnyGiftタグが、共通テンプレートの<head>内に正しく挿入されているか確認します。
ブラウザの開発者ツール（F12）で、<script>とwindow.AnyGiftを検索します。
商品コード指定タグの出力を確認する
ページのソースにdata-anygift-product-code=が存在するか確認します。
商品IDを確認する
AnyGift管理画面で登録した商品のIDと、タグに動的に挿入された商品IDが一致しているか確認します。
eギフト対象設定を確認する
AnyGift管理画面で該当商品を開き、「eギフト対象」がONになっているか確認します。
ページを再読み込みする
Cmd+Shift+R（Mac）またはCtrl+Shift+R（Windows）で、ブラウザのキャッシュを削除して再読み込みします。

Q. 一部の商品だけeギフトボタンが表示されません。なぜですか？

A. ボタンが表示されない商品の設定を確認してください。

その商品の「eギフト対象」がONになっているか確認します。
AnyGift管理画面に商品が正しく登録されているか確認します。
商品IDにタイプミスがないか確認します。
商品ごとに異なる商品IDが動的に挿入されているか確認します。

Q. eギフトボタンをクリックしても購入ページに遷移しません。どうすればよいですか？

A. 次の項目を確認して、原因を切り分けてください。

ブラウザのコンソールにJavaScriptエラーが表示されていないか確認します。
AnyGiftタグのstoreIdが、担当窓口から指定された値になっているか確認します。
商品詳細ページからeギフト購入が正常に動作するか確認します。商品詳細ページでは動作する場合、商品一覧ページのタグ設置やページ固有の設定に問題がある可能性があります。

Q. eギフトボタンのレイアウトが崩れています。どうすればよいですか？

A. 商品コード指定タグの配置と、ページのCSSを確認してください。

商品コード指定タグが、商品情報を表示する親要素の中に配置されているか確認します。
タグが親要素の外に配置されていないか確認します。
CSSのdisplayプロパティなどで、タグやボタンが非表示になっていないか確認します。

デザインカスタマイズ

商品コード指定タグの周辺にCSSを適用することで、ボタンの位置や余白を調整できます。

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

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