> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# テンプレートの統合

> SFRA テンプレートへの Kleep ボタン、チェックアウトトラッキング、確認トラッキングの追加

<Note>
  以下の変更はすべて `int_kleep_sfra` にすでに含まれています。カスタムブランドカートリッジでこれらのテンプレートをオーバーライドしている場合は、`int_kleep_sfra/cartridge/templates/default` から Kleep バージョンを削除できます。
</Note>

## Kleep ボタン（PDP + 商品トラッキング）

以下の両方に追加します。

* `app_custom_brand/.../experience/components/dynamic/product/productDetails.isml`
* `app_custom_brand/.../product/productDetails.isml`

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="product/components/kleepButton" />
```

以下の**直前**に配置します。

```html theme={null}
<!-- Attributes and Quantity -->
<isinclude template="product/components/mainAttributes" />
```

`<isinclude>` タグを PDP のどこにでも複製できます — すべてのボタンは単一の iframe/モーダルを共有します。

## チェックアウトトラッキング

チェックアウトテンプレートに追加します。

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="common/kleepTracking" />
```

以下の**直後**に配置します。

```html theme={null}
<!-- Step 3: Payment and Billing-->
<isinclude template="checkout/billing/billing" />
```

## 確認トラッキング

`app_custom_brand/.../checkout/confirmation/confirmation.isml` に追加します。

```html theme={null}
<iscomment> CUSTOM KLEEP </iscomment>
<isinclude template="checkout/confirmation/kleepCheckoutCompletedTracking" />
```

以下の**直後**に配置します。

```jsx theme={null}
<isscript>
var assets = require('*/cartridge/scripts/assets.js');
assets.addCss('/css/checkout/checkout.css');
assets.addJs('/js/checkoutRegistration.js');
</isscript>
```