# Tracking orders and conversions
The ordering flow runs on the Iteras server, usually inside an iframe on your site, so your analytics cannot see it directly. This guide describes mechanisms for tracking what happens, both client-side and server-side. Combine them as needed.
Iteras does not track visitors or load any analytics on its own, since that usually requires consent that only you can collect. Each mechanism here is something you set up, and handling consent around it is your responsibility.
# Tracking what happens in the iframes
Iteras has a little API for sending client-side tracking events to your pages from inside the iframes that you can then listen to. The listener runs on your page, where your consent management and analytics are already set up, and nothing loads inside the iframe. So this is the mechanism we recommend for an ordering form embedded on your page.
The way it works is that code added through the code customization fields in the
customer service settings
runs inside the self-service and ordering pages. From there,
Iteras.track(jsonData) sends the given JSON data out of the iframe.
Simple page load tracking of the ordering pages could look like
this:
<script>
document.addEventListener('DOMContentLoaded', function() {
if (document.body.classList.contains("ordering-base"))
Iteras.track({ "type": "page-load", "page": document.body.dataset.page });
});
</script>
The body element carries a class for the section and a
data-page attribute naming the specific page, so you
can scope what you send and tell the pages apart. If you want to track the
self-service pages as well, simply drop the class list check.
On your page, an iteras-track
DOM event bubbles up carrying the sent data in event.detail.data.
The event bubbles from the iframe element, so a listener on
document catches events from all Iteras iframes on
the page:
document.addEventListener("iteras-track", function (e) {
console.log("Got tracking event:", e.detail.data);
});
The listener requires iteras.js on the embedding page (see
the Javascript API) -
it is what converts the message from the iframe into the DOM
event.
# Carrying tracking parameters to the finished page
After the last step of the flow, Iteras redirects out of the
iframe and loads a page as the top-level page. If it's part of a paywall offering, this would
usually be the page the visitor came from. Otherwise the given
next parameter on the
ordering iframe,
the return_url of the
place order API,
or the redirect URL configured on the ordering form. That page is
an ordinary page view on your site, where your analytics runs as
usual, so you can fire a conversion event there.
Attribution or marketing campaign GET parameters on the page embedding the iframe do not travel through the flow by themselves. If these parameters should be visible on the finished page, copy them onto the next URL when generating the iframe:
var currentUrl = new URL(window.location.href);
var finishUrl = new URL("/myfinishpage/", window.location.origin);
finishUrl.searchParams.set("utm_source", currentUrl.searchParams.get("utm_source"));
// ... etc.
Iteras.orderingiframe({
"profile": "myprofile",
"orderingid": "XXXXXX",
"next": finishUrl.href
})
# Reading order data on the finished page
Data about the order can be useful on the finished page: An order ID
to deduplicate conversions on, the customer's name for a personal
greeting, or a signal for your content system to react to. The ordering form
can append this to the redirect as an encrypted token in the
iteras-order-data GET parameter - the token format
and how to decode it are described under
order data on the redirect.
The token is decoded on your server, so the flow is as follows: The request for the finished page carries the parameter, your server decodes it and renders the page with the order data, and the page fires the analytics events - under your consent handling, since it is your page.
For more detail than you want to put in the redirect - the ordered products and their prices, for example - include the order ID field and look the order up through the orders API:
GET /api/orders/?order_id=83529&fields=data,invoice_lines HTTP/1.1
The order ID is also the stable key for joining browser-side conversions with the API data later.
# Adding analytics scripts to the Iteras pages
The code customization fields can also carry an analytics snippet directly, so page views and events are collected inside the ordering and self-service pages themselves, without wiring on the embedding page.
Consent needs particular attention here. The Iteras pages are a separate document on an Iteras domain unless you set up a custom domain, so a consent choice stored on your site is not visible inside them, and a snippet added without a guard runs for every visitor. Inject a script this way only if it may run without consent (e.g. a cookieless, consent-exempt counter) or you can give the pages a consent signal they can actually read.
The latter works when the pages are served on a custom domain, i.e. a subdomain of your site. A consent cookie set for the whole domain - as the common consent platforms do - is readable inside the iframe, and the snippet can check it before initializing.
When the consent state only exists on your own pages, send events out of the iframe as described above instead, and decide on your page what to forward.
# Counting orders server-side
Browser-based tracking may be imprecise due to ad blockers, declined
consent, a tab closed before the finished page loaded, etc. When the
numbers have to be complete, read the orders from the
orders API
periodically, with created_after set around the last
run, and reconcile against what the browser reported - the order
ID from the redirect data is the join key. For a continuous feed
of customer and subscription changes, set up
webhooks
as described in the
synchronization guide.