makeshop へのタグ設置方法

概要

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

makeshop アプリのインストール、商品・在庫の連携、受注連携は makeshop の連携設定と運用 をご覧ください。

テンプレートの特定方法

テンプレートの場所

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

1. makeshop 管理画面にログイン
2. テンプレート または デザイン管理 を開く
3. 商品詳細ページ用テンプレート を探す

対象テンプレート

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

• 商品詳細ページテンプレート
• または 商品単体表示テンプレート

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

設置手順

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

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

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

コード内の変数説明

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

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

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

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

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

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

推奨される設置位置

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

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

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

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

実装チェックリスト

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

• [ ] スクリプトタグが挿入されている
• [ ] <script type="text/javascript"> で始まる AnyGift 設定ブロックがある
• [ ] productCode に makeshop テンプレート変数（{?goods_code} など）が設定されている
• [ ] storeId に正しいストア ID が設定されている

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

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

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

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

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

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

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

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

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

動作確認手順

1. ページへのアクセス

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

2. ボタン表示の確認

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

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

3. ボタン動作の確認

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

トラブルシューティング

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

原因と対応:

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

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

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

1. makeshop 管理画面 → 設定 または キャッシュ管理
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管理画面で makeshop 連携が有効になっているか確認

AnyGift管理画面での確認:

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

サポートが必要な場合

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

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