タグ設置の基本ガイド

AnyGift タグを各 EC カートに埋め込む方法は、プラットフォームが異なっても基本原理は同じです。本ページでは、全てのカートに共通する基本概念と設置ルールを説明します。

設置する2つの部品

AnyGift タグは、以下の2つの部品で構成されます。商品ページにこの2つが入ると、マーカーの位置に eギフトボタンが表示され、押すと AnyGift の購入画面が開きます。

1. スクリプトタグ（初期化スクリプト）

<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>

役割： - ストアの設定（ストア ID）と現在の商品情報（商品 ID）を初期化 - AnyGift の動作に必要な公開 JavaScript ライブラリを読み込み

必須の設定：

変数	説明	例
`productCode`	現在ページに表示されている商品の ID（管理画面の「商品ID」と同じ値）	ecbeing では `{$productId}`、EC-CUBE では `{{ product.id }}`
`storeId`	ストア固有のストア識別子（AnyGift管理画面で確認）	`abc123def456`

2. マーカータグ（UI プレースホルダ）

<div data-anygift="marker"></div>

役割： - eギフトボタン（初期表示は「住所を知らない相手にeギフトで贈る」）を表示する位置を指定 - ボタンはこのマーカーの中に表示されます。マーカーがないページにはボタンは表示されません

どのカートを使っていますか？

設置手順はカートによって異なります。あなたが使用しているカートのガイドを確認してください：

あなたの EC カート	詳細設置ガイド
ecbeing を使用している	→ ecbeing へのタグ設置方法
EC-CUBE を使用している	→ EC-CUBE へのタグ設置方法
makeshop を使用している	→ makeshop へのタグ設置方法
ecforce を使用している	→ ecforce へのタグ設置方法
WordPress + WooCommerce を使用している	→ WordPress へのタグ設置方法

スクリプトとマーカーの設置位置

スクリプトタグ：どこに置く？

ルール： </body> タグの直前に配置

    ... 他のコンテンツ ...

    <!-- AnyGift スクリプト -->
    <script type="text/javascript">
      window.AnyGift = {
        productCode: '{$productId}',
        storeId: 'abc123',
      };
    </script>
    <script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>
  </body>
</html>

マーカータグ：どこに置く？

推奨される配置（優先順）:

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

最も重要：productCode を動的に設定する

⚠️ よくある間違い

productCode を固定値で書くと、どの商品ページでボタンを押しても、その固定値の商品が購入画面に入ってしまいます。

<!-- ✗ これは間違い！全商品で同じ ID になる -->
<script type="text/javascript">
  window.AnyGift = {
    productCode: 'PROD-123',  ← 固定値
    storeId: 'abc123',
  };
</script>

✓ 正しいやり方

<!-- ✓ テンプレート変数を使用 -->
<script type="text/javascript">
  window.AnyGift = {
    productCode: '{$productId}',  ← プラットフォーム固有の変数
    storeId: 'abc123',
  };
</script>

設置完了後の確認項目

eギフトボタン（初期表示は「住所を知らない相手にeギフトで贈る」）が表示されている
複数の異なる商品でボタンが表示される
ボタンをクリックして AnyGift の購入画面が開く
ブラウザコンソール（F12 → Console）にエラーがない

検証用の環境がなく本番ストアで確認する場合は、「本番ストアで安全に動作確認する」の方法を使うと、お客様への影響を抑えられます。

ボタンが表示されない場合

ステップ1：ブラウザキャッシュをクリア

Windows: Ctrl + Shift + Delete
Mac: Cmd + Shift + Delete

ステップ2：テンプレート変数を確認

開発者ツール → Elements で productCode が空欄になっていないか確認

ステップ3：store.js が読み込まれているか確認

開発者ツール → Network で store.js がステータス 200 で読み込まれているか確認

ステップ4：商品の登録側に原因がないか確認

ステップ1〜3で問題がなくても表示されない場合は、AnyGift管理画面の商品登録を確認します。次のどれかに当てはまると、タグが正しくてもボタンは表示されません。

商品管理に、productCode と同じ商品IDの商品が登録されていない
その商品の「eギフト」が OFF になっている
50円未満のバリエーション（SKU）がある（商品・在庫の管理）
商品別のカスタム配送設定の対象になっていて、その設定でお届けできる日が1日もない（配送可能期間が過ぎているなど）

在庫が0のときは、ボタンは表示されたまま「eギフト在庫切れ」になり、押せなくなります。

これらの商品ページでは、設定によってはeギフトボタンの代わりに「eギフトで贈れる商品を探す」というバナーが表示されます（「eギフトで贈れる商品を探す」バナー）。

ステップ5：コンソールから商品コードを直接与えて切り分ける

「タグの書き方が悪いのか、商品の登録が悪いのか分からない」ときは、ブラウザの開発者ツールから、商品IDとストアIDを直接与えて AnyGift を読み込んでみます。ページのタグを書き換えずに試せるので、本番の商品ページでもお客様の画面には影響しません。

ボタンが表示されない商品ページを開きます。ページにマーカー（<div data-anygift="marker"></div>）が入っていることが前提です
F12 キー（Mac は Cmd + Option + I）、または右クリック →「検証」で開発者ツールを開き、「Console（コンソール）」タブを選びます
次のコードの productCode と storeId を、確かめたい商品の商品IDとあなたのストアIDに書き換えて貼り付け、Enter キーを押します

window.AnyGift = {
  productCode: 'TEST-0001',     // 確かめたい商品の商品ID
  storeId: 'your-store-id',     // あなたのストアID
};
const anygiftScript = document.createElement('script');
anygiftScript.src = 'https://d1ioo46r7yo3cy.cloudfront.net/store.js';
document.head.appendChild(anygiftScript);

結果	考えられる原因	次にすること
マーカーの位置にeギフトボタンが表示された	商品の登録は正しく、ページのタグに原因がある	`productCode` に入る値（テンプレート変数）や、スクリプトの設置位置を見直す
表示されない	商品の登録かストアIDに原因がある	商品IDの一致・eギフトのON/OFF・価格（ステップ4）とストアIDを確認する

コンソールで試した内容は、ページを再読み込みすると元に戻ります。

マーカーも含めて一から試したいときは、次のHTMLをファイルに保存してブラウザで開く方法もあります（商品IDとストアIDは書き換えてください）。ボタンが表示されれば、商品の登録は正しく、ストアのページ側に原因があると分かります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript">
      window.AnyGift = {
        productCode: 'TEST-0001',
        storeId: 'your-store-id',
      };
    </script>
    <script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>
  </head>
  <body>
    <div data-anygift="marker"></div>
  </body>
</html>

本番ストアで安全に動作確認する

本来は検証用の環境でタグを試すのが安全ですが、検証用の環境がない場合は、本番ストアで次のどれかの方法を使うと、お客様への影響を抑えて確認できます。

方法1：テスト用の商品で試す

カートにテスト用の商品を作り（一般公開しない設定にできるカートでは非公開にしておきます）、同じ商品IDで AnyGift の商品管理にも登録して「eギフト」を ON にします。eギフトボタンが表示されるのはテスト用の商品ページだけなので、実際に販売している商品には影響しません。

方法2：注文が少ない時間帯に試す

実際に販売している商品で試したいときは、注文が比較的少ない時間帯に「eギフト」を ON にして確認し、確認が終わったら必要に応じて OFF に戻します。

方法3：開発者ツールで自分の画面だけ表示する

eギフトボタンを CSS で非表示にしておき、確認する人だけが開発者ツールで表示に戻す方法です。少し開発の知識が必要です。

ストアの CSS に次の指定を追加し、eギフトボタンをお客様の画面に出さないようにします
```
.anygift-gift-ui__main-button {
  display: none;
}
```
確認する人は、商品ページで開発者ツールを開き、「Elements（要素）」タブでeギフトボタンの要素を選びます。右側のスタイル欄で display: none を display: block に変える（またはチェックを外す）と、その人の画面でだけボタンが表示されます
確認が終わったら、1 で追加した CSS を削除して、お客様にボタンを公開します

どの方法でも、確認する項目は「設置完了後の確認項目」と導入の流れと同じです。購入・受取まで試すと、管理画面の「注文管理」に注文が取り込まれることも確認できます。

eギフトボタンを一時的に止める

キャンペーンの切り替えや、在庫・配送の都合でeギフトの受付を一時的に止めたいときは、次のどちらかで止められます。

方法	向いているケース
商品ごとに「eギフト」を OFF にする	一部の商品だけ止めたい。管理画面だけで操作できる（eギフトのON・OFFの切り替え）
`store.js` を読み込む行をコメントアウトする	サイト全体で止めたい

サイト全体で止めるときは、商品ページのテンプレートで store.js を読み込む行を  で囲みます。

<script type="text/javascript">
  window.AnyGift = {
    productCode: '{$productId}',
    storeId: 'your-store-id',
  };
</script>
<!-- <script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script> -->

再開するときは、コメントアウトを外して元に戻します。

Googleタグマネージャー（GTM）で設置する

商品ページのテンプレートを直接編集しにくい場合は、Googleタグマネージャー（GTM）からスクリプトタグを配信することもできます。ポイントは、productCode に商品ページごとの商品IDが入るようにすることです。

商品IDを取れる変数を用意する: GTM の変数（データレイヤー変数など）で、表示中の商品の商品ID（AnyGift の商品管理に登録した商品IDと同じ値）が取れるように設定します。どのデータレイヤーに商品IDが入っているかはサイトによって異なるため、サイトの構成に合わせて設定してください
カスタム HTML タグを作る: 次のようなタグを作り、1 の変数を productCode に入れます。下の例は、データレイヤーの ecommerce.detail.products を「dl_ecommerce.detail.products」という名前の変数にしている場合です
トリガーを商品ページに限定する: 商品詳細ページの表示時にだけ配信されるようにします
マーカーはページに直接置く: ボタンを表示する位置の <div data-anygift="marker"></div> は、商品ページのテンプレートに入れてください

<script type="text/javascript">
  var anyGiftProducts = {{dl_ecommerce.detail.products}};
  if (anyGiftProducts && anyGiftProducts.length > 0) {
    window.AnyGift = {
      productCode: String(anyGiftProducts[0].id),
      storeId: 'your-store-id',
    };
  }
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>

設置したら、GTM のプレビューで商品ページを開き、「設置完了後の確認項目」と同じ確認をします。ボタンが出ない場合は、コンソールからの切り分けで、変数に正しい商品IDが入っているかを確かめてください。

ストア ID はどこから取得する？

AnyGift管理画面にログイン
「タグソリューション」セクションを確認
ストア ID をコピーしてテンプレートに貼り付け

重要: ストア ID は環境ごとに異なる可能性があります。開発環境と本番環境で別々に確認してください。

よくある質問

Q: 複数の商品詳細ページがある場合は？ A: 全てのテンプレートに同じスクリプトとマーカーを挿入してください。

Q: マーカーを複数個所に置いても大丈夫？ A: data-anygift="marker" を使う従来方式では、ページ内の先頭のマーカーにだけボタンが表示されます。複数個所へ表示する場合は、各位置に <div data-anygift-product-code="商品コード"></div> を配置してください。詳しくは商品一覧ページへのボタン設置を参照してください。

Q: productCode が空になる場合は？ A: テンプレート変数の指定が誤っている可能性があります。EC プラットフォームのプレビュー機能で確認してください。

次のステップ

カートに合わせた詳細設置ガイドを確認してください：