> For the complete documentation index, see [llms.txt](https://www.oddle.me/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.oddle.me/docs/help-center/help-center-zh/oddle-shang-dian/what-is-the-oddle-shop-tracker.md).

# 什麼是 Oddle 商店追蹤器？

Oddle Shop Tracker 是一個工具，適合需要在顧客下單旅程中的特定時點觸發自訂追蹤腳本的開發人員——例如，當顧客完成購買時，將轉換事件傳送到 Google Ads 或第三方聯盟網路。

它的運作方式就像一層中介軟體：您可定義一組要監聽的動作、程式碼應執行的條件，以及要執行的回呼函式。這會透過您商店行銷設定中的自訂腳本注入。

{% hint style="info" %}
此功能需要一些 JavaScript 知識。如果您不是開發人員，請聯絡 <support@oddle.me> 以取得自訂追蹤設定方面的協助。
{% endhint %}

***

## 運作方式

您可透過在以下位置定義一個物件陣列來設定追蹤器： `window.oddleTracker`。每個物件都有三個屬性：

| 屬性           | 說明                          |
| ------------ | --------------------------- |
| `actionType` | 要監聽的應用程式事件                  |
| `condition`  | 一個會回傳 `true` callback 是否應觸發 |
| `callback`   | 當動作與條件都符合時要執行的函式            |

### 主要動作類型

以下是最常用的事件：

```
@@route/ROUTE_INIT
@@route/ROUTE_CHANGE_COMPLETE
@@checkout/GET_CHECKOUT_META_SUCCESS
@@order/ADD_TO_CART_SUCCESS
@@user/REGISTER_SUCCESS
@@newsletter/NEWSLETTER_SIGNUP_SUCCESS
```

您的 callback 會接收一個含有兩個屬性的物件：

* `action` — 包含 `type` 和 `payload` 目前事件的
* `state` — 目前的應用程式狀態，您可在此存取訂單資料

***

## 如何注入追蹤器

將您的追蹤腳本加入 **線上訂購 > 設定 > 行銷 > 自訂腳本**。請將腳本放在以下兩處： **購物車頁面 body** 以及 **感謝頁面 head** — 這可確保無論顧客是重新載入感謝頁面，或是透過應用程式內導覽進入，都能正確觸發。

***

## 範例

### Google Ads 轉換追蹤

將 `TODO: PUT YOUR ID HERE` 替換為您的 Google Ads 轉換 ID。

```javascript
<script>
var checkThankyouPage = function (props) {
  var state = props.state;
  return window.location.href.indexOf('/thankyou') > -1 && (
    state['@@thankYou'].checkoutResults.fetched ||
    state['@@checkout'].checkoutResults.fetched
  );
};

var notifyPurchase = function (props) {
  if (window.gtag) {
    var state = props.state;
    var storeOrderData = state['@@checkout'].checkoutResults.fetched
      ? state['@@checkout'].checkoutResults.data.storeOrder
      : state['@@thankYou'].checkoutResults.data.storeOrder;
    gtag('event', 'conversion', {
      send_to: 'TODO: PUT YOUR ID HERE',
      transaction_id: storeOrderData.id,
      value: storeOrderData.total,
      currency: storeOrderData.currencyCode,
    });
  }
};

window.oddleTracker = [
  { actionType: '@@route/ROUTE_INIT', condition: checkThankyouPage, callback: notifyPurchase },
  { actionType: '@@route/ROUTE_CHANGE_COMPLETE', condition: checkThankyouPage, callback: notifyPurchase }
];
</script>
```

### 自訂購買追蹤器

此範例使用第三方轉換程式庫。請將 `XXXX` 替換為您的網站 ID。

```javascript
<script type="text/javascript" src="//cdn.vbtrax.com/javascripts/va.js"></script>
<script>
var checkThankyouPage = function (props) {
  var state = props.state;
  return window.location.href.indexOf('/thankyou') > -1 && (
    state['@@thankYou'].checkoutResults.fetched ||
    state['@@checkout'].checkoutResults.fetched
  );
};

var notifyPurchase = function (props) {
  if (window.VA) {
    var state = props.state;
    var storeOrderData = state['@@checkout'].checkoutResults.fetched
      ? state['@@checkout'].checkoutResults.data.storeOrder
      : state['@@thankYou'].checkoutResults.data.storeOrder;
    VA.remoteLoad({
      whiteLabel: { id: 8, siteId: 'XXXX', domain: 'vbtrax.com' },
      conversion: true,
      conversionData: {
        step: 'sale',
        revenue: storeOrderData.total,
        orderTotal: storeOrderData.total,
        order: storeOrderData.orderNumber
      },
      locale: 'en-US',
      mkt: true
    });
  }
};

window.oddleTracker = [
  { actionType: '@@route/ROUTE_INIT', condition: checkThankyouPage, callback: notifyPurchase },
  { actionType: '@@route/ROUTE_CHANGE_COMPLETE', condition: checkThankyouPage, callback: notifyPurchase }
];
</script>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://www.oddle.me/docs/help-center/help-center-zh/oddle-shang-dian/what-is-the-oddle-shop-tracker.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.