Hello Team,
We re working on Single page application (SPA) based in ReactJS framework, we have a requirement to implement gtag.js for tracking purpose.
in terms of SPA, we are going to be implemented gtag in direct call rule where we have only 3 options are available (Non-sequential JS /Non-sequential HTML / Sequential JS).
we chose Non-Sequential HTML and implemented in the following way
<!--
Start of global snippet: Please do not remove
Place this snippet between the <head> and </head> tags on every page of your site.
-->
<!-- Global site tag (gtag.js) - Google Marketing Platform -->
<script async src="https://www.googletagmanager.com/gtag/js?id=DC-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'DC-XXXXXXX');
</script>
<!-- End of global snippet: Please do not remove -->
<!--
-->
<script>
gtag('event', 'purchase', {
'allow_custom_scripts': true,
'transaction_id': _satellite.getVar("data-element-is-in-place"),
'send_to': 'DC-XXXXXXX/nudhomsa/aplus0+transactions'
});
</script>
<!-- End of event snippet: Please do not remove -->
This result is below

if we expand the above error

Any idea? How can we resolve this?
Help appreciated.
Thanks