Script API should have an option to be placed in the head or body

[shalawfatah]

As of now, the <Script> tag produces a <script> inside the body. However, it will be a good feature if there is an option whether to move the tag to the head of the document or the body. I think with the new Head API, this could be easily resolved, but I have not seen anything in the Head API to say that it accepts the <Script> tag.

[tyhopp]

Hi @shalawfatah, thanks for the suggestion!

---

I think with the new Head API, this could be easily resolved, but I have not seen anything in the Head API to say that it accepts the <Script> tag

You can use <Script> in the Head API, but it won't end up in the static output HTML since it gets loaded in the browser runtime after hydration (with the post-hydrate or idle strategy). The Head API docs have a related section:

Data block <script> tags such as <script type="application/ld+json"> can go in the Head function, but dynamic scripts are better loaded with the Gatsby Script Component in your pages or components.

What's your use case? It would be good to know if it's something that you can't achieve with the current set of APIs (or the regular <script> tag) so we can consider how to enable it.

---

In terms of adding an option to the <Script> API to inject scripts in the head instead of body, there is no technical blocker that I can think of, but we're very careful about increasing the surface area of APIs for maintenance reasons. If there's a compelling use case for this and it's something more than a few people in the community would make use of then it's worth considering further.

---

Hope this is useful and thanks again for the suggestion!

[edison-burnkit]

For scripts like Google Tag Manager and Google Analytics 4, it is the recommended to put them in the head. I have no idea how to place the tracking scripts in the head with Gatsby Script API.

[praharshbhatt]

For scripts like Google Tag Manager and Google Analytics 4, it is the recommended to put them in the head. I have no idea how to place the tracking scripts in the head with Gatsby Script API.

@edison-burnkit One of the things that worked for me (without using external libs) is placing the script tags in gatsby-ssr.js as mentioned in this answer.