You’re on the right track and the code looks almost correct, but there’s a slight mistake. You don’t need two separate script tags for the Google Tag Manager, you can load multiple tags through a single script. You should remove one of them, ideally the UA one. Instead, combine the id references in the gtag.js URL and gtag(‘config’) commands. Like this:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxx"></script>
<script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'G-xxxxxxx', {'debug_mode': true});
        gtag('config', 'UA-xxxxxxxx-x', {'debug_mode': true});

</script>

Now both GA4 and UA tracking will be linked, with the gtag.js loading only once. Remember to replace ‘G-xxxxxxx’ with your GA4 id and ‘UA-xxxxxxxx-x’ with your UA id. This will allow you to have both UA and GA4 tracking on your webpage at the same time.