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.
- 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 removeemailAddress
if you do not plan to capture the contact email address. - If you want to capture line items, then
quantity
andtotalPrice
are required. - For order capture only,
grandTotal
is required.
- If you want to capture the contact email address, and you do
not use a contact capture selector, then do not remove
- 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 toORDER_COMPLETE
to convert a cart into an order.
- Remove any parameter in the sample that you do not want to capture in
Bronto.
-
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 formobilePhoneNumber
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.
- In Google Chrome, go to your site and add an item to a cart.
- Open Chrome Developer Tools.
- Click Network.
- Search for
maw
.Each cart id appears under Name.
- Select a cart id.
- Verify that Request Method is
POST
. - 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.
- Verify that Request Payload contains each parameter and a dynamically generated value that you specify in your modified JavaScript.
- Optional:
Test order data capture.
- On your site, make a test order.
- In Bronto, go to Commerce > Orders.
- Click Show Advanced Options.
- Locate your test order.
- 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.