Adding a global script to <head> / <body> element in Gatsby. #38473
Unanswered
Stephen-Selvaraj
asked this question in
Help
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Requirement:
Page specific head and body section external scripts will be defined in the contentful CMS, those scripts need to be added in the respective head section and body section.
Example: Head section
![image](https://private-user-images.githubusercontent.com/130693673/262721097-8017c53e-8e2e-441a-b6d7-3b6a6fc1691f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODUxMjksIm5iZiI6MTczOTQ4NDgyOSwicGF0aCI6Ii8xMzA2OTM2NzMvMjYyNzIxMDk3LTgwMTdjNTNlLThlMmUtNDQxYS1iNmQ3LTNiNmE2ZmMxNjkxZi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxM1QyMjEzNDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iY2I4NWM2YjkxZTQzMDViNmE4Y2ZhZDhkYTdkOGM3NjMwNDhlZjkxYTYyYTViN2NiNjQ3MzZkODZhMTRjOWJhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Iy3Ms6RPc1BSo_jyU3rFLUa3bR0i0Zb0-NntDAjjk5Y)
Body Section:
![image](https://private-user-images.githubusercontent.com/130693673/262721293-a70117f6-6c01-4bcf-a246-2cd6e6517162.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODUxMjksIm5iZiI6MTczOTQ4NDgyOSwicGF0aCI6Ii8xMzA2OTM2NzMvMjYyNzIxMjkzLWE3MDExN2Y2LTZjMDEtNGJjZi1hMjQ2LTJjZDZlNjUxNzE2Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxM1QyMjEzNDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jOWMxNjRmOTE1ZjZjNTNkYjgwYmZiNjllODY4ODZhMDNjZmRhNzQ2MDU1ZDJiNTRlODgwZTRlYjM0NGFhNTcwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.ieGOcHuaRvvpYV52hKuJTS-m4IwNtgcK_ikIv-kpKss)
Issue:
![image](https://private-user-images.githubusercontent.com/130693673/262721419-7a6083f2-ddd8-41c4-94a2-f1b5ba087b22.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODUxMjksIm5iZiI6MTczOTQ4NDgyOSwicGF0aCI6Ii8xMzA2OTM2NzMvMjYyNzIxNDE5LTdhNjA4M2YyLWRkZDgtNDFjNC05NGEyLWYxYjViYTA4N2IyMi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxM1QyMjEzNDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jMjFhNDUyOTBlMDc3NDY2MjNjMWFmMzE5Nzk2NTEwNjRiZjlmYzIzZjcxNTY0MjU0MWJjNzhmOGM4MjUyYTdiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.1V7ZUuevdxN4dqI4j5dO-vryj7mQJiBBMAkhhnck0BQ)
document" is not available during server-side rendering. Enable "DEV_SSR" to debug this during "gatsby develop
Below screen explaining how end user prefer to manage page specific head and body section scripts in contentful:
![image](https://private-user-images.githubusercontent.com/130693673/262721528-fffcd1da-cbc3-4f19-a26a-9e748b417298.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODUxMjksIm5iZiI6MTczOTQ4NDgyOSwicGF0aCI6Ii8xMzA2OTM2NzMvMjYyNzIxNTI4LWZmZmNkMWRhLWNiYzMtNGYxOS1hMjZhLTllNzQ4YjQxNzI5OC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxM1QyMjEzNDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03MDY3YmVjYzc2MzYwOTAxMTEwMTg4MDczMjIzMTg0YTQ4MmFlYzYzZjlmZjRlOTBhM2Q3ZGJjMWQ1MWI1NjY0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.wBTA_ukNYT9vOL24DsodH5cSYXyXx15OZjIIPx_qcwM)
Graph QL query returning the data.
![image](https://private-user-images.githubusercontent.com/130693673/262721679-32e175f6-a736-4b54-8647-fd24b7f7e3e3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODUxMjksIm5iZiI6MTczOTQ4NDgyOSwicGF0aCI6Ii8xMzA2OTM2NzMvMjYyNzIxNjc5LTMyZTE3NWY2LWE3MzYtNGI1NC04NjQ3LWZkMjRiN2Y3ZTNlMy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxM1QyMjEzNDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04MzI1NzFkOWNmMDUwYTM5Y2NmYzBiZjJmN2NiM2E5ZThlZjlkNjkxNzI2M2UwYTgzMjc3YjY4ODY3YzAxMmMyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.5HzK_GaulnLQcNecDcrSpZeMAyikY2Va_CWJp4jpgQ8)
Attempted to use Gatsby Head API. Dev environment can be able to show the scripts in the respective section but after committing the code and triggering the Gatsby cloud it throws an above error. I have tried using , <Script>. Please help how should I implement this requirement.
![image](https://private-user-images.githubusercontent.com/130693673/262721925-6f8fb148-b2e8-4d81-921e-e579db3a4f92.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Mzk0ODUxMjksIm5iZiI6MTczOTQ4NDgyOSwicGF0aCI6Ii8xMzA2OTM2NzMvMjYyNzIxOTI1LTZmOGZiMTQ4LWIyZTgtNGQ4MS05MjFlLWU1NzlkYjNhNGY5Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxM1QyMjEzNDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yZTY1ODczNmI4ZTMwZGEzOTYzZDQwODIyOTI4NGM3ZTk1MzFlMjU1MjcxZTUyYzBlNmVmZmJkMWYzZDIxNjNhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.ccu2adLegZ_IGm6SOw7NvBy6DnFdDunaG5cN4-MgwhM)
Beta Was this translation helpful? Give feedback.
All reactions