> 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/oddle-shop/what-is-the-oddle-shop-tracker.md).

# 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
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, and the optional `goal` query parameter:

```
GET https://www.oddle.me/docs/help-center/oddle-shop/what-is-the-oddle-shop-tracker.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.