Gatsby use custom javascript

user_8408576 0
Viewed 175

So I want to use these scripts in my Gatsby project:

<script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"></script>
<script>
  glowCookies.start('en', { 
      style: 1,
      analytics: 'G-FH87DE17XF', 
      facebookPixel: '990955817632355',
      policyLink: 'https://link-to-your-policy.com'
  });
</script>

(from https://github.com/manucaralmo/GlowCookies)

I tried using it with react-helmet:

<Helmet>
  <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"></script>
  <script>
      glowCookies.start('en', { 
          style: 1,
          analytics: 'G-FH87DE17XF', 
          facebookPixel: '990955817632355',
          policyLink: 'https://link-to-your-policy.com'
      });
  </script>
</Helmet>

But I'm receiving this error:

  41:17  error  Parsing error: C:\(...)\layout.js:     
Unexpected token, expected "}" (41:17)

  39 |     <script>
  40 |         glowCookies.start('en', {
> 41 |             style: 1,
     |                  ^
  42 |             analytics: 'G-FH87DE17XF',
  43 |             facebookPixel: '990955817632355',
  44 |             policyLink: 'https://link-to-your-policy.com'

So just adding the first script tag would work, but not creating an instance of it.

react-helmet gatsby reactjs
2 Answers

Wrap like this:

<Helmet>
  <script src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"/>
  <script>
    {`glowCookies.start('en', {
      style: 1,
      analytics: 'G-FH87DE17XF',
      facebookPixel: '990955817632355',
      policyLink: 'https://link-to-your-policy.com'
    })`}
  </script>
</Helmet>

Using it as a template literal does the trick.

user_55853710

It may not be the nicest way to implement custom javascript, but this is what works best for me. So no need for react-helmet, just the use of Gatsbys build in functions:

gatsby-ssr.js

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"
      src="https://cdn.jsdelivr.net/gh/manucaralmo/GlowCookies@3.1.1/src/glowCookies.min.js"
      defer
    />,
    <script key="glowCookies.min.js" src="/js/glowCookies.js" defer />,
  ])
}

/static/js/glowCookies.js

glowCookies.start('en', {
   style: 1,
   analytics: 'G-FH87DE17XF',
   facebookPixel: '990955817632355',
   policyLink: 'https://link-to-your-policy.com'
})
user_84085760
Related