makeshop へのタグ設置方法

概要

makeshop では、ショップデザインのテンプレート編集機能を使って AnyGift タグを設置します。スクリプトタグとマーカータグの2つを商品詳細ページに追加してください。

設置手順

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

makeshop の管理画面テンプレートには「ベーシックモード」と「クリエイターモード」の2種類があります。ご利用のモードを確認してから、以下の手順で設置してください。

旧管理画面の場合

makeshop の管理画面にログインし、ショップデザイン をクリック
eギフトを実装するテーマを選択し、編集 をクリック
左のサイドバーから 商品詳細 を探し、選択

新管理画面の場合

ショップデザイン > テンプレート選択・編集 を開く
eギフトを実装するテーマを選択し、編集 をクリック
左のサイドバーから 商品詳細 を探し、選択

ベーシックモードをご利用の場合

商品詳細のHTMLで </body> の上に、以下のコードを挿入します。

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

クリエイターモードをご利用の場合

商品詳細のHTMLで </head> の上に、以下のコードを挿入します。

【スマホショップデザイン】

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

YOUR_STORE_ID は、AnyGift から発行されたストアIDに置き換えてください。

【PCショップデザイン】

<script type="text/javascript">
    window.AnyGift = {
      productCode: '[SYSTEM_CODE]',
      storeId: 'YOUR_STORE_ID',
    };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/store.js" charset="utf-8"></script>

YOUR_STORE_ID は、AnyGift から発行されたストアIDに置き換えてください。

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

eギフトの「ギフトとして贈る」ボタンを表示したい位置に、以下のマーカータグを挿入してください。

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

通常は、商品の購入ボタンの近くに設置することを推奨します。

動作確認

設置が完了したら、ストアの商品詳細ページにアクセスし、「ギフトとして贈る」ボタンが表示されていることを確認してください。

ヒント: コードを挿入する場所は、商品詳細ページ（または eギフト購入ボタンを表示したい箇所）でスクリプトが実行されるのであれば、上記の推奨箇所以外でも動作します。