Adding the Order Tagging

All thank-you and order-confirmation pages must have the conversion tracking markup.

The conversion metadata is used for sending personalized order-followup emails, personalize the recommendations e.g. order-related, for segmentation insights and conversion statistics.

nostojs(api => {
  api.setTaggingProvider("pageType", "order")
  api.setTaggingProvider("order", {
    payment_provider: "checkmo",
    order_status: "pending",
    info: {
      order_number: "1445",
      email: "[email protected]",
      first_name: "John",
      last_name: "Doe",
      type: "order"
    },
    items: [
      {
        product_id: "Canoe123",
        quantity: 1,
        name: "Acme Canoe",
        unit_price: 999.0,
        price_currency_code: "EUR"
      },
      {
        product_id: "Canoe245",
        quantity: 3,
        name: "Acme Large Canoe",
        unit_price: 19.00,
        price_currency_code: "EUR"
      }
    ]
  })
})

To learn more about the api.setTaggingProvider usage, please refer to the official API documentation.

The full schema for order tagging is defined here

or via DOM tagging

<div class="nosto_page_type" style="display:none" translate="no">order</div>
<div class="nosto_purchase_order" style="display:none" translate="no">
    <span class="order_number">1445</span>

    <div class="buyer">
        <span class="email">[email protected]</span>
        <span class="first_name">John</span>
        <span class="last_name">Doe</span>
        <span class="marketing_permission">false</span>
    </div>

    <span class="payment_provider">checkmo</span>
    <span class="order_status_code">pending</span>

    <div class="purchased_items">
        <div class="line_item">
            <span class="product_id">Canoe123</span>
            <span class="quantity">1</span>
            <span class="name">Acme Canoe</span>
            <span class="unit_price">999.00</span>
            <span class="price_currency_code">EUR</span>
        </div>

        <div class="line_item">
            <span class="product_id">Canoe245</span>
            <span class="quantity">3</span>
            <span class="name">Acme Large Canoe</span>
            <span class="unit_price">19.00</span>
            <span class="price_currency_code">EUR</span>
        </div>
    </div>
</div>

Note: The product ID of the product tagging, cart tagging and order tagging must match. Failure to do so will lead to a mismatch in both attribution and statistics across the Nosto product.

Tagging the buyer

You can omit the buyer tagging either partially, or completely if you do not want Nosto to crawl this information. The user details are stored for possible marketing purposes and mainly observed email address is used in this context. Marketing permission is false by default but if this user has explicitly agreed to receive marketing then you can set it to true manually.

Tagging the currencies

Currencies should always be represented in the ISO-4471 three-letter format. For example, use the code USD instead of $ to represent the United States Dollar.

Tagging the payment provider

Payment provider is the payment method or provider used by a shopper to pay the purchase. Omit the payment provider detail if you do not want Nosto to crawl this information.

Tagging the order status code

Status code will be used to track the order state. Different payment providers may use different status codes.

Adding support for advanced use cases

Many ecommerce stores utilize SKU:s or "child" products that are sorted under the same "parent" product. To extend the above example with SKU support refer to this article

In cases where a product might have multiple prices in differing currencies you can also add support for multi-currency. Refer to this article

Troubleshooting order tagging:

Once included on all pages, you can review if the site is transmitting data using the Nosto Debug Toolbar. If you can see order contents being picked up under "Tagging" → "Order" then the order details are correctly set up in the source code.

You can further verify your session in the Nosto admin by using the live feed under: https://my.nosto.com/admin/$accountID/liveFeed to see if Nosto correctly picks up product view → product carted → product bought events. You can export all the order history from the store under Settings → Other → Order report under https://my.nosto.com/admin/$account/account/orders/report

Nosto debug toolbar order

live-feed-product-order

Translate attribute

The translate attribute is a HTML5 standard attribute which specifies whether the value of the element and it's Text node children should be translated. If your tagging elements are being translated by e.g. Google Translator then this is the way to opt out elements being translated by Google and possibly other vendors.