How GA4 integrate with Google Ads?

Question

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