Stack Overflow
Stack Overflow

add raw HTML with – Derek Jin Jul 08 '20 at 18:56

11

Use React-Helmet

First import Helmet from 'react-helmet'

Inside your div you can do like this 

<Helmet>
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>
</Helmet>
Mohit Bajoria
  • 476
  • 1
  • 4
  • 15
  • 3
    Thank you, but this produces the same syntax errors as my initial code. It cannot be transpiled – Giannis Dallas Feb 26 '18 at 16:53
  • This is not really a solution to the problem, but a workaround I found was to inject custom scripts using Google Tag Manager. This won't be appropriate in all scenarios, but if you're injecting something like a tracking script it works great, and it helps to avoid littering your code with unmanaged scripts. I just used it to inject a MailChimp popup code on a Gatsby page and it worked great. – Aaron Newton Oct 09 '18 at 11:44
  • Do we have to use it in all the files of our whole project? Is there any smart work there to do with single included in the whole project? – sushildlh Mar 21 '20 at 13:20
  • @AaronNewton GTM doesnt work with the mailchimp script right? Not as far as i know. – Logemann Mar 16 '21 at 09:50
  • @Logemann I haven't tried it recently, but you can inject any script onto the page with GTM. I've even used it to replace content when I was in a jam. https://support.google.com/tagmanager/answer/6107167?hl=en – Aaron Newton Mar 17 '21 at 23:25
2

Apparently using a multiline JS syntax did the trick, as in

let test = "<script type='text/javascript'>\
(function(d, s) {\
    var useSSL = 'https:' == document.location.protocol;\
    var js, where = d.getElementsByTagName(s)[0],\
    js = d.createElement(s);\
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));\
</script><div id='pph-hireme'></div>"

alternatively, you can do

let test2 = `
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));
</script><div id='pph-hireme'></div>
`

Any more comments are welcome

Giannis Dallas
  • 648
  • 2
  • 8
  • 27
2

One way - perhaps the preferred way - is using the SSR file.

From the docs:

The file gatsby-ssr.js lets you alter the content of static HTML files as they are being Server-Side Rendered (SSR) by Gatsby and Node.js. To use the Gatsby SSR APIs, create a file called gatsby-ssr.js in the root of your site. Export any of the APIs you wish to use in this file.

A tutorial on how to do that is here.

It uses the setHeadComponents method to inject into html.js:

setHeadComponents

It takes an array of components as its first argument which will be added to head components during building time and which will be passed to html.js.

rmcsharry
  • 5,363
  • 6
  • 65
  • 108
0

There is another way, which is creating a React's effects:

import { useEffect } from 'react'

const useGoogleAnalytics = () => {

    useEffect(() => {
        // GA Snippet
    }, [])

    return null
}

And then you can use useGoogleAnalytics() in the page components you want to include.

The main advantage of this are:

  • You get transpilation of the code
  • It's way easier to maintain for more complex code than inside a template literal.

For simple scripts like Google Analytics I'd go for a template literal, but for custom and subject-to-change snippet I'd prefer an effect. As long as you don't abuse of those, It should not impact performance nor create overhead.

Does anyone see other disadvantages with this other method?

jonalvarezz
  • 739
  • 6
  • 4