Conversion Tracking Challenge #1 Breely.com

I today run into Breely.com, a simple, fresh and easy to use new appointment booking app. As a fun little challenge, I decided to figure out how conversion tracking could be implemented for it.

I have no idea how to do it. So let’s see if i I can figure it out.

This demonstrates how I approach tracking any new platforms project, simply testing each possible potential tracking method until I find something that works.

However, I’m pretty sure Breely will is adding new features very quickly, most likely including easier methods to track. As tracking Acuity is quite difficult,

Breely has a clean slate to do it right and seeing what they’ve done so far I have no doubt they’ll do a fantastic job at it as they’ve done with all the other features so far. I’m very impressed with the platform.

Tracking with double Google Tag Managers and JavaScript

Breely Google Tag Manager custom HTML tag

console.log("💬breely.js loaded");

document.addEventListener('submit', function(e) {
  // Check if it's the booking form submit event
  if (e.target.classList.contains('form-section-container')) {
      // Send message to parent window
      window.parent.postMessage({
          type: 'BOOKING_CONVERSION',
          data: {
              timestamp: new Date().toISOString(),
              eventType: 'submit',
              source: window.location.href
          }
      }, '*');
  }
}, true);

Parent / Main Website Listener Script

window.addEventListener('message', function(event) {
    // Skip polyfill messages
    if (typeof event.data === 'string' && event.data.includes('polyfillIdleCallback')) {
        return;
    }
    
    // Check if it's our booking conversion event
    if (event.data.type === 'BOOKING_CONVERSION') {
        console.log('💫 Booking Conversion:', event.data);
        
        // Push to dataLayer
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'booking_conversion',
            'booking_timestamp': event.data.data.timestamp,
            'booking_source': event.data.data.source,
            'eventType': event.data.data.eventType
        });
    }
}, false);

Not the most elegant or cleanest setup. But it works.

Tracking via a Redirect

Another easier method is to use a redirect. However, tracking based on redirects has following problems

• Unwated referrals in GA4

• duplicate conversions when visitors refresh the thank-you page (mobile browsers do this a lot). Transaction ID can be used in Meta, Google Ads but not in Google Analytics unless it’s a purchase

• If URL parameters become available, Google Analytics 4 has PII issues so it’s against their terms and conditions and requires extra hassle like trim query

I’ll definitely be looking at Breely and most likely will soon recommending it for my clients looking for a sweet spot between Acuity Scheduling and Calendly.