How GA4 integrate with Google Ads?

Problem: I have an appointment booking widget (non-iframe) embeded into a webpage. How do I ensure GA4 is picking up on these form submissions?

Additionally, how does the form submission correlate up to the success of the Google Ad?

I have embeded this javascript in the form to ensure it fires data to GA4, but marketers are still telling me the conversions are not appearing with a traffic source from the UTM.

async function triggerConversionEvent() {

        const measurementId = 'measurementId'; // Replace with your GA4 Measurement ID         const conversionEventName = 'self_booked_appointment'; // Replace with your conversion event name         const clientId = 'booking_engine'; // Replace with a unique client ID (can be randomly generated)         const url = `https://www.google-analytics.com/mp/collect?measurement_id=${measurementId}`;         const body = {             client_id: clientId,             events: [                 {                     name: 'conversion',                     params: {                         event_name: conversionEventName,                     }                 }             ]         };         try {             const response = await fetch(url, {                 method: 'POST',                 headers: {                     'Content-Type': 'application/json'                 },                 body: JSON.stringify(body)             });             if (response.ok) {                 console.log('Conversion event triggered successfully');             } else {                 console.error('Failed to trigger conversion event');             }         } catch (error) {             console.error('Error triggering conversion event:', error);         }     }