Sending Cart and Order Data To Bronto With JavaScript

Learn how to configure Bronto and use JavaScript to send cart and order data from your site to Bronto.

Before you begin

Ensure that you have the following tasks complete:

Script Manager is enabled.
The Copy Site Code from Script Manager is added to each page in your site.
The following Script Manager features are enabled:
- Cart Recovery
- Order Capture

About this task

When you set up Bronto to receive order data with JavaScript, the Source value defaults to WEBSITE in the detailed view of the Orders page. For more information see, Order Fields / Order Details.

Procedure

Copy and paste the following JavaScript to an editor:

var brontoCart = {
        "customerCartId": "cart_ABC123", // This value will be auto-generated when not set. 
        "phase": "ORDER_COMPLETE", // Set as SHOPPING for Cart Recovery
        "currency": "USD",
        "subtotal": 35.98,
        "discountAmount": 0,
        "taxAmount": 0,
        "grandTotal": 35.98,
        "customerOrderId": "123ABC", // Not necessary for Cart Recovery
        "emailAddress": "example@example.com",
        "cartUrl": "http://brontogear.com/",
        "shippingAmount": 7.99, // Not necessary for Cart Recovery
        "shippingDate": "2019-11-02T18:47:57+00:00", // Not necessary for Cart Recovery
        "shippingDetails": "FedEx", // Not necessary for Cart Recovery
        "shippingTrackingUrl": "http://fedex.com/tracking/NIeX3KYLcPhgRzKy", // Not necessary for Cart Recovery
        "mobilePhoneNumber": "19195551234",
        "orderSmsConsentChecked": true,
        "lineItems": [{
                "sku": "576879",
                "name": "Shirt",
                "description": "A super great description of the product",
                "category": "Shirts > T-Shirts > Blue",
                "other": "This can be any string value you like",
                "unitPrice": 11.99,
                "salePrice": 11.99,
                "quantity": 2,
                "totalPrice": 23.98,
                "imageUrl": "http://brontogear.com/a/p/shirt.jpeg",
                "productUrl": "http://brontogear.com/index.php/shirt.html"
              },
             {
                 "sku": "1112296",
                 "name": "Fleece Jacket",
                 "description": "A well appointed Fleece jacket",
                 "category": "Jackets > Winter > Fleece",
                 "other": "This can be any string value you like",
                 "unitPrice": 65.99,
                 "salePrice": 55.50,
                 "quantity": 1,
                 "totalPrice": 55.50,
                 "imageUrl": "http://brontogear.com/a/p/fleece.jpeg",
                 "productUrl": "http://brontogear.com/index.php/fleece.html"    
            }
        ]
    };
    bronto("cart:send", brontoCart);

Customize the JavaScript.
1. Remove any parameter in the sample that you do not want to capture in Bronto.
  Note:
  - If you want to capture the contact email address, and you do not use a contact capture selector, then do not remove emailAddress. Only remove emailAddress if you do not plan to capture the contact email address.
  - If you want to capture line items, then quantity and totalPrice are required.
  - For order capture only, grandTotal is required.
2. Set phase to one of the following values:
  - BILLING
  - ORDER_COMPLETE
  - ORDER_REVIEW
  - PAYMENT
  - SHIPPING_INFO
  - SHIPPING_METHOD
  - (Default) SHOPPING
  Important: For order capture, set phase to ORDER_COMPLETE to convert a cart into an order.
For each parameter that you want to capture in Bronto, replace the example value with a dynamically generated value.
For example:
```
"currency":<?php print $order['currency']; ?>
```
Important: The value for mobilePhoneNumber must include a country code, without a plus '+' sign.
Add the modified JavaScript to any page on your site where cart or order data is captured.

Note: You must include the full cart details each time you send a cart to Bronto.
In Bronto, Configure your order settings.
You can now send cart and order data from your site to Bronto.
Optional: Test cart data capture.
Note: The following test procedure uses Chrome Developer Tools. You can use the developer tools in the browser you prefer, but we recommend that you use Google Chrome.
1. In Google Chrome, go to your site and add an item to a cart.
2. Open Chrome Developer Tools.
3. Click Network.
4. Search for maw.
  Each cart id appears under Name.
5. Select a cart id.
6. Verify that Request Method is POST.
7. Verify that Request URL contains the following URL:
```
maw.bronto.com/csites/{account_id}/carts/{customerCartId}
```
  where:
  - {account_id} is the unique identifier for your Bronto account.
  - {customerCartId} is the unique identifier for the customer cart.
8. Verify that Request Payload contains each parameter and a dynamically generated value that you specify in your modified JavaScript.
Optional: Test order data capture.
1. On your site, make a test order.
2. In Bronto, go to Commerce > Orders.
3. Click Show Advanced Options.
4. Locate your test order.
5. Verify that the order details in Bronto match the order details in your site.
  Tip: Export and compare order data from Bronto to the same data from your e-commerce platform.