What is the Oddle Shop Tracker?

The Oddle Shop Tracker is a tool for developers who need to fire custom tracking scripts at specific points during the customer ordering journey — for example, sending a conversion event to Google Ads or a third-party affiliate network when a customer completes a purchase.

It works as a middleware layer: you define a set of actions to listen for, conditions under which your code should run, and a callback function to execute. This is injected via a custom script in your shop's marketing settings.

This feature requires some JavaScript knowledge. If you're not a developer, contact [e-mail] for help setting up custom tracking.

---

How it works

You configure the tracker by defining an array of objects in window.oddleTracker. Each object has three properties:

Property	Description
actionType	The application event to listen for
condition	A function that returns true if the callback should fire
callback	The function to run when the action and condition are met

Key action types

These are the most commonly used events:

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

Your callback receives an object with two properties:

• action — contains type and payload of the current event
• state — the current application state, where you can access order data

---

How to inject the tracker

Add your tracker script in Online Ordering > Settings > Marketing > Custom Scripts. Place the script in both the Shopping Cart Page body and the Thank You Page head — this ensures it fires correctly whether the customer loads the thank-you page fresh or arrives via in-app navigation.

---

Examples

Google Ads conversion tracking

Replace TODO: PUT YOUR ID HERE with your Google Ads conversion 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>

Custom purchase tracker

This example uses a third-party conversion library. Replace XXXX with your site 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>