How to Configure Checkout Analytics Using Callbacks

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.

Add Tracking IDs

1. Log in to the Merchant Dashboard.
2. Navigate to Settings > Checkout > Checkout Analytics and Tracking.
3. Update the following rows:
   • GA4 Measurement ID
   • Facebook Pixel ID
4. Select Edit
5. Enter the ID.
6. Select Update to save.

The ID populates in the row after updating. To edit, simply repeat these steps.

Google Analytics (GA4) Setup

1. Add the Global Site Tag to the frontend of your ecommerce site. Replace <Measurement_ID> with yours GA4 measurement ID.

<!-- Global site tag (gtag.js) – Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<`MEASUREMENT_ID`>"></script>
--
   <script>
   window.dataLayer = window.dataLayer \|\| [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
    
   gtag('config', '<Measurement ID>');
   </script>

GA4 Checkout Event Mappings

Below is a list of GA4 ecommerce events. Unlike in Universal Analytics, checkout steps do not have to be mapped to GA4 using Bolt callbacks.

Migrating to GA4 from Universal Analytics

You can retain both UA and GA4 tracking. To learn more about the difference in behavior and data between the two, see Google’s documentation.

Prerequisites

1. You have created both a UA and GA4 property and have linked them.

Setup

Add the following tag to the frontend of your site. Replace the <Measurement ID> with the GA4 measurement ID.

<!-- Global site tag (gtag.js) – Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=<Measurement ID>"></script>
--
 <script>
window.dataLayer = window.dataLayer \|\| [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
  
gtag('config', '<Measurement ID>');
</script>

Behavior

With dual tagging, you will see the following within both the GA4 and UA dashboards:

• Checkout data (checkout_begin, add_shipping_info, add_shipping_options, add_payment_info, purchase)
• Non-checkout data (page_visit, scroll, user_engagement, etc.)

Enhanced Ecommerce Tracking (Legacy)

The Enhanced Ecommerce setting uses Google Analytics’ standardized checkout funnel measurement with the Universal Analytics tracking ID (format “UA-00000000-0”) to track events in checkout. Refer to Google Analytics’ Enhanced Ecommerce Developer Guide when considering this section.

Checkout Step Mapping

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.

Step Example Callbacks

The following example callbacks 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.

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';
}

Purchase Tracking

Purchases can be mapped to Google Analytics using BoltCheckout.Configure callbacks. We recommend adding purchase measurements only to Step 5, the Success callback.

Facebook Pixel Settings

Bolt uses Facebook’s standard events when possible, to pass actions in checkout to Facebook through the pixel.

Pixel Ecommerce Tracking

Checkout Step Mapping

Event Properties

Events include the following properties:

Summary

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.