Menu
I added my google tag manager to _app.js file, and its not showing. None of the scripts I am loading via the new "Script" tag are working.
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<Script
src={`https://cdn.somelink.coom/${process.env.COOKIE_KEY}/block.js`}
strategy="beforeInteractive"
/>
<Script
src="https://cdn.somelink.com/scripttemplates/stub.js"
strategy="beforeInteractive"
/>
<Script
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_KEY}`}
strategy="afterInteractive"
/>
These are not working. Nothing is downloaded in the network tab etc. Nothing shows up on the page. Any thoughts?
Reminder: this is in the _app.js file.
Note: My pages are static generated.
795
Under normal circumstances, a script tag causes the browser to halt rendering, load a file, and run the code. The browser is blocked from doing other useful work because your JavaScript could write to the page, modify existing elements, or redirect to another URL.
To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.
The script tag should always be used before the body close or at the bottom in HTML file. The Page will load with HTML and CSS and later JavaScript will load.
The “script” tag JavaScript programs can be inserted almost anywhere into an HTML document using the <script> tag. You can run the example by clicking the “Play” button in the right-top corner of the box above. The <script> tag contains JavaScript code which is automatically executed when the browser processes the tag.
The Next.js Script component enables developers to set the loading priority of third-party scripts to save developer time and improve loading performance. Websites often need third parties for things like analytics, ads, customer support widgets, and consent management.
Now we can add script tags anywhere we want them to be. This is the straightforward case - you simply add the script file to externally located JavaScript files as the source. However - a little more complicated when you have to include scripts with inline JavaScript. For this, we will need to use dangerouslySetInnerHTML as shown below
Some third-party scripts require users to run JavaScript code after the script has finished loading in order to instantiate content or call a function. If you are loading a script with either beforeInteractive or afterInteractive as a loading strategy, you can execute code after it has loaded using the onLoad property:
It might be too much depending on your script tag, but script tags do not persist using shallow linking (Link component from Next). Another option is to use actual tags and then the script tag is run. Again this might work, just depends on what the script tag code is doing.
next/scriptshould not be wrapped innext/head
Ref.: Script Component
Do something like this:
import Script from "next/script";
const App = ({ Component, pageProps }) => (
<>
<Script
id="scriptAfterInteractive"
src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"
/>
{/* eslint-disable-next-line react/jsx-props-no-spreading */}
<Component {...pageProps} />
</>
);
export default App;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
