Do you want to track BlackBaud Online Express (OLX) donation form conversion amounts through Facebook, Bing, Google Ads, or other Analytics Ecommerce tools?

As Online Express donation forms load the payment confirmation asynchronously, you need to utilize some javascript to capture the form submission event, any form values prior to the submission, and then fire the required analytics conversion event.

First we add the standard Online Express donation embed.

window.bboxInit = function () {
   bbox.showForm('your-donation-form-hash-id');
};
(function () {
   var e = document.createElement('script'); e.async = true;
   e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
   document.getElementsByTagName('head')[0].appendChild(e);
} ());

Then we need to add a function to the Online Express form load completion event that adds an onfocus event listener to the CSC/CSV input element to grab the donation value. This event listener could be added to any or all form fields depending on how your form is configured.

window.bboxShowFormComplete = function() {
   document.getElementById('bboxdonation_payment_txtCSC').addEventListener("focus", getDonationValue);
}
let donation_value = 0; //default
function getDonationValue(){
	var selEle = document.getElementsByClassName("BBFormRadioLabelGivingLevelSelected");
	var classStr = selEle[0].previousSibling.className;
	if (classStr.indexOf('BBFormRadioGivingLevelOther') !== -1){
		var otherVal = document.getElementById("bboxdonation_gift_txtOtherAmountButtons").value;
		donation_value = otherVal.replace(/\$/i, '');
	} else {
		donation_value = selEle[0].previousSibling.value;
	}
	return dval;
}

The getDonationValue function will grab the selected donation value amount from either predefined amounts or the other amount field.

Now we need to create and set a DOM observer to monitor for the asynchronous load of the donation confirmation thank you message.

var observer = new MutationObserver(function(mutations) {
   var myElement = document.getElementById('bboxdonation_divThanks');
   if (document.contains(myElement)) {
	//Google Ads sample
	gtag('event', 'conversion', {
	  'send_to': 'AW-112223333/234sf9234jlfs92',
	  'value': donation_value,
	  'currency': 'USD'
	});
        //FB Pixel Sample
        fbq('track', 'Purchase', {value:donation_value, currency:'USD', content_type: 'Donation',  content_name: 'BlackBaud Online Express Donation', content_category: 'Complete'});

        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

The observer will monitor any changes to the DOM and execute the required conversion event to push data into your analytics platform.