Gatsby: Adding thirdparty script to head of GatsbyJs

[shansmith01]

Summary

Hi I'm trying to add a thirdparty script to the head of my site but when I add it in nothing seems to rendeder in the head. If I try and load the script in the body the script is outputted, but not inside helmet. Any ideas where i could be going wrong?

Thanks

// Original

<script>(function(m,e,w,s){c=m.createElement(e);c.onload=function(){
Mews.D.apply(null,s)};c.async=1;c.src=w;t=m.getElementsByTagName(e)[0];t.parentNode.insertBefore(c,t);})
(document,'script','https://www.mews.li/distributor/distributor.min.js',[['b0501746-1c12-4558-bb5b-4dd9f7af1ffa']]);</script>

// My attempt

<Helmet>
    <script
    dangerouslySetInnerHTML={{
        __html: `
                (function(m,e,w,s){c=m.createElement(e);c.onload=function(){
    Mews.D.apply(null,s)};c.async=1;c.src=w;t=m.getElementsByTagName(e)[0];t.parentNode.insertBefore(c,t);})
    (document,'script','https://www.mews.li/distributor/distributor.min.js',[['b0501746-1c12-4558-bb5b-4dd9f7af1ffa']]);
            `,
    }}
    />
</Helmet>

Environment (if relevant)

System:
OS: macOS High Sierra 10.13.5
CPU: x64 Intel(R) Core(TM) i7-4558U CPU @ 2.80GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.4.0 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Browsers:
Chrome: 67.0.3396.99
Firefox: 61.0
Safari: 11.1.1
npmPackages:
gatsby: ^1.9.272 => 1.9.272
gatsby-image: ^1.0.54 => 1.0.54
gatsby-link: ^1.6.40 => 1.6.40
gatsby-plugin-react-helmet: ^2.0.10 => 2.0.10
gatsby-plugin-sass: ^1.0.26 => 1.0.26
gatsby-plugin-sharp: ^1.6.48 => 1.6.48
gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
gatsby-plugin-typography: ^1.7.19 => 1.7.19
gatsby-source-datocms: ^1.1.10 => 1.1.10
gatsby-source-filesystem: ^1.5.39 => 1.5.39
gatsby-transformer-sharp: ^1.6.27 => 1.6.27
npmGlobalPackages:
gatsby-cli: 1.1.58
gatsby: 1.9.166

[tetreault]

its a really gross way to do it but I had to add 2 external tracking scripts to a gatsby landing page i built for a client, and i manually inserted them in the generated index.html after building the project. not ideal, but if you're in a time crunch this method will obviously work.

[shansmith01]

Thanks for the tip. I have a couple of days up my sleeve. Hopefully, there is a more elegant solution

[echofoxxx]

@shansmith01 Have you tried something like this?

<Helmet>
    <script>
        {`YOUR_SCRIPT_HERE`}
    </script>
</Helmet>

Source: react-helmet documentation

[shansmith01]

Thanks @echofoxxx. @tetreault note the back ticks in the docs. That's where I was getting stuck

[shansmith01]

Changed title for improved SEO

[m4rrc0]

For reference.
I struggled a bit with embedded content for a client (like form and badge from a third party platform).
I used React Helmet and everything was working fine on development server but not on build.
Obviously, scripts that mess with the dom have to be deferred since helmet put them in the head.
Adding the defer attribute on the script tag takes us back to wonderland.
Hope this helps the lost souls.

[dougwithseismic]

Banged my head against this when trying to implement the Google Partner's badge. Adding the script to Helmet or html.js with a defer tag wasn't updating the DOM on build.

I've solved it by appending the script to a specific div using useEffect and mimicking componentDidMount.

Solution below :)
....
const IndexPage = () => {
useEffect(() => { const script = document.createElement('script') script.async = true script.defer = true script.src = 'https://apis.google.com/js/platform.js' document.querySelector('div.g-partnersbadge').appendChild(script) }, []) }

[wardpeet]

@dougwithseismic Helmet should have worked fine. You can also look at https://www.gatsbyjs.org/docs/ssr-apis/#replaceRenderer

[alacret]

I used this: https://usehooks.com/useScript/

This way you load the script only when you need it.