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

{% hint style="info" %}
This feature requires some JavaScript knowledge. If you're not a developer, contact <support@oddle.me> for help setting up custom tracking.
{% endhint %}

***

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

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

### Custom purchase tracker

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