Mobile Web Order Reporting

Confirm ButtonJS Implementation

Make sure that ButtonJS has already been added to your base HTML template (i.e. ButtonJS must be on the checkout confirmation page where you have access to order details). It is critically important that ButtonJS is present on the page the user has been initially linked to - otherwise, we will not be able to track and attribute any orders stemming from that link. If it is not, add the below code:

HTML

<script>
window.ButtonWebConfig = {
  applicationId: 'app-xxxxxxxxxxxxxxxx', // Replace app-xxxxxxxxxxxxxxxx with your App ID from the Button Dashboard https://app.usebutton.com
  enableSmsCollection: true // Optional, used when integrating with SMS for PostTap
};
(function(u,s,e,b,t,n){
  u['__bttnio']=b;u[b]=u[b]||function(){(u[b].q=u[b].q||[]).push(arguments)};t=s.createElement(e);n=s.getElementsByTagName(e)[0];t.async=1;t.src='https://web.btncdn.com/v1/button.js';n.parentNode.insertBefore(t,n)
})(window, document, 'script', 'bttnio');
</script>

Create Order Object

Construct a set of objects that contain your line item and order details, ultimately creating a final order object which you will report to Button below.

The structure of this order object is nearly identical to orders reported server-side. The only difference is that reporting the btn_ref, Button's opaque tracking token, is not needed. As long as ButtonJS was on the page the user's landing page, it is picked up automatically by the library.

JavaScript

// Create line item 1
let lineItem1 = {
  identifier: 's6-18860485p21a12v65a13v54',
  sku: 's6-18860485p21a12v65a13v54',
  description: 'Keep Calm and Droid On - R2-D2 Art',
  category: ['Home Decor'],
  total: 3799,
  quantity: 1,
  attributes: {
    promo_code: 'maythefourthbewithyou',
    brand: 'Ariel Sinha'
  }
};

// Create line item 2
let lineItem2 = {
  identifier: 's6-19791302p77a224v780',
  sku: 's6-19791302p77a224v780',
  description: 'Leia Skywalker Bar Stool',
  category: ['Furniture'],
  total: 39800, // total = item unit price * quantity
  quantity: 2,
  attributes: {
    promo_code: 'maythefourthbewithyou',
    brand: 'Ariel Sinha'
  }
};

// Create a customer (email is lowercased, then hashed via SHA-256)
let customerObject = {
  id: 'customer-1234',
  email_sha256: '814FA0649630F8B219E30952E92FEEFB70005C386C726F92FA93D1C18018EADE',
  device_id: '12345678-1234-5678-1234-567812345678',
  is_new: true,
};

// Create the order and add optional properties
// Order total will be calculated from line-item totals
let order = {
  order_id: 'order-1a2b3c',
  customer_order_id: 'receipt-123456',
  currency: 'USD',
  purchase_date: '2020-07-301T12:00:00Z',
  customer: customerObject,
  line_items: [lineItem1, lineItem2]
};

Report the Order

After creating the order object, you can then report your order to Button. If so desired, you can include a callback function as the third argument - however this is entirely optional.

JavaScript

// Report the order directly to Button.
bttnio('reportOrder', order, optionalCallback)

Conversion Field Definitions

When reporting client-side, our Order API endpoint accepts an order object with the following properties:

Order Object Properties