Where should I put this script?

[rkretch91]

Hi there,

I am trying to put a script into my blog:

<script data-grow-initializer="">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","dfsdfsdf=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>

I previously would put this in _document.js, but this is no longer available. I have tried layout.tsx but it is not registering the script even though I see it in the head.

Any help is much appreciated <3

[timlrx]

You can set it as an inline script in layout.tsx i.e. https://nextjs.org/docs/pages/building-your-application/optimizing/scripts#inline-scripts

[rkretch91]

Does anyone know how to get this external script (or any for that matter) on each page render? I get the nature of these applications are that they run once upon load (or refresh), but I need it to run with each page change.

[timlrx]

You probably don't want to re-initialise the script on page change, but just call a certain function to trigger an action on page change. The documentation from the third-party script provider should contain that information.

If you really want to load and re-load on page change, you could write a component that looks like this and insert it in the root layour:

export default function TestScript() {
  const pathname = usePathname()

  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://connect.facebook.net/en_US/sdk.js'
    script.async = true
    script.onload = () => console.log('Script loaded correctly, window.FB has been populated')
    document.body.appendChild(script)

    return () => {
      document.body.removeChild(script)
    }
  }, [pathname])

  return null
}