# 網站用戶行為追蹤

{% hint style="danger" %}
**注意，此文件只適用於工程師，如閣下並非工程師，請把這文件交給工程師以安裝到網站。**
{% endhint %}

{% hint style="info" %}
追蹤代碼埋放完成後可至 [Pixel 紀錄](https://console.omnichat.ai/pixel-record) 頁面查看 Omnichat 是否正確收到事件
{% endhint %}

如您是使用 Shopify 網站，請點擊以下連結來進行操作：

{% content-ref url="/pages/VZK9VOOk0uHUBMDFIwgB" %}
[在 Shopify 埋設 Omnichat Pixel](/integration/tracking-pixel/zai-shopify-mai-she-omnichat-pixel.md)
{% endcontent-ref %}

## 使用入門

**使用前，請先根據 「**[**安裝對話插件**](https://docs.omnichat.ai/features/tong-xun-qu-dao/wang-zhan-dui-hua-cha-jian/install)**」，把 Omnichat 的 Javascript 插件安裝到你的官網。**

## 網站基本會員資料

| 參數                     | 類型     | 必須提供 |
| ---------------------- | ------ | ---- |
| memberId               | string | 否    |
| memberEmail            | string | 否    |
| memberPhone            | string | 否    |
| memberName             | string | 否    |
| memberProfilePic       | string | 否    |
| memberCustomAttributes | string | 否    |

🙌🏻 儲存自訂屬性需另行加購「Pixel 使用自訂屬性」功能；若需協助埋放，將再另行收取費用。

安裝插件後，可以透過以下方法啓動網站行為追蹤。

將以下 Javascript 代碼方置到網站所有頁面 **\</body>** 之前:

```javascript
<script type="text/javascript">
    // OMNICHAT TRACKER V1.0
    window.omnichatTracker = window.omnichatTracker || [];
    window.omnichatTracker.push(['init', 'config', {
        "memberId": "<LOGGED-IN-MEMBER-ID>",
        "memberEmail": "<LOGGED-IN-MEMBER-EMAIL>",
        "memberPhone": "<LOGGED-IN-MEMBER-PHONE-NUMBER>",
        "memberName": "<LOGGED-IN-MEMBER-NAME>",
        "memberProfilePic": "<LOGGED-IN-MEMBER-PROFILE-PICTURE-URL>",
        "memberCustomAttributes": { 
	        "<CUSTOM-ATTRIBUTES1-KEY>": "<CUSTOM-ATTRIBUTES1-VALUE>", 
	        "<CUSTOM-ATTRIBUTES2-KEY>": "<CUSTOM-ATTRIBUTES2-VALUE>", 
	        "<CUSTOM-ATTRIBUTES3-KEY>": "<CUSTOM-ATTRIBUTES3-VALUE>", 
	        "<CUSTOM-ATTRIBUTES4-KEY>": "<CUSTOM-ATTRIBUTES4-VALUE>", 
	        "<CUSTOM-ATTRIBUTES5-KEY>": "<CUSTOM-ATTRIBUTES5-VALUE>", 
        }
    }]);
</script>
```

啓動網站行為追蹤時，你可以選擇提交會員姓名、會員編號、電郵或電話，資料會在後台顯示，有利於查找對應的會員。

* 取代 **\<LOGGED-IN-MEMBER-ID>** 為網站上已登入會員的編號。如果是訪客或沒有相關資料，可以漏空。
* 取代 **\<LOGGED-IN-MEMBER-EMAIL>** 為網站上已登入會員的電郵。如果是訪客或沒有相關資料，可以漏空。
* 取代 **\<LOGGED-IN-MEMBER-PHONE-NUMBER>** 為網站上已登入會員的電話號碼(**必需加上國碼，例如：852、886，否則有機會無法綁定會員資料**)。如果是訪客或沒有相關資料，可以漏空。
* 取代 **\<LOGGED-IN-MEMBER-NAME>** 為網站上已登入會員的姓名。如果是訪客或沒有相關資料，可以漏空。
* 取代 **\<LOGGED-IN-MEMBER-PROFILE-PICTURE>** 為網站上已登入會員的大頭貼網址。如果是訪客或沒有相關資料，可以漏空。
* 取代 **\<CUSTOM-ATTRIBUTES-KEY>** 為自訂屬性的名稱，例如：會員等級, 生日 , 性別。此名稱將作為標籤顯示於您的後台。
* 取代 **\<CUSTOM-ATTRIBUTES-VALUE>** 為自訂屬性數值。若無相關資訊，請保留空白。
  1. 在儲存自訂屬性前，需先於 Omnichat 後台建立對應的 key；若接收資料時 key 不存在，系統將自動忽略該屬性。
  2. 建議儲存 5 個以內 的自訂屬性，且每個自訂屬性長度不得超過 60 字。若呼叫 API 總長度超出 URL 限制，將導致儲存失敗，請於正式使用前先行測試以確認可正常儲存。
  3. 傳送自訂屬性時，屬性值需符合以下格式規範
     * 文字（text）：無特定格式限制
     * 數字（number）：使用數值格式（整數／浮點數），不可使用字串
     * 是 / 否（boolean）：使用 true / false
     * 時間與時間（datetime）：使用 ISO8601 格式的日期時間字串，例如 2022-11-01T14:16:00
     * 日期（date）：使用 YYYY-MM-DD 格式的字串

```javascript
<script type="text/javascript">
    // OMNICHAT TRACKER V1.0
    window.omnichatTracker = window.omnichatTracker || [];
    window.omnichatTracker.push(['init', 'config', {
        "memberId": "<LOGGED-IN-MEMBER-ID>",
        "memberEmail": "<LOGGED-IN-MEMBER-EMAIL>",
        "memberPhone": "<LOGGED-IN-MEMBER-PHONE-NUMBER>",
        "memberName": "<LOGGED-IN-MEMBER-NAME>",
        "memberProfilePic": "<LOGGED-IN-MEMBER-PROFILE-PICTURE-URL>",
        "memberCustomAttributes": { 
          "key": "value",
	        "ThirdPartyId": "xxxx-xxxx-xxxx-xxxx", 
	        "TotalSpending": 900.00, 
	        "AcceptedMarketingPromotion": true,
	        "LastPurchaseDate": "2022-11-01",
	        "RegisterDatetime": "2022-11-01T14:16:00"
        }
    }]);
</script>
```

## 電子商務追蹤

### 介紹

透過我們的 Javascript 插件，你可以追蹤到你的訪客及會員的電子商務行為，並可以在 OmniChat 的後台查閱報表及針對用戶行為設定行銷訊息。

{% hint style="warning" %}
提醒您，埋放商品數據中 pixel 資料裏面的商品 id，必須與產品目錄裡的商品 id 一致
{% endhint %}

### 商品數據

在傳送與商品相關的事件(加入購物車、結帳等)時，可以傳送以下的參數:

| 參數       | 類型      | 必須提供 | 說明          |
| -------- | ------- | ---- | ----------- |
| id       | string  | 是    | 商品的唯一編號/SKU |
| name     | string  | 是    | 商品名稱        |
| brand    | string  | 否    | 商品的品牌       |
| category | string  | 否    | 商品類別        |
| variant  | string  | 否    | 商品款式        |
| quantity | integer | 否    | 商品數量        |
| price    | number  | 否    | 商品單價        |

### 訂單數據

在傳送與訂單相關的事件(購買完成)時，可以傳送以下的參數:

| 參數              | 類型     | 必須提供 | 說明       |
| --------------- | ------ | ---- | -------- |
| transaction\_id | string | 是    | 訂單編號     |
| amount          | number | 是    | 訂單總額     |
| currency        | string | 否    | 訂單結帳貨幣單位 |

### 追蹤查看商品頁

要追蹤查看商品頁的次數，請發送以下 `view_product` 的事件:

```javascript
window.omnichatTracker.push(['event','view_product', {
    "id": "P12345",
    "name": "Android Warhol T-Shirt",
    "brand": "Google",
    "category": "Apparel/T-Shirts",
    "variant": "Black",
    "price": '2.0'
}]);
```

* 應用例子：進入商品資料頁時運行以上 Javascript (放在 \</body> 前)

### 追蹤加入購物車

要追蹤加入購物車的行為，請發送以下 `add_to_cart` 的事件:

```javascript
window.omnichatTracker.push(['event','add_to_cart', {
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 2,
            "price": '2.0'
        }
    ]
}]);
```

* 應用例子：客人在網站上點擊「加入購物車」按鈕 (可參考以下 Javascript 範例)

```javascript
// 需要替換 "add-to-cart-button" 為網站上「加入購物車」按鈕的 ID
document.getElementById("add-to-cart-button").addEventListener('click', function(e) {
    window.omnichatTracker.push(['event','add_to_cart', {
        "items": [
            {
                "id": "P12345",
                "name": "A Black T-Shirt",
                "brand": "Brand B",
                "category": "Apparel/T-Shirts",
                "variant": "Black",
                "quantity": 2,
                "price": '2.0'
            }
        ]
    }]);
});
```

### 追蹤從購物車移除商品

要追蹤從購物車移除商品的行為，請發送以下 `remove_from_cart` 的事件:

```javascript
window.omnichatTracker.push(['event','remove_from_cart', {
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 1,
            "price": '2.0'
        }
    ]
}]);
```

* 應用例子：客人在網站上點擊「移除商品」按鈕 (可參考以下 javascript 範例)

```javascript
// 需要替換 "remove-product" 為網站上「移除商品」按鈕的 ID
document.getElementById("remove-product").addEventListener('click', function(e) {
    window.omnichatTracker.push(['event','add_to_cart', {
        "items": [
            {
                "id": "P12345",
                "name": "A Black T-Shirt",
                "brand": "Brand B",
                "category": "Apparel/T-Shirts",
                "variant": "Black",
                "quantity": 2,
                "price": '2.0'
            }
        ]
    }]);
});
```

### 追蹤結帳情況

要追蹤結帳情況的行為，請發送以下 `checkout` 的事件:

```javascript
window.omnichatTracker.push(['event','checkout', {
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 1,
            "price": '2.0'
        },
        {
            "id": "P67890",
            "name": "A Red T-Shirts",
            "brand": "Brand A",
            "category": "Apparel/T-Shirts",
            "variant": "Red",
            "quantity": 2,
            "price": '3.0'
        }
    ]
}]);
```

* 應用例子：進入結帳頁時運行以上 Javascript (放在 \</body> 前)

### 追蹤購買完成

要追蹤購買完成的行為，請發送以下 `purchase` 的事件:

```javascript
window.omnichatTracker.push(['event','purchase', {
    "transaction_id": "ORDER123456",
    "amount": "7.0",
    "currency": "TWD",
    "items": [
        {
            "id": "P12345",
            "name": "A Black T-Shirt",
            "brand": "Brand B",
            "category": "Apparel/T-Shirts",
            "variant": "Black",
            "quantity": 1,
            "price": '2.0'
        },
        {
            "id": "P67890",
            "name": "A Red T-Shirts",
            "brand": "Brand A",
            "category": "Apparel/T-Shirts",
            "variant": "Red",
            "quantity": 2,
            "price": '3.0'
        }
    ]
}]);
```

* 應用例子：客人完成結帳時，載入完成結帳頁面時運行以上 Javascript (放在 \</body> 前)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.omnichat.ai/integration/tracking-pixel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.