BASE へのタグ設置方法

概要

BASE では、「HTMLタグ管理 App」を利用して AnyGift タグを設置します。スクリプトタグとマーカータグを含んだコードを1つのタグとして登録します。

設置手順

ステップ1: HTMLタグ管理 App をインストールする

BASE の App ストアから「HTMLタグ管理 App」をインストール（無料）してください。

ステップ2: タグを登録する

「タグを登録する」よりタグを1つ追加してください
タグ名は任意のもの（例：「AnyGift」）を入力し、タグに以下のコードを追加してください

<script>
document.addEventListener('DOMContentLoaded', () => {
  const purchaseButton = document.querySelector('.purchaseButton');
  if (purchaseButton) {
    const newDiv = document.createElement('div');
    newDiv.setAttribute('data-anygift', 'marker');
    purchaseButton.insertAdjacentElement('afterend', newDiv);
  }
})

const pathSegments = window.location.pathname.split('/');
const productCode = pathSegments[pathSegments.length - 1];

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

<style>
.anygift-gift-ui__container {
  width: 100% !important;
  margin-top: 10px !important;
}
</style>

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

このコードには、スクリプトタグとマーカータグの両方が含まれています。マーカータグは JavaScript により購入ボタンの直後に自動挿入されます。

動作確認

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