タグ設置の基本ガイド

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

設置する2つの部品

AnyGift タグは、以下の2つの部品で構成されます：

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 ライブラリを読み込み

必須の設定：

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

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

役割： - 「ギフトとして贈る」ボタンを表示する位置を指定

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

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

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

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

ルール： </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>

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

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

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

最も重要：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>

設置完了後の確認項目

1. 「ギフトとして贈る」ボタンが表示されている
2. 複数の異なる商品でボタンが表示される
3. ボタンをクリックして AnyGift の購入画面が開く
4. ブラウザコンソール（F12 → Console）にエラーがない

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

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

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

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

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

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

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

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

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

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

よくある質問

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

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

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

次のステップ

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

• ecbeing へのタグ設置方法
• EC-CUBE へのタグ設置方法
• makeshop へのタグ設置方法
• ecforce へのタグ設置方法
• WordPress へのタグ設置方法