React and Google Code for lead Conversion Page

Question

I have a simple react application with a contact form.

After submit I need to have this Google Code for lead Conversion Page showing on the page.

<!-- Google Code for Purchase Conversion Page -->
    <script type="text/javascript"> 
    /* <![CDATA[ */
    var google_conversion_id = 1234567890;
    var google_conversion_language = "en_US";
    var google_conversion_format = "1";
    var google_conversion_color = "666666";
    var google_conversion_label = "xxx-XXx1xXXX123X1xX";
    var google_remarketing_only = "false"
        var google_conversion_value = 10.0;
        var google_conversion_currency = "USD"
    /* ]]> */ 
    </script>
    <script type="text/javascript" 
    src="//www.googleadservices.com/pagead/
    conversion.js">
    </script>
    <noscript>
    <img height=1 width=1 border=0 
    src="//www.googleadservices.com/pagead/
    conversion/1234567890/
    ?value=10.0&amp;currency_code=USD&amp;label=xxx-   
    XXx1xXXX123X1xX&amp;guid=ON&amp;script=0">
           </noscript>

Since I can not add scripts into React - how can I do that? I have been going around in circles trying to use HTML-loaders but nothing seemed to work (HTML-loader would have the script showing on the page).

Would really appreciate any help.

Thank you!

Answer 1

I guess what you can do is one of these options:

1: Just add those scripts in your index.html file.

If you are using webpack you need to have an index.html file, some docs.

2: With a webpack plugin, add those scripts in a template. Then the plugin will do the job, more info here.

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    template: 'index.template.html'
  })
]

3: You can add a dynamic script tag: response found here

cbSuccess() {
  const script = document.createElement("script")

  script.src = "./your-script.js"
  script.async = true

  document.body.appendChild(script)
}