什麼是 Oddle Shop Tracker？

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

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

此功能需要一些 JavaScript 知識。如果您不是開發人員，請聯絡 [e-mail] 以取得自訂追蹤設定方面的協助。

---

運作方式

您可透過在以下位置定義一個物件陣列來設定追蹤器： 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。

<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。

<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>