This is somewhat similar to this question:
Adding script tag to React/JSX
But in my case I am loading a script like this:
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','ID');</script>
<!-- End Google Tag Manager -->
Now I know there is a npm package for the google tag manager but I am curious if I would like to do this in a custom way how would I go about?
In the above question I see a lot of:
const script = document.createElement("script");
script.src = "https://use.typekit.net/foobar.js";
script.async = true;
document.body.appendChild(script);
Which is fine but if I have a function inside of the loaded script how would I go about executing this correctly?
Answer
To add a random script like this, you could:
- Add the script to your index.html
- Paste the code to a file and use an import statement.
- Dynamically load the script once the user does something, using code splitting.
1. Adding the script to your HTML
Just stick the script tags in your index.html file, preferably at the end of the body tags. If using create-react-app, the index.html file is located in the public directory:
<body> <div id="root"></div> <script>/* your script here */</script> </body>
2. Import from file
Alternatively, you could paste the script into a .js file, and import it from anywhere in your code. A good place to import general scripts would be in your index.js entry point file. This approach has the benefit of including the script with the rest of your js bundle, enabling minification and tree shaking.
// index.js import "../path/to/your/script-file";
3. Code splitting Lastly, if you would like to dynamically load a piece of js code in a certain point in time, while making sure it isn’t part of your starting bundle, you could do code splitting, using dynamic imports. https://create-react-app.dev/docs/code-splitting
function App() {
function handleLoadScript() {
import('./your-script')
.then(({ functionFromModule }) => {
// Use functionFromModule
})
.catch(err => {
// Handle failure
});
};
return <button onClick={handleLoadScript}>Load</button>;
}