Add third party script tags (<script>) to react application-CodePudding

I'm creating a component to be included in a big React project, this component loads a group of script tags that looks like

<script type="text/javascript">
/* <![CDATA[ */
    var google_conversion_id = XXXX;
    var google_custom_params = window.google_tag_params;
    var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
    <div style="display:inline;">
        <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/XXXX/?value=0;guid=ON;script=0"/>
    </div>
</noscript>

I can't change the contents of this script in anyway, so now I'm using dangerously-set-html-content npm package to add & execute those scripts successfully, but then I get the following console warning:

conversion.js:29 Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

Of course I wish I could tell google to remove that from the code... but, sadly they won't do it, so I would like to know how to be able to load this kind of scripts and make them work.

I tried changing <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js" async></script> as other people suggested but the warning continues.

CodePudding user response：

You can use react-helmet to push the tag from your component.

CodePudding user response：

You can import any script to your react project like this:

loadScript = () => {
        const script = document.createElement("script");

        script.src = "https://yourlink.js";
        script.async = true;

        document.body.appendChild(script);
}

and call this function inside useEffect or componentDidMount method