makeshop は、オンラインストア構築・運営のためのプラットフォームです。AnyGift タグを makeshop で実装するには、テンプレート管理画面からスクリプトタグとマーカータグの2つを挿入する必要があります。
makeshop の管理画面からテンプレートにアクセスします。
AnyGift タグを設置対象にするのは、以下のテンプレートです：
管理画面のテンプレート一覧から、商品詳細ページの表示に使用されているテンプレート名を確認してください。テンプレート名に「商品詳細」「商品表示」などが含まれていることが多いです。
<!-- 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 -->
| 変数 | 説明 | 置換例 |
|---|---|---|
{?goods_code} |
makeshop システムで各商品に割り当てられる商品コード。テンプレート変数を使用してください | {?product_id} や {?goods_code} など |
YOUR_STORE_ID |
AnyGift から発行されたストア ID。固定値で置き換えてください | abc123def456 |
makeshop の管理画面でテンプレート編集時に、利用可能な変数は以下の方法で確認できます：
{?goods_code}、{?product_id} など）を探す{?goods_code} を置き換え<!-- AnyGift マーカー start -->
<div data-anygift="marker"></div>
<!-- AnyGift マーカー end -->
ヒント:
data-anygift="marker"で表示対象になるのは先頭の1個だけです。複数個所に表示する場合は、各位置に<div data-anygift-product-code="{?goods_code}"></div>を設置してください。
導入作業が完了したら、以下の項目を確認してください。
<script type="text/javascript"> で始まる AnyGift 設定ブロックがあるproductCode に makeshop テンプレート変数（{?goods_code} など）が設定されているstoreId に正しいストア ID が設定されている[ ] https://d1ioo46r7yo3cy.cloudfront.net/store.js の読み込みスクリプトがある
[ ] マーカータグが挿入されている
<div data-anygift="marker"></div> が商品詳細ページに存在する[ ] 購入ボタンの近くなど、目立つ場所に設置されている
[ ] テンプレートが保存されている
[ ] 必要に応じてキャッシュがクリアされている
[ ] 動作確認が完了している
期待される表示:
┌─────────────────────────────┐
│ 商品詳細ページ │
│ ・商品画像 │
│ ・商品説明 │
│ ┌───────────────────────┐ │
│ │ ギフトとして贈る │ ← このボタン
│ └───────────────────────┘ │
│ ┌───────────────────────┐ │
│ │ カートに追加 │ │
│ └───────────────────────┘ │
└─────────────────────────────┘
原因と対応:
| 症状 | 考えられる原因 | 対応方法 |
|---|---|---|
| ボタンが表示されない | 1. スクリプトタグが挿入されていない | テンプレートにスクリプトタグが含まれているか確認 |
| 2. マーカータグが挿入されていない | <div data-anygift="marker"></div> がページに存在するか確認 |
|
| 3. ストア ID が正しくない | storeId の値が AnyGift から発行されたものか確認 |
|
4. productCode が空白 |
テンプレート変数 {?goods_code} が正しく動作しているか確認 |
|
| 5. ページキャッシュが古い | ブラウザキャッシュをクリア、または別のブラウザでアクセス | |
| 6. makeshop キャッシュが古い | makeshop 管理画面でキャッシュクリアを実行 |
ブラウザキャッシュをクリアする手順:
makeshop キャッシュをクリアする手順:
確認方法:
よくあるエラーと対応:
| エラーメッセージ | 原因 | 対応方法 |
|---|---|---|
productCode is undefined |
テンプレート変数が正しく評価されていない | {?goods_code} を使用しているテンプレート変数が実際に出力されているか確認。テンプレートプレビューで確認してください |
storeId is missing |
ストア ID が設定されていない | YOUR_STORE_ID を正しい値に置き換えたか確認 |
store.js failed to load |
CDN にアクセスできない、またはネットワーク問題 | ネットワーク接続を確認。別のネットワークで試す |
考えられる原因:
考えられる原因:
確認方法:
<div data-anygift="marker"></div> の直上にスクリプトタグを探すproductCode の値が正しく出力されているか確認<!-- 正常な例 -->
<script type="text/javascript">
window.AnyGift = {
productCode: 'PROD-12345', <!-- ← ここに商品ID が出力されている -->
storeId: 'abc123',
};
</script>
<!-- 問題がある例 -->
<script type="text/javascript">
window.AnyGift = {
productCode: '', <!-- ← 空白！ -->
storeId: 'abc123',
};
</script>
確認事項:
AnyGift管理画面での確認:
上記の対応でも問題が解決しない場合は、以下の情報を用意した上でAnyGiftサポートにお問い合わせください：