# Salesforce Commerce Cloud Site Cartridge Web Tracking Integration

[Salesforce Commerce Cloud](https://www.salesforce.com/products/commerce-cloud/overview/)は、業界で最も機敏でスケーラブルなeコマースプラットフォームの1つです。Treasure Dataは、オンラインストアフロントにTreasure Data JavaScript SDKを迅速に実装できる、認定されたSalesforce Commerce Cloudカートリッジを提供しています。このカートリッジは、サイト全体にTD JavaScript SDKトラッキングを自動的にデプロイし、以下のようなさまざまなタイプのデータを収集できるようにします：

- **ページインプレッション:** ユーザーが訪問しているページを発見します。
- **イベントトラッキング:** 製品の購入やユーザーの活動に関するその他の情報を含む、ユーザーが実行したアクションを識別します。
- **クリックトラッキング**: リンク、ボタン、input要素など、ユーザーが選択したオブジェクトを追跡します。


Treasure Dataカートリッジは、Commerce Cloud内にデータを保存しません。カートリッジによって追跡・収集されたすべてのデータは、Treasure Dataのセキュアなプラットフォーム内に保存されます。このデータを収集した後、Commerce CloudのデータをTreasure Data内の顧客データと簡単に統合でき、eコマースの購入と行動から追加のインサイトを得ることができます。

![](/assets/image2022-4-17_23-6-14.5921dea435b8b17deea1fcd05bbd32a9c9bb2507aeb0f3f68b6bc15199d73c93.84f5db3d.png)

## 前提条件と制限事項

- Treasure Dataアカウント
- Salesforce Commerce Cloudアカウント
- Salesforce Commerce Cloud (SFRA) バージョン6.0.0。互換性モード: 21.10
- Salesforce Commerce Cloudコンソールのトラッキング機能を設定経由で有効にするには、以下が必要です：
  - TD API writeキー
  - URL
  - データを保存するデータベースとテーブル名
- カートリッジ自体の可用性は100%を想定しています。トラッキング機能の可用性は、Treasure Data APIサービスの可用性に依存します。
- カートリッジがダウンした場合でも、ワークフローが中断されることはなく、必要に応じてカスタム設定を介してカートリッジを無効にすることができます。


## プライバシー

Treasure Dataカートリッジは、ユーザープロファイル情報とStorefrontサイト情報を自動的に収集または処理しません。クレジットカードデータは解析または収集されません。

## Commerce Cloudカートリッジのセットアップ

1. [AppExchangeからTDカートリッジをダウンロード](https://www.salesforce.com/products/commerce-cloud/partner-marketplace/partners/treasure-data/)します。
2. int_treasuredataカートリッジをサーバーまたはサンドボックスにアップロードします。
3. カートリッジを登録します：**Business Manager: Administration > Sites > Manage Sites > [サイトを選択]**に移動します。
4. **Settings**タブを選択します。
5. Cartridgesフィールドで、リストの最後にint_treasuredataをコロンで区切って追加します。
6. **Apply**を選択します。
7. 次のステップは、Custom Site PreferencesをBusiness Managerにインポートすることです。準備として、link_treasuredataルートフォルダの下にあるmetadataフォルダをzipするか、ルートフォルダにあるmetadata.zipを使用できます。
8. Business Managerにログインします。
9. **Administration > Site Development > Site Import & Export**に移動します。
10. **Choose File**を選択し、ステップ1のmetadata.zipを参照します。
11. **Upload**を選択します。


![](/assets/image2022-4-18_9-37-37.3bec2dccf8a88257f9fb6afe593117019bf0d084ad4eb625b5f1464872c52331.84f5db3d.png)

1. metadata.zipファイルを選択します。
2. **Import**を選択します。
3. インポートを確認します。


## カートリッジの設定

Treasure Data設定グループでいくつかのカスタムサイト設定を行う必要があります。設定の詳細については、[JS SDKドキュメント](https://github.com/treasure-data/td-js-sdk)をご覧ください。

設定を行うには：

1. **Merchant Tools > Site Preferences > Custom Preferences**に移動します。
2. **TreasureData**設定グループを選択して、各設定の詳細を確認します。
3. サイト設定を編集します。カートリッジが動作するには、以下のサイト設定を設定する必要があります：


- Enabled
- Write-only key
- Database name


その他のサイト設定はオプションです。要件に応じて、設定オプションをオンまたはオフに切り替えることができます。設定の詳細については、[JS SDKドキュメント](https://github.com/treasure-data/td-js-sdk)をご覧ください。

1. **Save**を選択します。


## トラッキングのセットアップ

### テンプレートの更新

**templates/default/common/layout/page.isml**に移動します。テンプレートを更新するには、**head**タグの下に次の行を追加します：


```html
<isinclude template="treasuredata/tdSnippet" />
```

このTreasure Dataテンプレートにより、TD JavaScript SDKスニペットがサイトにダウンロードされ、トラッキングアクションを処理します。ダウンロードは非同期で行われ、ページの読み込みに影響を与えません。

### ページビュートラッキングの追加

テンプレートが更新された後、サイトにページビュートラッキングを追加するスクリプトを追加できます。次のように、トラッキングページビュー関数を呼び出すためにisscriptタグを追加します：


```isscript
isscript
require('*/cartridge/scripts/tdTrack').trackPageview()
</isscript>
```

### イベントトラッキングの追加

また、顧客が閲覧した特定の製品の製品名やIDなどのカスタムデータを追跡するイベントトラッキングを追加することもできます。これには、コントローラーにカスタムコードを記述し、tdTrack.js関数を呼び出す必要があります。

テンプレートファイルからtdTrack.js関数を呼び出して、次のコードを使用してカスタムデータを追跡できます：


```isscript
<isif condition="${pdict.tdData}">
isscript
require('*/cartridge/scripts/tdTrack').trackEvent(pdict.tdData)
</isscript>
</isif>
```

**pdict**内の**tdData**プロパティ名は必須ではありません。コントローラーで任意の名前を付けることができます。また、予期しないエラーを回避するために、トラッキング関数を呼び出す前にプロパティが設定されていることを確認してください。
次の製品コントローラーの例で、カスタムコードの使用方法を確認できます：

![](/assets/image2022-4-18_10-42-47.910293d0b84793ebdb2429639c38d391a25c21a0f435d8efea18538ecd19e2f4.84f5db3d.png)

ページビューとイベントトラッキングのisscriptは、要件に基づいて任意のページに追加できますが、**templates/default/common/layout/page.isml**のheadタグの下に追加し、Treasure Dataテンプレートの後に追加することを要求することで、サイトのすべてのページで動作させることができます。

### クリックトラッキングの追加

**Enable Click Tracking?**設定を**Yes**に設定することで、この機能を有効にできます。クリックトラッキングが有効になると、Treasure Dataスクリプトは次の要素でのクリックアクションを追跡します：

1. role=buttonまたはrole=link
2. a
3. button
4. input、を除く


Treasure Dataカートリッジは、オンラインストアフロントとTreasure Dataプラットフォーム間で必要なすべての通信を、非同期JavaScriptを介して自動的に処理します。これはトラッキング機能のみを実行し、表示可能なページコンテンツには影響を与えません。