Previously, you learned how to integrate with Bolt Checkout. Now let’s enhance that integration by configuring analytics. Bolt supports pixel tracking by sending Shopper-triggered events to a merchant’s Google and Facebook analytics platforms. You must be an admin user in your Merchant Account to update tracking IDs.
The following steps apply to both Google and Facebook IDs:
The ID populates in the row after updating. To edit, simply repeat these steps.
The Enhanced Ecommerce setting uses Google Analytics’ standardized checkout funnel measurement to track events in checkout. Refer to Google Analytics’ Enhanced Ecommerce Developer Guide when considering this section.
Both of the following enhancements can utilize Javascript Promises to populate order data, which is used to enrich basic engagement information sent to Google Analytics.
Checkout Steps must be mapped to Google analytics using BoltCheckout.Configure Callbacks. At this point, BoltCheckout.Configure should already be added to all pages where a shopper can check out from your store. If not, see Part Three, How to Integrate with Bolt Checkout.
| Checkout Step in Google Analytics | Bolt Callback |
|---|---|
| 1 | onCheckoutStart |
| 2 | onShippingDetailsComplete |
| 3 | onShippingOptionsComplete |
| 4 | onPaymentSubmit |
| 5 | Success |
| N/A | onEmailEnter |
The following example calls are provided to demonstrate the data structure required for Google Analytics to ingest product information; you can also insert optional context using the option key seen in the _onPaymentSubmit _function.
Calls should be updated in your BoltCheckout.Configure script across all pages that use Bolt Checkout.
function onCheckoutStart() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 1},
'products': [{
'name': 'Minimalist Tee',
'id': '12345',
'price': '15.25',
'brand': 'Minimalists Club',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
function onShippingDetailsComplete() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 2},
'products': [ ]
}
}
function onPaymentSubmit() {
dataLayer.push({
'event': 'checkout',
'ecommerce': {
'checkout': {
'actionField': {'step': 4, 'option': 'Visa'},
'products': [ ]
}
},
'eventCallback': function() {
document.location = 'checkout.html';
}
Purchases can be mapped to Google Analytics using BoltCheckout.Configure callbacks. We recommend adding purchase measurements only to Step 5, the Success callback.
Bolt uses Facebook’s standard events when possible, to pass actions in checkout to Facebook through the pixel.
| Standard Facebook Event | Custom Facebook Event | Associated Bolt Callback |
|---|---|---|
| InitiateCheckout | N/A | onCheckoutStart |
| N/A | onEmailEnter | onEmailEnter |
| N/A | ShippingDetailsComplete | onShippingDetailsComplete |
| N/A | ShippingOptionsComplete | onShippingOptionsComplete |
| AddPaymentInfo | N/A | onPaymentSubmit |
| Purchase | N/A | success |
| N/A | CheckoutClose | close |
Events include the following properties:
| Property | Notes |
|---|---|
| currency | |
| num_items | This property is only included with the InitiateCheckout event. |
| value | |
| content_ids | |
| contents | |
| content_type | This property is only included with the Purchase event. |
In this article, we’ve learned how to set up Google Analytics and Facebook Pixel tracking using callback events mapped to each step in checkout. At this point, your Bolt Integration should be complete and ready for full testing.