Use A JavaScript Snippet To Pass Cart And Order Data

You can construct an Order and Cart Capture JavaScript Snippet that can be used to collect cart and order data from your site using Bronto Order Service. Use the Order and Cart Capture JavaScript Snippet with Script Manager to send cart and order data to Bronto.

Integrate The Order And Cart Capture JavaScript Snippet

Note: If you already use Legacy Conversion Tracking you will need to work with Bronto to fully move from Legacy Conversion Tracking to this process. See Migrate From Legacy Conversion Tracking for more information.
Note: In order for the script to work, you must first add the Script Manager code to your site.
  1. Go to Settings > Integrations > Script Manager.
    1. Copy the code in the black box.
    2. Paste the copied code into the code for your site.

      The code should be added to each page on your site. We also recommend embedding the code in the site's footer code so that the code runs after everything else on the page.

  2. Copy the Order and Cart Capture JavaScript Snippet.
  3. Add your modified JavaScript snippet to any page on your site where cart or order data is captured.
  4. Remove fields from the Order and Cart Capture JavaScript Snippet that you do not plan to collect. If you are using the script to collect order capture information on order pages, emailAddress and grandTotal are both required fields. If those fields are missing, the script cannot send complete order records to Bronto. If you are using the script on a cart page to send line item information to Bronto, the line item fields quantity and totalPrice are both required.
    Note: emailAddress should only be mapped when it contains a value. Do not include emailAddress when the field is blank/null.
  5. Update the Order and Cart Capture JavaScript Snippet to properly collect the order data you do want to pass from your site. The values on the right should be replaced with variables from your site.
  6. Set the phase to one of the following phases: SHOPPING, BILLING, SHIPPING_INFO, SHIPPING_METHOD, PAYMENT, ORDER_REVIEW, ORDER_COMPLETE. If the phase is not set, the cart will default to SHOPPING.
  7. Configure your order settings in Bronto.
  8. Test that the order data is being captured correctly:
    1. Place a test order on your site.
    2. Go to Commerce > Orders.
    3. Click Show Advanced Options.
    4. Use the Order Date fields to search for orders from the current day.
    5. Find your test order in the list and compare the order details in Bronto to the order details on your site.
    6. We recommend exporting your order data from both Bronto and your commerce platform and running a comparison.
    7. If the order is missing in Bronto or the order details do not match, make sure your JavaScript snippet is constructed properly and both the JavaScript snippet and the Script Manager code are included in your site code appropriately.
  9. Test that cart data is being captured correctly:
    1. Copy the customerCartId from your script. You should have this value hard-coded during testing. It will be auto-generated when not set.
    2. Add an item to your shopping cart.
    3. If you do not already have a REST API integration set up, create a REST API integration.
      Note: Your REST API integration must have Cart Read permission.
    4. Copy your ID and Secret.
    5. Open Terminal on your computer.
    6. To get your access token, run the following cURL command after replacing YOUR_ID and YOUR_SECRET with your retrieved values.
      curl -X POST -d "grant_type=client_credentials&client_id=YOUR_ID&client_secret=YOUR_SECRET" https://auth.bronto.com/oauth2/token
    7. Copy the returned access token.
    8. Create a Get Cart request. Replace the values for YOUR_CUSTOMERCARTID and YOUR_ACCESS_TOKEN with your own.
      curl -X GET https://rest.bronto.com/carts/customerCartId/YOUR_CUSTOMERCARTID -H "Authorization: bearer YOUR_ACCESS_TOKEN" -H 'Cache-Control: no-cache' -H 'Content-Type: application/json'
    9. Inspect the returned data and verify that you see your cart.
    10. If you modified your customerCartId in your script during testing, revert back to your previous value.

Order And Cart Capture JavaScript Snippet

<script type="text/javascript">
  bronto('cart:send', {
        "customerCartId": "cart_ABC123", // Set for testing. 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": "05 - 18 - 2018", // Not necessary for Cart Recovery
        "shippingDetails": "FedEx", // Not necessary for Cart Recovery
        "shippingTrackingUrl": "http://fedex.com/tracking/NIeX3KYLcPhgRzKy", // Not necessary for Cart Recovery
        "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"    
            }
        ]
    });
</script>