Conversion Tracking on Embedded Blackbaud Forms

Featured Photo by Ilya Pavlov on Unsplash

Just thought I'd share this because it's a common issue amongst digital marketing when you encounter an embedded form.

This case is specific to Blackbaud but the principles can apply to any embedded that you are able to write custom HTML to the form.

The general principle is to

1. Have the child (embedded) frame to fire an event to the parent frame
2. Set up an event listener in the parent window to capture what the child frame is firing
3. Trigger an event in the parent window to fire something off to the datalayer
4. Capture the event in the datalayer to fire to the appropriate analytics platform

In Blackbaud, navigate to the appropriate form

Then click the "edit" button beside the embedded form that you want to track conversions on

Click to the "confirmation" tab on the form

Click on the "< >" source code icon

‍

In the source code, add this snippet of code:

<script>
window.parent.postMessage('inquirySubmitted', 'parent.com');
</script>

Feel free to edit "inquirySubmitted" and "parent.com" to suit your own needs; where "inquirySubmitted" is the message that you want the parent window's event listener to capture and where "parent.com" is the domain where the form is embedded on.

For example, if the form is found on swiftads (dot) io; then the domain "swiftads.io" should replace "parent.com".

‍

On the page that the form is found on, you need to add this code as the event listener:

<script>
 // In the parent page
 window.addEventListener('message', function(event) {
     // Check if the message is from a trusted origin
     if (event.origin !== 'https://subdomain.myschoolapp.com') {
         return;
     }
     // Check if the message data is the expected value
     if (event.data === 'inquirySubmitted') {
         // Push the event to the dataLayer
         window.dataLayer = window.dataLayer || []; // Ensure dataLayer is initialized
         window.dataLayer.push({
             'event': 'inquiry_form_submitted'
         });
     }
 }, false);
</script>

Feel free to edit "inquirySubmitted" and "inquiry_form_submitted" here.

"inquiry_form_submitted" would be the event name to set up triggers to capture the conversion point. In my case, I used Google Tag Manager (GTM) and just set up in the "triggers" section of GTM an event "inquiry_form_submitted" and have it fire the GA4 events as well as the Meta and Google pixels.

‍